Skip to content
ZikZuk UI

Banner

Stripe Banner

What happened or what to know, and what to do about it: info, warning, critical or success, in a light fill and border of the tone — no stripe down the side. Critical banners are announced to screen readers. A server's reason for a failure belongs here, where the action happened, not in a toast.

pnpm add @zikzuk/ui
import { Banner } from "@zikzuk/ui";

When to use

  • A notice on Home (“10 KYC cases are still in progress”).
  • A prerequisite, shown before anyone fills in the form.
  • A failed load, with Try again.

Not for

  • A passing confirmation — that is a toast.

Props

PropTypeDescription
tone"info" | "warning" | "critical" | "success"
Default "info"
Critical uses role="alert".
titleReactNodeThe message.
childrenReactNodeDetail under the title.
actionReactNodeA button or link: what to do about it.
onDismiss() => voidAdds a ✕.
classNamestringExtra classes on the outer element.