Banner

Banner is designed for high-visibility, page-level communication.

All Variants

<Banner variant="info" title="New Feature">Description here.</Banner>
<Banner variant="success" title="Deployment Complete">All services updated.</Banner>
<Banner variant="warning" title="Maintenance">Scheduled tonight.</Banner>
<Banner variant="danger" title="Outage">Service disruption detected.</Banner>

ℹ️

New Feature

Description here.

✅

Deployment Complete

All services updated.

⚠️

Maintenance

Scheduled tonight.

⛔

Outage

Service disruption detected.

Dismissible Example

<Banner variant="warning" title="Scheduled Maintenance" dismissible>
  Maintenance will occur on July 10th.
</Banner>

⚠️

Scheduled Maintenance

Maintenance will occur on July 10th.

Props

Prop	Type	Default	Description
variant	string	info	Visual style
title	string	—	Main heading
dismissible	boolean	false	Shows close button

Related Components

• Alert — Component-level urgent messages
• Callout — Documentation notes