# Button

Render the primary shared action control for the highest-priority calls to action. The absolute workhorse of any UI.

## Notes

- Use Button for actions, not navigation. If clicking it changes the URL, you probably want a LinkButton.
- Switch to LinkButton when the target is another route.
- Use selected when a button represents the active pressed state. It's like leaving the button squished down.
- Don't make everything a primary button. If everything screams for attention, the user just gets a headache.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| variant | `'primary' | 'secondary' | 'danger'` | 'primary' | The visual style of the button. |
| size | `'sm' | 'md' | 'lg'` | 'md' | The size of the button. |
| disabled | `boolean` | false | Whether the button is disabled. |
| selected | `boolean` | false | Whether the button is in a selected/pressed state. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<Button variant="primary" selected>Ship it</Button>
```