# Toast (/docs/products/dash-dots/reference/components/toast)

Keep one `Toast` on the page and set `message` to show it. To show the same text twice, clear `message` in `onHide`.

**Children:** Nothing

## Example

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

```xml title="view.dml"
<View>
  <Button variant="secondary" onClick="copy">Copy reference</Button>
  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
</View>
```

```ts title="controller.ts"
export default definePage({
  initialState: { toast: '' },
  mutations: {
    copy: () => ({ toast: 'Copied' }),
    clearToast: () => ({ toast: '' }),
  },
});
```

## Props

| Prop       | Type                                                                      | What it is                                              |
| ---------- | ------------------------------------------------------------------------- | ------------------------------------------------------- |
| `message`  | `string`                                                                  | The text to show. The toast shows each time it changes. |
| `tone`     | [status tone](/docs/products/dash-dots/reference/components#status-tones) | Default: `default`.                                     |
| `duration` | `number`                                                                  | In milliseconds. Default: `2500`.                       |

## Events

| Event    | Sends   | Notes          |
| -------- | ------- | -------------- |
| `onHide` | Nothing | The toast hid. |