Banner @astryx-svelte/core v0.5.2 · Banner
Usage
Banner shows a persistent message at the top of a page or section. Use it for form errors, system updates, maintenance notices, or success confirmations that the user needs to see until they act on it.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Pick a status that matches the message: info for updates, warning for caution, error for problems, success for confirmations. |
| Do | Use the card container inside page content and the section container for full-width messages that span the entire page. |
| Do | Make info and success banners dismissable. Keep error banners visible until the user fixes the issue. |
| Do | Keep titles short and scannable: "Payment failed" not "There was a problem processing your most recent payment." |
| Don't | Use Banner for short-lived messages that disappear on their own; use Toast instead. |
| Don't | Stack multiple banners with the same status; combine related messages into one banner. |
| Do | Set collapsible={false} when the user needs the content to act on the message, like the list of fields that failed validation. Keep the default toggle when the detail is long enough to bury the banner’s own message. |
| Do | Error and warning banners render as role="alert"; info and success render as role="status". Mount an alert banner in response to an event rather than on first paint, so assistive tech has a change to report. |
| Don't | Rely on the status color or icon alone to carry meaning; say which status it is in the title text, because the icon is decorative to a screen reader. |
Examples
Common configurations, variations, and states.Banner — Collapsible
Combine an action button, dismiss control, and a collapsible detail area in one banner. Children sit behind the toggle by default;
collapsible={{defaultIsOpen: true}} starts it open, and collapsible={false} drops the toggle entirely. Use for complex notifications like config changes or deployment summaries. Banner — Dismiss
Let the user close a banner after reading it. Use for maintenance notices, feature tips, or any non-critical message the user can acknowledge.
Banner — Floating
A floating banner raised with
elevation="med". Banners are inline by default; raise one when it should read as an overlay above content. Banner — Full Width
A full-width banner with no border radius for page-level notifications. Use at the top of a page for site-wide announcements or maintenance alerts.
Banner — Statuses
All 4 banner statuses: info, success, warning, and error. Use to show persistent messages like updates, confirmations, cautions, or problems at the top of a page or section.
Banner — Action
Add a button to a banner so the user can act on the message. Use for trial expirations, payment failures, or anything that needs a response.