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

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

PropTypeDefaultRequired
position
enum
fixed | absolute | relative | sticky
----False
shadow
enum
boolean | true
----False
variant
enum
error | success | warning | information
information as AlertBannerVariants[variant] False
dismissable
enum
boolean | false
true as AlertBannerVariants[dismissable] False