Banner

A full-width notification strip for page-level announcements.

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Default() {
6  return (
7    <Banner>
8      <Banner.Content>
9        <Banner.Title>New feature available</Banner.Title>
10        <Banner.Description>Check out the latest updates we just shipped.</Banner.Description>
11      </Banner.Content>
12      <Banner.Action href="#changelog">Learn more</Banner.Action>
13    </Banner>
14  );
15}

Installation

pnpm dlx mateui add banner

Anatomy

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

1<Banner variant="info">
2  <Banner.Content>
3    <Banner.Title>Announcement</Banner.Title>
4    <Banner.Description>Something important happened.</Banner.Description>
5  </Banner.Content>
6  <Banner.Action href="/changelog">Learn more</Banner.Action>
7</Banner>

Variants

info

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Info() {
6  return (
7    <Banner variant="info">
8      <Banner.Content>
9        <Banner.Title>Info</Banner.Title>
10        <Banner.Description>This is an informational banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

warning

Warning

This is a warning banner.

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Warning() {
6  return (
7    <Banner variant="warning">
8      <Banner.Content>
9        <Banner.Title>Warning</Banner.Title>
10        <Banner.Description>This is a warning banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

danger

Danger

This is a danger banner.

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Danger() {
6  return (
7    <Banner variant="danger">
8      <Banner.Content>
9        <Banner.Title>Danger</Banner.Title>
10        <Banner.Description>This is a danger banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

success

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Success() {
6  return (
7    <Banner variant="success">
8      <Banner.Content>
9        <Banner.Title>Success</Banner.Title>
10        <Banner.Description>This is a success banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

Dismissible

1'use client';
2
3import { useState } from 'react';
4import { Banner } from '@/components/ui/banner';
5
6export function Dismissible() {
7  const [key, setKey] = useState(0);
8
9  return (
10    <div className="flex w-full flex-col gap-3">
11      <Banner key={key} variant="info" onClose={() => {}}>
12        <Banner.Content>
13          <Banner.Title>Dismissible banner</Banner.Title>
14          <Banner.Description>Click the close button to dismiss this banner.</Banner.Description>
15        </Banner.Content>
16      </Banner>
17      <button
18        type="button"
19        onClick={() => setKey((k) => k + 1)}
20        className="text-muted-foreground hover:text-foreground w-fit text-sm underline transition-colors"
21      >
22        Reset banner
23      </button>
24    </div>
25  );
26}

API Reference

Banner

Prop	Type	Default	Description
`variant`	`"default"` \| `"info"` \| `"warning"` \| `"danger"` \| `"success"`	`"default"`	Controls the visual treatment and surface colors.
`icon`	`React.ReactNode`	—	Optional custom icon overriding the variant icon.
`onClose`	`() => void`	—	Callback fired when the banner is dismissed.
`sticky`	`boolean`	`false`	Sticks the banner to the top of the viewport.
`className`	`string`	—	Additional CSS class names.
`children`	`React.ReactNode`	—	Compose the banner with Content, Title, and Action.

Banner.Content

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Wraps Title and Description.
`className`	`string`	—	Additional CSS class names.

Banner.Title

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Heading text for the banner.
`className`	`string`	—	Additional CSS class names.

Banner.Description

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Supporting text for the banner.
`className`	`string`	—	Additional CSS class names.

Banner.Action

Prop	Type	Default	Description
`href`	`string`	—	Link destination.
`children`	`React.ReactNode`	—	Action label text.
`className`	`string`	—	Additional CSS class names.

PreviousBadge NextBreadcrumb