Banner

An inline message that tells people about the state of a page or section, with optional actions.

Colors

color sets the surface. Pick it by meaning: green for success, blue for something in progress, orange for a warning, red for an error, and grey or white for neutral information. icon takes success, info, warning or error for the matching glyph.

A banner has role="status" by default, so screen readers announce it politely. Use role="alert" for errors that need attention right away.

Your Shopify store is connected

Syncing project context from Notion

Some prompts could not be refreshed this week

This workspace is shared with your agency

Profound is missing context to personalize your chats

Description

description adds a second line of supporting copy. With a description, the icon lines up with the title instead of the middle of the banner.

Migrated from Projects v1

Tasks became suggestions, chats were moved over read-only, and the report was added as context.

Shopify is not enabled for this organization

Switch to an organization with Shopify enabled, or contact your administrator.

Actions

primaryAction and secondaryAction render at the end of the banner, with the secondary action first. Pass small buttons. onDismiss adds a close button labelled "Dismiss banner"; the banner does not hide itself, so remove it in the callback.

The text shrinks to make room for the actions. Where the banner can get narrow, add flex-wrap and a minimum width on the text with contentClassName, so the actions move under the text instead.

Your brand was not found in answer engine results

Try adding brand aliases or updating the prompts you track.

Accent color and custom icons

coloredTitle colors the title, and the text of plain-text actions, with the banner's accent. iconColor colors only the icon, for a neutral surface that still needs a colored glyph. icon also accepts any icon element, which is sized and colored for you.

It's your turn to review

Comment or suggest changes in the document, then approve or request changes.

Agent runs disabled

Runs are blocked by your organization's billing limits. Contact your billing admin.

This review is done

Approvers can now only view the copy.

Usage

Properties

titleRequired
React.ReactNode

The main message

description
React.ReactNode

Supporting copy under the title

color
'green''red''orange''blue''grey''white'

Surface and accent color

Default: green

icon
'info''warning''error''success'React.ReactNode

A built-in glyph by name, or an icon element. No icon renders when omitted

iconColor
'green''red''orange''blue''grey''white'

Accent color for the icon alone. Defaults to color

coloredTitle
boolean

Colors the title and the action area's text with the banner's accent

primaryAction
React.ReactNode

The main action, rendered last

secondaryAction
React.ReactNode

An extra action, rendered before primaryAction

actionsAlignment
'start''center'

Aligns the actions with the top or the middle of the banner

Default: center

onDismiss
() => void

Shows a dismiss button and runs when it is clicked. The banner does not hide itself

role
React.AriaRole

Live-region role. Use alert for urgent errors, or presentation inside another live region

Default: status

orientation
'horizontal''vertical'

Lays out the icon, text and actions in a row or a column

Default: horizontal

className
string

Additional CSS classes for the banner

contentClassName
string

Additional CSS classes for the title and description wrapper

descriptionClassName
string

Additional CSS classes for the description