Button

The Button component is one of the most fundamental interactive elements in UI Lab. It supports multiple variants, sizes, and states to cover all your interface needs.

Basic Usage

import { Button } from '@ui-lab/react';

<Button>Click me</Button>

Variants

Primary

<Button variant="primary">Primary Button</Button>

Secondary

<Button variant="secondary">Secondary Button</Button>

Outline

<Button variant="outline">Outline Button</Button>

Ghost

<Button variant="ghost">Ghost Button</Button>

Danger

<Button variant="danger">Danger Button</Button>

Sizes

Small

<Button size="small">Small Button</Button>

Medium (Default)

<Button size="medium">Medium Button</Button>

Large

<Button size="large">Large Button</Button>

States

Disabled

<Button disabled>Disabled Button</Button>

Loading

<Button loading>Loading...</Button>

With Icon

<Button icon="arrow-right" iconPosition="right">
  Continue
</Button>

API Reference

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`'primary'`	Button style variant
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Button size
`disabled`	`boolean`	`false`	Disables the button
`loading`	`boolean`	`false`	Shows loading state
`icon`	`string`	`undefined`	Icon name from icon library
`iconPosition`	`'left' \| 'right'`	`'left'`	Icon position relative to text
`onClick`	`function`	`undefined`	Click event handler
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTML button type

Examples

Call-to-Action Button

<Button
  variant="primary"
  size="large"
  icon="rocket"
  onClick={() => handleSignup()}
>
  Get Started Free
</Button>

Form Actions

<div className="flex gap-3">
  <Button variant="outline" onClick={handleCancel}>
    Cancel
  </Button>
  <Button type="submit" loading={isSubmitting}>
    Save Changes
  </Button>
</div>

Icon-Only Button

<Button
  variant="ghost"
  size="small"
  icon="settings"
  aria-label="Settings"
/>

Accessibility

Buttons include proper ARIA attributes automatically
Keyboard navigation support (Enter/Space)
Focus indicators for accessibility
Screen reader compatible
Disabled state properly communicated

Customization

Override button styles using CSS custom properties:

.custom-button {
  --ui-button-bg: #ff6b35;
  --ui-button-text: white;
  --ui-button-border-radius: 20px;
}

Edit this page on GitHub

Free

Pro