Component

Button

Action trigger. Renders as a <button> or <a> depending on whether href is passed.

Variants

live editor — edit to update preview

<div className="flex flex-wrap gap-3">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="danger">Danger</Button>
</div>

Sizes

live editor — edit to update preview

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

Loading state

live editor — edit to update preview

function Demo() {
  const [loading, setLoading] = useState(false);
  return (
    <Button
      loading={loading}
      onClick={() => { setLoading(true); setTimeout(() => setLoading(false), 2000); }}
    >
      {loading ? "Saving…" : "Click to load"}
    </Button>
  );
}
render(<Demo />);

Full width

live editor — edit to update preview

<Button fullWidth>Full width button</Button>

Props

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	"primary"	Visual style.
size	"sm" \| "md" \| "lg"	"md"	Padding and font size.
fullWidth	boolean	false	Stretches to fill its container.
loading	boolean	false	Disables the button and dims it.
href	string	—	Renders as an anchor tag when provided.