# Button (/docs/products/dash-dots/reference/components/button)

Use `variant="primary"` for the page's main action and `secondary` for the rest. `outline` and `ghost` are quieter still.

**Children:** Text, which can include `Text`, `Link` and `Icon` within a line

## Example

![The Button component](/assets/images/dash-dots/components/button.webp)

```xml title="view.dml"
<View gap="small">
  <Button onClick="pay" loading="{{ paying }}">Pay</Button>
  <Button variant="secondary">Add to cart</Button>
  <Button variant="outline">See details</Button>
  <Button variant="ghost">Not now</Button>
</View>
```

```ts title="controller.ts"
export default definePage({
  initialState: { paying: false },
  mutations: {
    pay: () => ({ paying: true }),
  },
});
```

## Props

| Prop       | Type                                                                      | What it is                                                                                             |
| ---------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `variant`  | `primary`, `secondary`, `outline`, `ghost`                                | `secondary` is a quiet fill, `outline` only an outline, and `ghost` only its text. Default: `primary`. |
| `tone`     | [status tone](/docs/products/dash-dots/reference/components#status-tones) | Draws the button in a tone's color, such as `danger` for one that deletes. Default: `default`.         |
| `size`     | [size](/docs/products/dash-dots/reference/components#sizes)               | Default: `medium`.                                                                                     |
| `disabled` | `boolean`                                                                 | Dims it, and the person can't use it.                                                                  |
| `loading`  | `boolean`                                                                 | Shows a spinner and ignores taps, such as while a payment is sent.                                     |

## Events

| Event     | Sends   | Notes |
| --------- | ------- | ----- |
| `onClick` | Nothing |       |