Actions

Button

Primary actions with variants, sizes and icon support.

Variants

Five intents, all driven by tokens — no hardcoded colors.

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

<div className="flex flex-wrap items-center gap-3">
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="danger">Danger</Button>
  <Button disabled>Disabled</Button>
</div>

Sizes

Three sizes plus a square icon-only variant.

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

<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>