Banner

Top-of-screen announcement bar with four gradient tones and an action that morphs the bar into a confirmation pill.

Installation

npx shadcn@latest add @iconiq/banner

File Structure

Usage

import { Banner } from "@/components/ui/banner";

export function Example() {
  return (
    <Banner actionHref="/changelog" actionLabel="Learn more">
      Important message
    </Banner>
  );
}

Props

Props
Description

Banner

children

Announcement message, left-aligned next to the icon. Inline links and bold spans are fine.

Type ReactNode

variant

Visual tone of the gradient surface. Default is an inverted near-black bar that flips to white in dark mode; info sweeps sky to indigo, success emerald to teal, and error rose to red — all with white text and a looping light sheen.

Type "default" | "info" | "success" | "error"·Default "default"

icon

Icon rendered inside the leading ring. Each variant ships a matching default — alert circle, info, check circle, octagon — and passing null hides the ring entirely.

Type ReactNode

actionLabel

Label for the outlined action button on the right end. Omit to render a banner with no action.

Type string

actionHref

Renders the action as a link and appends a small arrow that nudges right on hover. Omit to render a plain button driven by onAction.

Type string

onAction

Called when the action is clicked.

Type () => void

morphMessage

Enables the fluid morph: after the action is clicked, the full-width bar shrinks and rounds into a centered confirmation pill showing this message, then dismisses itself.

Type string

morphIcon

Icon inside the confirmation pill. Defaults to a bold check.

Type ReactNode

morphDuration

How long the confirmation pill stays on screen before the banner dismisses itself, in milliseconds. Pass 0 to keep the pill until the user or parent closes it.

Type number·Default 2400

dismissible

Show the dismiss button on the right edge. Dismissing collapses the banner's height so content below slides up smoothly.

Type boolean·Default true

onDismiss

Called when the banner dismisses — via the X button or automatically after a morph completes.

Type () => void

open

Controlled visibility. The banner animates out when this turns false; omit to let the banner manage its own visibility.

Type boolean

fixed

Pin the banner to the top of the viewport with a fixed position instead of rendering in document flow.

Type boolean·Default false

className

Extra classes for the positioning wrapper.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Important messageLearn more