# Button
`Button` triggers an action when clicked. It wraps the Spar headless button
primitive and adds Takeoff visual vocabulary — variant, size, loading state, and
icon slots.
## Usage
```tsx
import { Button } from '@takeoff-ui/react-spar';
```
```tsx
```
## Playground
```tsx
function PlaygroundDemo() {
return (
);
}
render();
```
## Variants
```tsx
function VariantsDemo() {
return (
);
}
render();
```
## Appearance
```tsx
function AppearanceDemo() {
return (
);
}
render();
```
## Sizes
```tsx
function SizesDemo() {
return (
);
}
render();
```
## Loading
```tsx
function LoadingDemo() {
const [loading, setLoading] = React.useState(false);
return (
);
}
render();
```
## Disabled
```tsx
function DisabledDemo() {
return (
);
}
render();
```
## Toggle
```tsx
function ToggleButtonDemo() {
const [pressed, setPressed] = useState(false);
return (
);
}
render();
```
## Icons
```tsx
function IconsDemo() {
return (
}>Favorite
}>Continue
} endContent={
}>
Both
} rounded />
);
}
render();
```
## Accessibility & Keyboard
- Renders a native `