Skip to main content
Button component preview (light)
  • Location: sabo/src/components/ui/button.tsx

​
When to use

  • Trigger primary and secondary actions (submit, save, navigate).
  • Use icon sizes (icon, icon-sm, icon-lg) for square icon-only buttons.

​
Usage

sabo/src/components/ui/button.tsx
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <>
      <Button>Primary</Button>
      <Button variant="secondary" size="sm" className="ml-2">Secondary</Button>
      <Button variant="outline" size="lg" className="mt-2">Outline</Button>
      <Button variant="destructive" className="mt-2">Delete</Button>
      <Button size="icon" aria-label="Star" className="mt-2">
        {/* icon here */}
      </Button>
    </>
  );
}

​
Key props

​
variant
string
default | secondary | outline | ghost | link | destructive
​
size
string
default | sm | lg | icon | icon-sm | icon-lg
​
asChild
boolean
Render as the child element (e.g., wrap a Link) while preserving Button styles.

​
Styling tip

Use variants and sizes first. Reach for className only for small tweaks (spacing, radius). 
<Button variant="outline" className="mt-3 rounded-lg">Action</Button>

​
Accessibility

  • Provide clear text. For icon-only buttons, add aria-label or include visually hidden text.
  • Use type="submit" when inside forms; mark disabled states appropriately.
  • Ensure sufficient color contrast; avoid conveying state with color alone.