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

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

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.