Toast

Feedback

Transient notifications triggered programmatically via useToast().

Props

Prop	Type	Default	Description
`title`*	`string`	—	Toast heading text.
`description`	`string`	—	Optional body text below the title.
`variant`	`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'default'`	Color and severity.
`duration`	`number`	`4000`	Auto-dismiss duration in ms.
`dismissible`	`boolean`	`true`	Show a close button.

Examples

Click each button to trigger a toast notification. Make sure DsToastProvider is present in your root layout.

vue

<script setup>
const { toast } = useToast()
</script>

<template>
  <DsButton @click="toast({ title: 'Saved', description: 'Changes applied.', variant: 'success' })">
    Show toast
  </DsButton>
</template>

Accessibility

Uses role="alert" and aria-live="polite" for screen reader announcements.
Dismissible toasts have an accessible close button with a proper aria-label.

Spinner

Tooltip