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.
Preview loads on approachPreview loads on approach
Exact source · banner-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Banner} from '@astryxdesign/core/Banner';
import {Stack} from '@astryxdesign/core/Layout';
export default function BannerShowcase() {
return (
<Stack direction="vertical" gap={3} style={{maxWidth: 800}}>
<Banner status="info" title="A new software update is available." />
<Banner status="success" title="Your changes have been saved." />
<Banner
status="warning"
title="Your trial expires in 3 days."
description="Upgrade to keep access to all features."
/>
<Banner
status="error"
title="Payment failed."
description="Update your billing information to continue."
/>
</Stack>
);
}
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.
Pick a status that matches the message: info for updates, warning for caution, error for problems, success for confirmations.
Use the card container inside page content and the section container for full-width messages that span the entire page.
Make info and success banners dismissable. Keep error banners visible until the user fixes the issue.
Keep titles short and scannable: "Payment failed" not "There was a problem processing your most recent payment."
Use Banner for short-lived messages that disappear on their own; use Toast instead.
Stack multiple banners with the same status; combine related messages into one banner.
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.
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.
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.
Called when the dismiss button is clicked; banner hides itself regardless of whether this is provided.
dismissLabel
string
Accessible name and visible tooltip for the dismiss button (pass it already translated). Defaults to "Dismiss <title>" for a string title, so stacked banners are distinguishable; set it when the title is a ReactNode.
endContent
ReactNode
Action content rendered in the header area, end-aligned. Wraps to its own row below the text when the header is too narrow to hold both.
Container type: card has border-radius; section is full-width with no border-radius for page-level use.
elevation
'none' | 'low' | 'med' | 'high' · default 'none'
Resting shadow depth. Use for a floating banner that hovers above content; none is the default inline banner. A card-container banner rounds its shadow to match.
children
ReactNode
Content rendered in the card-background area below the colored header. Sits behind an expand/collapse toggle unless collapsible={false}.
Whether the content area (children) sits behind an expand/collapse toggle in the header. On by default, starting collapsed. false opts out: children are always visible with no toggle. {defaultIsOpen: true} starts open; {isOpen, onOpenChange} is controlled. Takes the same CollapsibleConfig as Collapsible.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
Anatomy
Banner frame · required
Outer frame that groups the status surface and optional content surface. It carries whole-banner elevation and, for elevated card banners, the radius that shapes that silhouette.
Status surface · required
The primary painted surface. It communicates status and contains the icon, title, description, actions, and controls.
Icon · required
Automatically set based on the status (info, warning, error, success).
Title · required
The main message. Always required.
Description · optional
Additional detail below the title.
Action button · optional
A button for the user to act on the message, like "Review" or "Retry".
Dismiss button · optional
Lets the user close the banner. Enabled by setting isDismissable.
Content surface · optional
Secondary surface for extra detail below the status surface, like a list of errors. Sits behind an expand/collapse toggle by default; set collapsible={false} to keep it visible.
Theming
Targets
astryx-banner-frame
Visual props: container, elevation
astryx-banner
Visual props: container, status
astryx-banner-icon
Visual props: status
astryx-banner-description
astryx-banner-content
Visual props: container, status
Variables
--_banner-radius · private
Border radius of the card container (header, content area and the elevated root silhouette)
