Button

Inputs

Stablev1.0.0

Interactive button with multiple variants and sizes, built on Ariakit for accessibility.

Preview

Variants

Sizes

States

Installation

npx @component-labs/cli add button

This will:
- Install required dependencies (@ariakit/react, class-variance-authority, lucide-react)
- Copy the Button component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Then add the base styles to your globals.css:
```css
@import "@component-labs/ui/base";
```

Usage

import { Button } from "@component-labs/ui";

<Button>Click me</Button>

Props

Name	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'`	`'default'`	Visual style variant of the button
`size`	`'sm' \| 'md' \| 'lg' \| 'icon'`	`'md'`	Size of the button
`fullWidth`	`boolean`	`false`	Whether the button should take full width of its container
`disabled`	`boolean`	`false`	Whether the button is disabled
`loading`	`boolean`	`false`	Loading state - shows loading indicator and disables the button
`loadingIndicator`	`ReactNode`	`-`	Custom loading indicator element
`startIcon`	`ReactNode`	`-`	Icon to display before the button text
`endIcon`	`ReactNode`	`-`	Icon to display after the button text

Examples

Default Button

Basic button with default styling

<Button>Click me</Button>

Button Sizes

Available size options

<div className="flex items-center gap-2">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>

With Icons

Buttons with icon support

<div className="flex gap-2">
  <Button startIcon={<Icon />}>Start Icon</Button>
  <Button endIcon={<Icon />}>End Icon</Button>
  <Button size="icon"><Icon /></Button>
</div>

Loading State

Button with loading spinner

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

Full Width

Button that spans the full width of its container

<Button fullWidth>Full Width Button</Button>

Performance

Bundle Size

3.2 KB (gzipped)

Minified and gzipped

Render Time

~0.5ms average

Initial render performance

Optimization Techniques

✓Minimal re-renders with stable className generation using CVA
✓Icon components are memoized to prevent unnecessary updates
✓Uses React.forwardRef for better composition
✓Loading state uses CSS animations instead of JavaScript

Accessibility

•Built with accessibility in mind
•Keyboard navigation support (Enter and Space keys)
•Proper ARIA attributes automatically applied
•Focus visible states with ring indicator
•Disabled state prevents interaction and updates ARIA