Alert

Alerts show high-signal messages meant to be noticed and prompting users to take action.

React

released

Vue

released

Elements

released

Android

released

iOS

released

Example

Example theme:

DBA lightFinn lightTori light

Usage

Design Guidelines

See Figma: Warp - Components / Alert

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

You can import the component like so:

import { Alert } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Alert } from '@warp-ds/react/components/alert';

Syntax

<Alert type="info" show>
  This is "info" variant of the alert element
</Alert>

Accessibility

Use the ARIA live region role attribute to provide meaning to the alert element (defaults to "alert"). If you want to remove the role from the alert and assign it to its particular child (e.g. title), you can do so by setting role property of the Alert component to an empty string and assigning a respective role attribute on the child element. Read more about live region role attribute on MDN.

Alert with "alert" role on a descendant element

<Alert type="info" show={show} role="">
  <h3 role="alert" className="t5">
    This is "info" variant of the alert element
  </h3>
  <p>With an additional description</p>
</Alert>

Props

Required props

name	type	default	notes
type	'negative' | 'positive' | 'warning' | 'info'	undefined	Type of Alert

Optional Props

name	type	default	notes
show	boolean	undefined	Controls when the alert shows
role	string	alert	ARIA live region "role" attribute value
className	string	undefined	Additional classes to include
style	string	undefined	Additional CSS styles for the container