> ## 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.
# Banner
> A full-width promotional or informational banner in six variants, laid out vertically, horizontally or compactly, with optional actions and a dismiss control.
```tsx theme={null}
import { Banner } from "@fanvue/ui";
import type { BannerLayout, BannerProps, BannerVariant } from "@fanvue/ui";
```
## Examples
## Whats New Compact
```tsx theme={null}
import { ArrowRightIcon, Banner, Button } from "@fanvue/ui";
function BannerTertiaryTextAction({ label }: { label: string }) {
return (
}
>
{label}
);
}
Art
}
title="Perfectly proportioned"
description="Aspect ratio selection is here!"
textAction={}
/>
```
## Subtle Informational
```tsx theme={null}
import { ReactNode } from "react";
import { ArrowRightIcon, Badge, Banner, Button, WarningTriangleIcon } from "@fanvue/ui";
const sampleImg = (
);
function NewBadge() {
return (
new
);
}
function StatusChip({ children }: { children: ReactNode }) {
return (
}
>
{children}
);
}
}
title="Find out how OAuth works"
description="Learn more about how to make an app that works."
secondaryLine="For the next 7 days when you earn a milestone…"
stackedAction={}>
Account Health
}
statusRow={<>
2 warning2 media removed1 media in review
}
primaryAction={}
/>
```
## Default Vertical
```tsx theme={null}
import { Banner, Button } from "@fanvue/ui";
const sampleImg = (
);
Learn more}
/>
```
## Default Horizontal
```tsx theme={null}
import { Banner, Button } from "@fanvue/ui";
const sampleImg = (
);
Learn more}
/>
```
## Default Dismissible
```tsx theme={null}
import { useState } from "react";
import { Banner, Button } from "@fanvue/ui";
const sampleImg = (
);
function Example() {
const [open, setOpen] = useState(true);
return open ? (
Learn more}
onDismiss={() => setOpen(false)}
/>
) : (
);
}
```
## Props
## Banner
Figma `Type` — selects structure, surfaces, and app store gradient.
Primary body copy.
Accessible label for dismiss.
Small uppercase label (e.g. HOW TO).
Figma `Orientation`. Ignored when `variant` is `Subtle` (horizontal) or an app store type (vertical).
Top badge row (e.g. NEW pill) — mainly for `Subtle`.
Leading visual (image, illustration, or composite).
When set, shows a dismiss control (`Default` only).
Primary button (e.g. Learn more).
Extra line under description (`Subtle`).
Left-stacked pill action (`Subtle`).
Row under stacked action (`Subtle`).
Text-style CTA (`whatsNew` / app store).
Main heading.
## Exported types
Also exported from `@fanvue/ui`: `BannerLayout`, `BannerProps`, `BannerVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)