Toast

A notification card with stable action, pending, retry, and dismissal controls.@gemologic/sheen · overlays

Playground

This example has no scalar controls. Its validated source remains interactive below.

Saved

<>{notification && <Toast notification={notification} onAction={() => { void notices.runAction(id); }} onDismiss={() => { notices.dismiss(id); }} />}</>

Variant matrix

Notification card

Saved

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Toast.tsx

Tokens

--sheen-color-bg-raised
--sheen-color-focus-ring
--sheen-color-danger-fg
--sheen-elevation-overlay

Accessibility

Role: groupKeyboard: Tab, Shift+Tab, Enter, Space

Do

Key cards by notification handle and pass updated snapshots into the existing card.
Provide safe localized action error text.

Do not

Do not use a transient card as the only place essential information or actions can be found.
Do not mistake the card for a complete queue presenter: announcements, timers, and removal belong to the presenter.

Generated props

Name	Type	Default	Description
`notification` *	`ToastNotification`	—	Immutable controller snapshot. Raw errors are never rendered.
`onAction` *	`() => void`	—	Request the owning controller's action. Pending actions cannot be invoked through the button.
`onDismiss` *	`() => void`	—	Request removal without canceling app-owned work.
`class`	`string`	—	Additional card classes.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.