Components

Banner

Banners communicate prominent messages, such as system status, errors, or important information.

Stable

Anatomy

import {Banner} from '@staffbase/design';

<Banner>
  <Banner.CloseButton />
</Banner>

Examples

Variants

Sizes

Layouts

API reference

Banner

Name	Type	Description
`children`	`ReactNode`	The content of the Banner.
`variant`	`infosuccesswarningcritical`	Defines the semantics / use case of Banner. Default: `info`
`size`	`smmd`	Changes the size of the Banner. Default: `sm`
`layout`	`standalonebleed`	Changes the style of the banner. Default: `standalone`

Close Button

Name	Type	Description
`aria-label`	`string`	Accessible label describing the close action for screen readers.

Accessibility

As notification

If you’re using the banner as a notification to tell the user about the outcome of something they’ve just done, add role="alert" to the component so focus shifts to the notification banner.

Semantic HTML

If you’re putting multiple elements inside the banner, use semantic HTML — for example h2 for the heading, p for the content, and button or a for the CTA.