WPDS - Alert Banner | Components

Alert Banner

Alert banners notify the user of important messages, such as system alerts. They're meant to encourage the user to take an action.

Bundle size: 3.09 kB

Install:

npm install @washingtonpost/wpds-ui-kit|Copy

Usage:

import { AlertBanner } from "@washingtonpost/wpds-ui-kit"|Copy

Storybook: View on Storybook

Source: View on Github

Anatomy

Note: Image is not to scale

Icon - Semantic only
Text
App bar
Button icon

Options

Variants

There are four variants warning, information, success, and error.


Open in Playroom

Shadow

Enable shadow by passing shadow property.


Open in Playroom

Dismissable

To allow the Alert Banner to be dismissed pass the dismissable property and add <AlertBanner.Trigger/>.


Open in Playroom

Behavior

Text overflow

When the text overflows it will wrap and resize the AlertBanner.


Open in Playroom

Guidance

When to use shadows

Apply the property shadow when overlaying content.

Semantic messaging only

The alert banner is strictly for semantic messaging around system status. This means the use of including marketing or other messaging diminishes the effectiveness of semantic messaging.