> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```tsx theme={null}
import { CriticalBanner } from "@fanvue/ui";
import type { CriticalBannerLayout, CriticalBannerProps } from "@fanvue/ui";
```

## Examples

## Without Title

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-criticalbanner--without-title&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CriticalBanner — Without Title" />
</Frame>

```tsx theme={null}
import { CriticalBanner } from "@fanvue/ui";

<CriticalBanner ctaLabel="CTA" layout="trailing">This is the body text for info in-app alert, longer text for the reference</CriticalBanner>
```

## Trailing Cta

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-criticalbanner--trailing-cta&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CriticalBanner — Trailing Cta" />
</Frame>

```tsx theme={null}
import { CriticalBanner } from "@fanvue/ui";

<CriticalBanner title="Alert title" ctaLabel="CTA" layout="trailing">This is the body text for info in-app alert, longer text for the reference</CriticalBanner>
```

## Without Cta

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-criticalbanner--without-cta&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CriticalBanner — Without Cta" />
</Frame>

```tsx theme={null}
import { CriticalBanner } from "@fanvue/ui";

<CriticalBanner title="Alert title" layout="trailing">This is the body text for info in-app alert, longer text for the reference</CriticalBanner>
```

## Under Cta

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-criticalbanner--under-cta&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CriticalBanner — Under Cta" />
</Frame>

```tsx theme={null}
import { CriticalBanner } from "@fanvue/ui";

<CriticalBanner title="Alert title" ctaLabel="CTA" layout="under">This is the body text for info in-app alert, longer text for the reference</CriticalBanner>
```

## Account Suspended

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-criticalbanner--account-suspended&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CriticalBanner — Account Suspended" />
</Frame>

```tsx theme={null}
import { CriticalBanner } from "@fanvue/ui";

<CriticalBanner
  title="Your account has been suspended"
  ctaLabel="Contact support"
  layout="trailing"
>
  We detected activity that violates our terms of service. Contact support to resolve this before you can continue.
</CriticalBanner>
```

## 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 use `Alert` or `Banner` instead.

Renders with `role="alert"` so assistive technology conveys its urgency; override `role` for a less assertive treatment when appropriate.

<ParamField path="children" type="ReactNode" required>
  Body copy describing the blocking situation.
</ParamField>

<ParamField path="action" type="ReactNode">
  Custom action node rendered in place of the built-in call-to-action button.
</ParamField>

<ParamField path="ctaLabel" type="ReactNode">
  Label for the built-in white call-to-action button. Ignored when `action` is set.
</ParamField>

<ParamField path="ctaProps" type="Omit<ButtonProps, &#x22;children&#x22; | &#x22;asChild&#x22; | &#x22;size&#x22; | &#x22;variant&#x22;>">
  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.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Leading icon. Overrides the default filled warning icon.
</ParamField>

<ParamField path="layout" type="&#x22;trailing&#x22; | &#x22;under&#x22;" default="trailing">
  Placement of the call-to-action relative to the message.
</ParamField>

<ParamField path="title" type="ReactNode">
  Optional bold heading shown above the body copy.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `CriticalBannerLayout`, `CriticalBannerProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)