> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# Banner
A full-width message pinned above the header, for something account- or system-wide. The test is whether it would still matter on another page: yes and it is a `Banner`, no and it is an `Alert`. There is no success variant — “it worked” is a `Toast` — and no `icon` prop either: the icon appears only when a `BannerIcon` is composed in.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Banner) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/messaging-banner--overview)
```tsx
import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';
import { Button } from '@wallarm-org/design-system/Button';
import { Megaphone } from '@wallarm-org/design-system/icons';
export const Default = ({
variant,
customIcon,
description,
inlineAction,
actions,
closable,
title,
text,
}) => (
: undefined}
/>
Action : undefined}>
{title}
{description && {text}}
{(actions || closable) && (
{actions && (
)}
{closable && }
)}
);
```
## Usage
```tsx
import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';
import { Button } from '@wallarm-org/design-system/Button';
import { Megaphone } from '@wallarm-org/design-system/icons';
```
## Examples
### All colors
`primary` (dark) and `secondary` (light) are the neutral bars and carry no icon of their own; destructive, info and warning each bring one.
```tsx
import { Banner, BannerContent, BannerIcon, BannerTitle } from '@wallarm-org/design-system/Banner';
export const AllColors = () => (
);
```
### With description
A description earns its place by adding the consequence — here the node version the feature needs — never by restating the title.
```tsx
import { Banner, BannerContent, BannerDescription, BannerIcon, BannerTitle } from '@wallarm-org/design-system/Banner';
export const WithDescription = () => (
Credential Stuffing Detection
Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher.
);
```
### With inline link
A `BannerLink` inside the title, for when the action belongs in the sentence. Use the inline link or the trailing buttons, never both.
```tsx
import { Banner, BannerContent, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';
export const WithInlineLink = () => (
Learn more}>
You have exceeded the monthly quota for your company
);
```
### Long text
Two lines is the ceiling, after which the text truncates into a tooltip. One line is what to aim for.
```tsx
import { Banner, BannerClose, BannerContent, BannerControls, BannerTitle } from '@wallarm-org/design-system/Banner';
export const LongText = () => (
Banner will render at most two lines before truncating the text. Banners address system-wide
conditions, not individual user actions. The voice should be institutional and factual, even
when the situation is urgent. Every word must earn its place within the 2-line budget, but
one line is more preferred.
);
```
### Custom icon
`BannerIcon`’s `icon` prop overrides the variant default, or gives `primary` and `secondary` the icon they otherwise lack — which is how an announcement gets its megaphone.
```tsx
import { Banner, BannerClose, BannerContent, BannerControls, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';
import { Megaphone } from '@wallarm-org/design-system/icons';
export const CustomIcon = () => (
} />
View plans}>
New features are now available on the Pro plan
);
```
### With actions
Trailing buttons in `BannerControls`, small and never solid, labelled with the verb that follows: “Renew”, not “Learn more”.
```tsx
import { Banner, BannerContent, BannerControls, BannerIcon, BannerTitle } from '@wallarm-org/design-system/Banner';
import { Button } from '@wallarm-org/design-system/Button';
export const WithActions = () => (
Your subscription has expired
);
```
### Closable
`BannerClose` where the reader may dismiss it. Leave it off while the condition still holds, since a banner is meant to outlast a page view.
```tsx
import { useState } from 'react';
import { Banner, BannerClose, BannerContent, BannerControls, BannerTitle } from '@wallarm-org/design-system/Banner';
import { Button } from '@wallarm-org/design-system/Button';
export const Closable = () => {
const [open, setOpen] = useState(true);
if (!open) {
return (