Examples
Without Title
Trailing Cta
Without Cta
Under Cta
Account Suspended
Props
CriticalBanner
A full-width, high-priority banner reserved for situations that block or significantly impact a user’s ability to use the platform — account suspensions, blocking payment failures, identity verification requirements, or critical security notices. It sits at the very top of a page and is intentionally disruptive, so use it sparingly; for non-blocking messaging useAlert or Banner instead.
Renders with role="alert" so assistive technology conveys its urgency; override role for a less assertive treatment when appropriate.
ReactNode
required
Body copy describing the blocking situation.
ReactNode
Custom action node rendered in place of the built-in call-to-action button.
ReactNode
Label for the built-in white call-to-action button. Ignored when
action is set.Omit<ButtonProps, "children" | "asChild" | "size" | "variant">
Props forwarded to the built-in call-to-action button (e.g.
onClick). asChild is intentionally excluded — the built-in CTA renders ctaLabel as text; for a link or fully custom element use the action prop instead.ReactNode
Leading icon. Overrides the default filled warning icon.
"trailing" | "under"
default:"trailing"
Placement of the call-to-action relative to the message.
ReactNode
Optional bold heading shown above the body copy.
Exported types
Also exported from@fanvue/ui: CriticalBannerLayout, CriticalBannerProps.
Setup: Installation · Theming