Alert
Alerts show high-signal messages meant to be noticed and prompting users to take action.
Example
Usage
Design Guidelines
See Figma: Warp - Components / Alert
Framework(s)
📣 Beta
New and ready to use. Feel free to start using it and let us know if you run into any issues.
If you encounter bugs or other issues, please report it to the WARP team: #warp-design-system.
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 | notes |
|---|---|---|---|
type | 'negative' | 'positive' | 'warning' | 'info' | undefined | Type of Alert |
children | React.ReactNode | undefined | Content to render inside the 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 | 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