Skip to main content
Design system

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.28 kB
Install: 
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage: 
import { AlertBanner } from "@washingtonpost/wpds-ui-kit"
|Copy
Source: View on Github

Table of Contents

Anatomy

Note: Image is not to scale

  1. Icon - Semantic only
  2. Text
  3. App bar
  4. Button icon

Options

Variants

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

Shadow

Enable shadow by passing shadow property.

Dismissable

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

Behavior

Text overflow

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

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.

API Reference

Edit this page on GitHub.