Banner

Banners are full-width notification bars that appear at the top of a page to display important messages, announcements, or calls to action. They support multiple color variants and can include action buttons.

Basic Usage

import { Banner } from '@/components'

<Banner>This is an announcement</Banner>

This is a banner notification

Colors

Banners come in 7 color variants to convey different types of messages.

Grey banner notification

Green banner notification

Blue banner notification

Red banner notification

Orange banner notification

Pink banner notification

Black banner notification

Grey (Default)

Neutral announcements and general information.

<Banner color="grey">This is a banner notification</Banner>

Green

Success messages and positive announcements.

<Banner color="green">Your changes have been saved successfully</Banner>

Blue

Informational messages and feature announcements.

<Banner color="blue">New feature: Check out our redesigned dashboard</Banner>

Red

Error messages and critical alerts.

<Banner color="red">Service disruption: Some features may be unavailable</Banner>

Orange

Warning messages and important notices.

<Banner color="orange">Scheduled maintenance on Sunday at 2:00 AM</Banner>

Pink

Promotional content and special highlights.

<Banner color="pink">Limited time offer: 50% off all plans</Banner>

Black

High-contrast announcements and premium features.

<Banner color="black">Upgrade to Pro for unlimited access</Banner>

Layout Variants

Spaced (Default)

Content is distributed with space between - message on the left, action on the right.

New feature available

<Banner variant="spaced" action={{ label: 'Learn more', onClick: handleClick }}>
  New feature available
</Banner>

Center

Content is centered together - ideal for announcements with or without actions.

Welcome to the new SF Tensor Design System

Your account is ready

<Banner variant="center" color="blue">
  Welcome to the new SF Tensor Design System
</Banner>

<Banner variant="center" action={{ label: 'Get started', onClick: handleClick }}>
  Your account is ready
</Banner>

With Action Button

Add a call-to-action button to drive user engagement.

New dashboard feature is live

Your report is ready

Black Friday sale: 40% off everything

<Banner
  color="blue"
  action={{
    label: 'Try it now',
    onClick: () => console.log('Action clicked')
  }}
>
  New dashboard feature is live
</Banner>

Dismissible Banners

Add a close button to allow users to dismiss the banner.

This banner can be dismissed

Click the X to close this banner

Both action and close button

const [visible, setVisible] = useState(true)

{visible && (
  <Banner onClose={() => setVisible(false)}>
    This banner can be dismissed
  </Banner>
)}

Custom Icons

Override the default info icon with a custom icon.

Task completed successfully

import { CheckCircleSolid } from 'iconoir-react'

<Banner icon={<CheckCircleSolid className="size-6" />} color="green">
  Task completed successfully
</Banner>

All Color Variants with Actions

Grey banner with action

Green banner with action

Blue banner with action

Red banner with action

Orange banner with action

Pink banner with action

Black banner with action

API Reference

Banner Props

Prop	Type	Default	Description
color	`"grey"` \| `"green"` \| `"blue"` \| `"red"` \| `"orange"` \| `"pink"` \| `"black"`	`"grey"`	Background color variant
variant	`"spaced"` \| `"center"`	`"spaced"`	Layout alignment
icon	`ReactNode`	`<InfoCircle />`	Custom icon to display
action	`{ label: string, onClick: () => void }`	-	Action button configuration
onClose	`() => void`	-	Close button callback (shows close button when provided)
children	`ReactNode`	-	Banner message content
className	`string`	-	Additional CSS classes

BannerAction Type

interface BannerAction {
  label: string
  onClick: () => void
}