Banner

PreviousNext

A horizontal notification that appears at the top of the page to communicate important messages or actions to users.

Component banner-demo not found in registry.

Installation

pnpm dlx shadcn@latest add banner

Usage

import { AlertTriangle, X } from "lucide-react"
 
import * as Banner from "@/registry/radix-ui/ui/banner"
 
export default function BannerExample() {
  return (
    <Banner.Root>
      <Banner.Content>
        <Banner.Icon>
          <AlertTriangle />
        </Banner.Icon>
        <span className="text-sm font-medium">
          Insert your alert title here!
        </span>
        <span>∙</span>
        <span className="text-sm">Insert your description here.</span>
      </Banner.Content>
      <Banner.CloseButton>
        <X className="size-5" />
      </Banner.CloseButton>
    </Banner.Root>
  )
}

Features

  • Multiple variants: Filled, light, muted, and outlined styles
  • Status types: Error, warning, success, information, and feature banners
  • Icon support: Optional icons for visual context
  • Dismissible: Optional close button functionality
  • Flexible content: Support for complex layouts and actions
  • Responsive: Adapts to different screen sizes
  • Accessible: Proper ARIA attributes and semantic structure

Variants

Visual Variants

Component banner-variants not found in registry.

Status Types

Error

Component banner-error not found in registry.

Warning

Component banner-warning not found in registry.

Success

Component banner-success not found in registry.

Information

Component banner-information not found in registry.

API Reference

Banner.Root

The root banner container.

PropTypeDefaultDescription
variant"filled" | "light" | "muted" | "outlined""filled"Visual style variant
status"error" | "warning" | "success" | "information" | "feature""feature"Status type for colors
classNamestringundefinedAdditional CSS classes

Banner.Content

Container for the banner content with proper centering and spacing.

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS classes

Banner.Icon

Icon component with proper sizing and coloring.

PropTypeDefaultDescription
asElementType"div"Component to render
classNamestringundefinedAdditional CSS classes

Banner.CloseButton

Dismissible close button with proper styling.

PropTypeDefaultDescription
asChildbooleanfalseUse child as button element
classNamestringundefinedAdditional CSS classes

Examples

Basic Banner

<Banner.Root>
  <Banner.Content>
    <span>This is a basic banner message.</span>
  </Banner.Content>
</Banner.Root>

With Icon and Action

<Banner.Root variant="light" status="information">
  <Banner.Content>
    <Banner.Icon>
      <Info />
    </Banner.Icon>
    <span className="text-sm font-medium">New feature available!</span>
    <span>∙</span>
    <span className="text-sm">Check out our latest updates.</span>
    <Button variant="ghost" size="sm">
      Learn More
    </Button>
  </Banner.Content>
  <Banner.CloseButton>
    <X className="size-5" />
  </Banner.CloseButton>
</Banner.Root>

Dismissible Banner

<Banner.Root variant="filled" status="warning">
  <Banner.Content>
    <Banner.Icon>
      <AlertTriangle />
    </Banner.Icon>
    <span className="text-sm font-medium">Maintenance scheduled</span>
    <span>∙</span>
    <span className="text-sm">Service will be down from 2-4 AM UTC.</span>
  </Banner.Content>
  <Banner.CloseButton>
    <X className="size-5" />
  </Banner.CloseButton>
</Banner.Root>

Best Practices

  • Use banners sparingly to avoid overwhelming users with notifications
  • Choose appropriate status types and variants based on message importance
  • Keep banner messages concise and actionable
  • Provide a close button for dismissible banners
  • Test banner appearance across different screen sizes
  • Ensure sufficient color contrast for accessibility