Banner

A full-width page-level notification bar placed at the top of a page or section to communicate important information.

Import

tsx

import { Banner } from '@tac-ui/web';

Playground

Interactively configure the Banner props below.

System notificationThis is a banner with the selected configuration.

Variant

Dismissible

tsx

<Banner
  variant="default"
  title="System notification"
  description="This is a banner with the selected configuration."
/>

Default

The default variant uses the info color tokens and is suitable for general informational banners.

New feature availableTry the updated dashboard experience in your settings.

tsx

<Banner
  title="New feature available"
  description="Try the updated dashboard experience in your settings."
/>

Variants

Four semantic variants communicate the nature of the notification. Each applies matching background and border colors from the design token system.

InfoA new software update is available.

SuccessYour account has been verified.

WarningYour free trial expires in 3 days.

ErrorService disruption detected in your region.

tsx

<Banner variant="default" title="Info" description="A new software update is available." />
<Banner variant="success" title="Success" description="Your account has been verified." />
<Banner variant="warning" title="Warning" description="Your free trial expires in 3 days." />
<Banner variant="error" title="Error" description="Service disruption detected in your region." />

With Icon

Pass any React node to the icon prop to display a contextual icon on the left. The icon color is automatically matched to the variant.

Maintenance windowScheduled maintenance on Sunday from 2–4 AM UTC.

Deployment completeVersion 2.4.1 is now live.

Storage limit approachingYou have used 90% of your storage quota.

Payment failedPlease update your payment method to continue.

tsx

<Banner variant="default" icon={<Info />} title="Maintenance window" description="Scheduled maintenance on Sunday from 2–4 AM UTC." />
<Banner variant="success" icon={<CheckCircle />} title="Deployment complete" description="Version 2.4.1 is now live." />
<Banner variant="warning" icon={<AlertTriangle />} title="Storage limit approaching" description="You have used 90% of your storage quota." />
<Banner variant="error" icon={<XCircle />} title="Payment failed" description="Please update your payment method to continue." />

Dismissible

Set dismissible to show a close button. When clicked, the banner animates out and the optional onDismiss callback is fired.

Trial ending soonYour free trial ends in 2 days. Upgrade to keep access.

Cookie preferencesWe use cookies to improve your experience.

tsx

<Banner
  variant="warning"
  icon={<AlertTriangle />}
  title="Trial ending soon"
  description="Your free trial ends in 2 days. Upgrade to keep access."
  dismissible
  onDismiss={() => console.log('dismissed')}
/>
<Banner
  variant="default"
  icon={<Info />}
  title="Cookie preferences"
  description="We use cookies to improve your experience."
  dismissible
/>

Banner vs Alert

Banner and Alert serve different layout purposes. Use Banner for page-level or section-level notifications that span the full width — such as maintenance notices, trial expirations, or global system status. Banner uses a bottom border only and has no border radius, making it flush to the container edge.

Use Alert for inline content-level feedback within a form, card, or content area. Alert has a rounded border on all sides and is sized to its content. Both components share the same semantic variants and dismiss behavior.

API Reference

Banner props:

Prop	Type	Default	Description
variant	"default" \| "warning" \| "error" \| "success"	"default"	Visual style variant of the banner.
title	string	-	Optional title displayed in bold.
description	string	-	Optional description text shown below the title.
icon	React.ReactNode	-	Optional icon displayed to the left. Icon color is matched to the variant.
dismissible	boolean	false	When true, shows a close button that animates the banner out when clicked.
onDismiss	() => void	-	Called when the dismiss button is clicked, after the animation starts.
className	string	-	Additional CSS class names.
children	React.ReactNode	-	Optional custom content rendered inside the banner body.