sheengemologic ui
All components

Toaster

A scoped, bounded notification queue with live announcements and paused visible-time expiry.@gemologic/sheen · overlays

Playground

This example has no scalar controls. Its validated source remains interactive below.
<><Button onClick={() => { notices.show({ title: "Saved", tone: "success" }); }}>Save</Button><Toaster controller={notices} /></>

Variant matrix

Scoped notifications

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Toaster.tsx
Tokens
  • --sheen-color-bg-raised
  • --sheen-duration-fast
  • --sheen-space-block-md

Accessibility

Role: regionKeyboard: Tab, Shift+Tab, Enter, Space, Escape

Do

  • Create and mount a controller inside the appropriate theme scope.
  • Keep essential information and actions available without a time limit.

Do not

  • Do not treat dismissal as cancellation of an app-owned request.
  • Do not mount multiple presenters for the same controller.

Generated props

NameTypeDefaultDescription
controller *ToastController—Owner-local notification controller. Mount one presenter for each controller.
limitnumber3Positive maximum number of visible or exiting cards; queued cards do not consume lifetime.
labelstring—Accessible region name; defaults to the scoped notifications message.
classstring—Additional region classes.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.