Banner

Feedback

Layout

Full-width notification bars for announcements, promotions, and important messages. Can be fixed to top or bottom of the viewport.

Preview

Interactive banner examples

Variants

All available banner styles

With Actions

Banners with action buttons

Dismissible Banners

Banners that can be closed

Centered Content

Banners with centered text

Without Icon

Simplified banners without icons

Fixed Position

Position banners at top or bottom of viewport

Use the position prop to fix banners to the viewport:

position="top" - Fixed to top of viewport
position="bottom" - Fixed to bottom of viewport
position="inline" - Default inline flow (shown above)

Props

Banner component API reference

Prop	Type	Default	Description
`variant`	`'default' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'announcement' \| 'promo' \| 'ai' \| 'ai-edited'`	`'default'`	Visual style variant for the banner
`position`	`'top' \| 'bottom' \| 'inline'`	`'inline'`	Position of the banner - fixed to viewport or inline
`icon`	`React.ComponentType`	—	Custom icon component to override the default variant icon
`hideIcon`	`boolean`	`false`	Hide the icon
`onDismiss`	`() => void`	—	Callback when the dismiss button is clicked. If provided, shows a dismiss button.
`action`	`{ label: string; onClick: () => void }`	—	Optional action button configuration
`centered`	`boolean`	`false`	Center the content
`className`	`string`	—	Additional CSS classes for custom styling

Usage

Import and implementation example

import { Banner } from '@/components/ui/banner'

export default function Example() {
  const [showBanner, setShowBanner] = useState(true)

  return showBanner ? (
    <Banner
      variant="announcement"
      position="top"
      onDismiss={() => setShowBanner(false)}
      action={{ label: 'Learn More', onClick: () => {} }}
    >
      New feature available! Check out our updated documentation.
    </Banner>
  ) : null
}

Features

Built-in functionality

9 variants: Default, info, success, warning, error, announcement, promo, ai, and ai-edited styles
Fixed positioning: Pin banners to top or bottom of viewport
Action button: Optional CTA button with custom label and handler
Dismissible: Optional close button with onDismiss callback
Gradient support: Promo variant features eye-catching gradient
Centered option: Center content for focused messaging
Dark mode: Full dark mode support with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="banner"aria-live="polite"aria-label (on close button)

Keyboard Navigation

Key	Action
`Tab`	Move focus between action and dismiss buttons
`Enter / Space`	Activate focused button

Notes

Uses aria-live="polite" to announce to screen readers without interruption
Action and dismiss buttons are keyboard accessible
High contrast text on all color variants
Focus indicators visible on interactive elements

Related Components

Alert Callout Toast Announcement Ticker