Docs
Components
Banner + Toast

The Banner and Toast Components

Use <Banner> for persistent high-visibility messages and <Toast> for lightweight transient notices.

Banner example

privacy-banner.tsx
<Banner
  featureId="privacy-policy-update"
  variant="warning"
  dismissible
  position="sticky"
/>

Toast example

launch-toast.tsx
<Toast
  featureIds={['dark-mode-launch']}
  autoDismissMs={5000}
  maxVisible={1}
  position="bottom-right"
/>

Common props

ComponentPropNotes
BannerfeatureIdRequired feature entry
Bannervariant, dismissible, positionBehavior + style
ToastfeatureIdsOptional filter list
ToastautoDismissMs, maxVisible, positionLifecycle + layout

Typical pattern: launch week banner + follow-up toast for lighter reminders.

Interactive Demo