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.39 kB
Install: 
npm install @washingtonpost/wpds-alert-banner
|Copy
Usage: 
import { AlertBanner } from "@washingtonpost/wpds-alert-banner"
|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

PropDescriptionTypeDefaultRequired
position
enum
fixed | absolute | relative | sticky
----False
shadow
enum
boolean | true
----False
variant4 predefined alert banners each tied to our symantic messaging on our site. They are Warning, Information, Success, and Error.
enum
error | success | warning | information
information as AlertBannerVariants[variant] False
dismissableThe alert banner can be permanent or dismissable.
enum
boolean | false
true as AlertBannerVariants[dismissable] False
Edit this page on GitHub.