Button

Button

Variants

PrimarySecondaryGhostDanger

Sizes

SmallMediumLarge

States

Disabled

Icon Button Variants

Icon Button Sizes

Icon Button States

Usage

import { Button } from "@f0rbit/ui";

<Button variant="primary">Click me</Button>

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "ghost" | "danger"	"primary"	Visual style variant
size	"sm" | "md" | "lg"	"md"	Button size
icon	boolean	false	Render as square icon-only button
label	string	—	Accessible label for icon buttons (sets aria-label)
loading	boolean	false	Show loading spinner
disabled	boolean	false	Disable the button

Variants

Buttons come in four variants to communicate different levels of emphasis:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

• Primary: Use for main actions like “Save” or “Submit”
• Secondary: Use for alternative actions
• Ghost: Use for subtle actions that don’t need emphasis
• Danger: Use for destructive actions like “Delete”

Sizes

Three sizes are available:

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

States

Loading

Show a loading spinner when an action is in progress:

<Button loading>Saving...</Button>

Disabled

Disable interaction when the action is not available:

<Button disabled>Not available</Button>

Icon Button

Use the icon prop for square icon-only buttons. Add a label prop for accessibility:

<Button icon label="Add item">
  <PlusIcon />
</Button>

Icon buttons support all the same variants:

<Button icon label="Add"><PlusIcon /></Button>
<Button icon label="Edit" variant="secondary"><EditIcon /></Button>
<Button icon label="Settings" variant="ghost"><SettingsIcon /></Button>
<Button icon label="Delete" variant="danger"><TrashIcon /></Button>

And all the same sizes and states:

<Button icon label="Small" size="sm"><PlusIcon /></Button>
<Button icon label="Loading" loading><PlusIcon /></Button>
<Button icon label="Disabled" disabled><PlusIcon /></Button>