Banner

Updated: May 5, 2025

A simple component for displaying important announcements, notifications, or status messages in a prominent horizontal bar. Commonly used to draw attention to critical information or updates.

Banner

Free shipping on orders over $50

<Banner>
  Free shipping on orders over $50
</Banner>

With icons

Add icons to enhance visual communication.

Banner with icon

Claim your free credits.

<Banner radius="s">
  <Icon name="check" size="s" />
  Claim your free credits.
</Banner>

<Row fillWidth padding="8">
  <Background height="64" fillWidth radius="m" border="neutral-alpha-medium" lines={{display: true, angle: -45, color: "neutral-alpha-weak", size: "8", thickness: 1}}/>
</Row>

Custom styling

Customize the appearance of banners using Flex props.

Custom styled banners

Operation completed successfully.

Please review your information before proceeding.

Critical error detected in the system.

<Banner solid="success-medium" onSolid="success-strong">
  <Icon name="check" size="s" />
  Operation completed successfully.
</Banner>

<Banner solid="warning-medium" onSolid="warning-strong">
  <Icon name="warning" size="s" />
  Please review your information before proceeding.
</Banner>

<Banner solid="danger-medium" onSolid="danger-strong">
  <Icon name="alert" size="s" />
  Critical error detected in the system.
</Banner>

With actions

Add interactive elements to banners.

Banner with actions

Accept our privacy policy to continue.

Decline

Accept

<Banner horizontal="between">
  Accept our privacy policy to continue.
  <Row gap="8">
    <Button size="s">Decline</Button>
    <Button size="s" variant="secondary">Accept</Button>
  </Row>
</Banner>

API reference

Prop	Type	Default
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

ComponentsBadge

ComponentsBlockQuote

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club