Toaster
See a short message about an action's progress or result, with an action such as Undo when available.
<script setup lang="ts">import { Link } from '@lucide/vue'import { UiButton, UiToaster, useToast } from 'grani' const toast = useToast()</script> <template> <UiButton variant="outline" @click="toast.success('Invoice sent')">Success</UiButton> <UiButton variant="outline" @click="toast.info('Reminder scheduled', { description: 'Tomorrow at 9:00' })" > Info </UiButton> <UiButton variant="outline" @click="toast.warning('Two items are out of stock')" >Warning</UiButton > <UiButton variant="outline" @click="toast.error('Could not save', { description: 'The server did not answer.' })" > Error </UiButton> <UiButton variant="outline" @click="toast.show({ title: 'Draft saved' })">Neutral</UiButton> <UiButton variant="outline" @click="toast.success('Link copied', { icon: Link })"> Own glyph </UiButton> <UiButton variant="outline" @click="toast.error('Payment declined', { duration: 'persistent' })" > Until closed </UiButton> <!-- Once, at the app's root: leave out what the app has there already. --> <UiToaster /></template>
Also called toast, notifications, snackbar.
Usage
<UiToaster /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| placementbottom | bottom-end | bottom-start= "bottom-start" | "bottom-start" | Where the stack stands on the bottom edge; start and end follow the reading direction. |
Anything else lands on the root element: native attributes, aria-*, data-testid.