Preview Updated 2026-05-10

Snackbar

Single-line pill notification with a built-in action button (e.g. Undo); supports 6 placements.

Basic usage

Differs from Toast: single-line, pill-shaped, with an action. Common use case: an “Undo” after deletion.

src/App.vue vue

<CfSnackbar
v-model:open="open"
tone="success"
message="Deleted login.request"
action-label="Undo"
action-shortcut="⌘Z"
@action="undo"
/>

src/App.tsx tsx

<CfSnackbar
open={open}
onOpenChange={setOpen}
tone="success"
message="Deleted login.request"
actionLabel="Undo"
actionShortcut="⌘Z"
onAction={undo}
/>

Six placements

Default is bottom-center; top-right is a common alternative (doesn’t cover bottom content).

src/App.vue vue

<CfSnackbar v-model:open="open" placement="bottom-right" message="…" />

src/App.tsx tsx

<CfSnackbar open={open} onOpenChange={setOpen} placement="bottom-right" message="…" />

API

Prop	Type	Default	Description
`open` / `v-model:open`	`boolean`	—
`tone`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Includes an icon
`placement`	`'bottom-center' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'top-left' \| 'top-right'`	`'bottom-center'`
`duration`	`number`	`5000`	ms; 0 disables auto-close
`actionLabel`	`string`	—	Action button copy
`actionShortcut`	`string`	—	Shortcut hint shown to the right of the action
`showDismiss`	`boolean`	`true`	Show × button