Skip to main content

​
Banner

A prominent message displayed at the top of a page or section.

​
Anatomy

<Banner.Root tone="info">
  <Banner.Icon />
  <Banner.Content>
    <Banner.Title>Title</Banner.Title>
    <Banner.Actions>
      <Banner.Action>Action</Banner.Action>
      <Banner.Close />
    </Banner.Actions>
  </Banner.Content>
</Banner.Root>

​
Components

The root container for the banner.
​
tone
string
default:"neutral"
Visual tone that determines the background and border color. Options: neutral, info, success, warning, danger
​
icon
ReactNode
Custom icon element. If not provided, displays a tone-appropriate icon.
​
className
string
Additional CSS classes
Icon that indicates the tone of the banner.
​
tone
string
Override the tone from context. Options: neutral, info, success, warning, danger
​
className
string
Additional CSS classes
Container that groups the title and actions.
​
className
string
Additional CSS classes
The main message text of the banner.
​
className
string
Additional CSS classes
Container for action buttons and close button.
​
className
string
Additional CSS classes
Action button (tertiary variant, xs size).
​
variant
string
default:"tertiary"
Button variant (inherited from Button component)
​
size
string
default:"xs"
Button size (inherited from Button component)
​
className
string
Additional CSS classes
Button to dismiss the banner.
​
onClose
() => void
Callback when close button is clicked
​
className
string
Additional CSS classes

​
Tones

​
neutral

Default informational tone with neutral colors.

​
info

Informational feedback (blue background and border).

​
success

Success feedback (green background and border).

​
warning

Warning feedback (yellow/orange background and border).

​
danger

Error or critical feedback (red background and border).

Build docs developers (and LLMs) love

Get started for freeTalk to us