Products · Components
Toast
A short message that shows over the page for a moment, such as "Copied".
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
<View>
<Button variant="secondary" onClick="copy">Copy reference</Button>
<Toast message="{{ toast }}" tone="success" onHide="clearToast" />
</View>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 | Default: default. |
duration | number | In milliseconds. Default: 2500. |
Events
| Event | Sends | Notes |
|---|---|---|
onHide | Nothing | The toast hid. |