Snackbar API

Headless compound component for toast and snackbar notifications. Pairs with useNotifications for queue-driven stacks with auto-dismiss and pause on hover.

Explore these related pages for additional context and usage patterns.

Page	Category
Snackbar	Semantic
useNotifications	Plugins
createQueue	Registration

Snackbar.Root

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:notifications"

id

any

Unique identifier. Auto-generated if not provided.

Default: useId()

urgent

boolean | undefined

When true, sets role="alert" for urgent messages; otherwise role="status".

Events

dismiss

[id: ID]

Slots

default

SnackbarRootSlotProps

Snackbar.Announcer

Props

namespace

string | undefined

Namespace for context injection from parent Snackbar.Portal.

Default: "v0:notifications"

Snackbar.Close

Props

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:notifications"

Slots

default

SnackbarCloseSlotProps

Snackbar.Portal

Props

announcer

boolean | undefined

Auto-render the Snackbar.Announcer live-region pair. Set false to omit it or place <Snackbar.Announcer> yourself.

Default: true

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:notifications"

teleport

false | "top-layer" | (string & {}) | undefined

Teleport target. 'top-layer' mounts into the topmost open modal; false renders inline.

Default: "top-layer"

Slots

default

SnackbarPortalSlotProps

Snackbar.Queue

Props

namespace

string | undefined

Which notifications instance to connect to.

Default: "v0:notifications"

Slots

default

SnackbarQueueSlotProps