Alert - Frameworks

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedReact 19releasedVuereleased

React 19

AndroidElementsiOSReactReact 19Vue

Import

You can import the component like so:

import { Alert } from '@warp-ds/components/react/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	Description
type	'negative' | 'positive' | 'warning' | 'info'	undefined	Type of Alert
children	React.ReactNode	undefined	Content to render inside the alert

Optional Props

Name	Type	Default	Description
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	React.CSSProperties	undefined	Additional CSS styles for the container
id	string	undefined	Used to uniquely identify the alert — for ARIA attributes or other DOM interactions

Questions?

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