Banners & toasts
Two notification surfaces with different lifecycles. <DSAlertBanner> is a thin, full-width strip for persistent conditions ("guest mode active", "this resume is published") — it lives above the content until the condition changes. <DSToast> is a transient card triggered by an event (resume saved, sync failed) — the consumer manages stacking, positioning, and timing.
DSAlertBanner
Persistent inline banner — info / success / warning / danger tones.
Tone variants
Tone tints the border + background lightly. Info uses a neutral ink-based tint so it sits quietly above content; status tones mirror the rest of the system vocabulary.
Without icon
The icon is optional — leave it off when the banner sits inside a section that already carries enough visual context.
Dismissible
Pass `dismissible` to render a trailing close button. The component emits 'dismiss' — the consumer removes the banner from the DOM. The example below toggles its own state.
DSToast
Transient floating notification — lifecycle is the consumer's responsibility.
Tone variants
Card-style surface with a tone-colored leading rule and the system shadow. The component renders one toast — your code wraps it in a region, manages stacking, and sets a timeout.
With action
The actions slot accepts a small DSBtn — useful for undo, retry, or a follow-up link. Keep it short; toasts are read in passing.
Stacked, with dismissal
A consumer-side toast region typically stacks toasts vertically with a small gap. Click the dismiss button on any toast to remove it from the queue.
useDSToast() — live region
The real toast system, mounted at the app root via DSToastRegion. Fire one — it pops in the bottom-right (desktop) or bottom-center (mobile).
Trigger toasts
Each button calls useDSToast().add({ ... }). Auto-dismiss is 5s by default; the sticky one passes duration: 0 and stays until you click it.