> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

> Primary and secondary action button with variants and sizes.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/button-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=407667c53441cd4fe3b9098d8ac5637d" alt="Button component preview (light)" width="400" data-path="images/ui/button-light.png" />
</Frame>

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

```tsx sabo/src/components/ui/button.tsx theme={null}
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

<ParamField path="variant" type="string">
  default | secondary | outline | ghost | link | destructive
</ParamField>

<ParamField path="size" type="string">
  default | sm | lg | icon | icon-sm | icon-lg
</ParamField>

<ParamField path="asChild" type="boolean">
  Render as the child element (e.g., wrap a Link) while preserving Button styles.
</ParamField>

## Styling tip

Use variants and sizes first. Reach for `className` only for small tweaks (spacing, radius).

```tsx theme={null}
<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.