#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 · Storybook

#Usage

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.

#With description

A description earns its place by adding the consequence — here the node version the feature needs — never by restating the title.

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

#Long text

Two lines is the ceiling, after which the text truncates into a tooltip. One line is what to aim for.

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

#With actions

Trailing buttons in BannerControls, small and never solid, labelled with the verb that follows: “Renew”, not “Learn more”.

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

#Props

#BannerClose

#BannerContent

#BannerControls

#BannerDescription

#BannerIcon

#BannerLink

#BannerTitle

#Explorer