Alert - Elements

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedReact 19releasedVuereleased

Elements

AndroidElementsiOSReactReact 19Vue

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Variants

Info

<w-alert variant="info" show>
  <p>This is "info" variant of the alert element</p>
</w-alert>

Warning

<w-alert variant="warning" role="alert" show="">
  <p>This is an alert message</p>
</w-alert>

Negative

<w-alert variant="negative" role="alert" show="">
  <p>This is an alert message</p>
</w-alert>

Positive

<w-alert variant="positive" role="alert" show="">
  <p>This is an alert message</p>
</w-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

<w-alert variant="info" show role="">
  <h3 role="alert" class="t5">
    This is "info" variant of the alert element
  </h3>
  <p>With an additional description</p>
</w-alert>

Props

Required props

Name	Type	Default	Description
variant	'negative' | 'positive' | 'warning' | 'info'	undefined	Variant of the alert

Optional Props

Name	Type	Default	Description
show	boolean	false	Controls when the alert shows
role	string	alert	ARIA live region "role" attribute value

Questions?

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