ACTIONS & SURFACES

Banner

Inline notification surface. Four tone variants (info, success, warning, danger), an optional title, an optional dismiss button, and an icon slot that defaults to a tone-aware glyph but accepts any ReactNode.

Import

import { Banner } from 'damo-ui'

Variants

Heads up
Your trial ends in 7 days. Upgrade to keep your projects.
Saved
Settings have been updated.
Quota at 90%
You’ll hit the storage cap by Friday.
1<Banner variant="info" title="Heads up">
2  Your trial ends in 7 days. Upgrade to keep your projects.
3</Banner>
4<Banner variant="success" title="Saved">
5  Settings have been updated.
6</Banner>
7<Banner variant="warning" title="Quota at 90%">
8  You'll hit the storage cap by Friday.
9</Banner>
10<Banner variant="danger" title="Action required">
11  Payment failed — update your card.
12</Banner>

Dismissible

Pass dismissible to add a close affordance. The banner clears its local state on click; pair with onDismiss to persist the dismissal (e.g. save to localStorage so it doesn't come back).

1<Banner
2  variant="info"
3  title="Privacy update"
4  dismissible
5  onDismiss={() => trackBannerDismissed('privacy')}
6>
7  We've updated our privacy policy. Read what changed.
8</Banner>

No icon

Drop the leading icon when the banner is purely text-driven.

Saved
Use icon={false} to drop the leading icon entirely.
1<Banner variant="success" icon={false} title="Saved">
2  Use icon={false} to drop the leading icon entirely.
3</Banner>

Props

Banner props
PropTypeDefaultDescription
variant'info' | 'success' | 'warning' | 'danger''info'Sets the background tint, the Memphis shadow color, and the default leading icon. danger also switches the wrapper role to alert for screen readers.
titleReactNode—Optional bold heading rendered before the body.
iconReactNode | false—Override the variant default icon. Pass false to drop the icon entirely; pass any ReactNode to substitute a custom glyph.
dismissiblebooleanfalseWhen true, renders an X button on the trailing edge that hides the banner from local state.
onDismiss() => void—Fires when the user clicks the dismiss button. Use it to persist the dismissal.
dismissLabelstring'Chiudi'Aria label for the dismiss button.
childrenReactNode—Body content rendered below the title.

Accessibility

  • The wrapper renders role="status" for info, success and warning; role="alert" for danger.
  • Live-region note: alert and status only fire announcements when the banner is inserted into an already-mounted DOM. A banner present in the initial server render is read in document order, not as an interrupt — mount it dynamically (after a network response, after dismissing a modal, etc.) when you need the announcement.
  • Icons are aria-hidden — the title and body carry the message.
  • The dismiss button gets aria-label from dismissLabel (defaults to "Chiudi").
← DrawerInput →