XDS — Design System

Banner@xds/core v0.0.13 · XDSBanner

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
import {XDSBanner} from '@xds/core/Banner'

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.

Examples

Common configurations, variations, and states.

Banner — Collapsible

Combine an action button, dismiss control, and expandable detail area in one banner. 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 — 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.

Usage

import {XDSBanner} from '@xds/core/Banner'

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.