Warp Design System

Appearance

Alert - Elements ​

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedReact 19releasedVuereleased

Accessibility ​

For accessibility reasons, an alert should appear close to the element that triggered it.

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.

html
<w-alert variant="info" show role="">
  <h3 role="alert" class="t5">This is an alert styled as an information box</h3>
  <p>In this example only the title has the role of alert. All alerts can have a description.</p>
</w-alert>

Read more about live region role attribute on MDN.

Usage ​

Alert is an inline component used for displaying different types of messages.

Use alerts for contextual feedback that appears close to the related UI element or action.

Basic Alert ​

html
<w-alert show>
  We have updated your preferences.
</w-alert>

Variants ​

Choose a variant that matches message severity:

  • info: neutral information
  • positive: confirmation/success
  • warning: caution
  • negative: errors or critical issues
html
<w-alert variant="info" show>Informational message</w-alert>
<w-alert variant="positive" show>Your changes were saved</w-alert>
<w-alert variant="warning" show>Double-check this value before continuing</w-alert>
<w-alert variant="negative" show>Something went wrong</w-alert>

Visibility ​

Alerts are hidden by default. Set show to display them.

html
<w-alert id="profile-alert" variant="positive">Profile saved</w-alert>

<script type="module">
  const alert = document.querySelector('#profile-alert');
  alert.show = true;
</script>

Examples ​

Basic ​

html
<w-alert show>
  <p>We have updated your preferences.</p>
</w-alert>

Info ​

html
<w-alert variant="info" show>
  <p>This is an informational alert.</p>
</w-alert>

Warning ​

html
<w-alert variant="warning" show>
  <p>Please double-check this value before continuing.</p>
</w-alert>

Negative ​

html
<w-alert variant="negative" show>
  <p>Something went wrong. Try again.</p>
</w-alert>

Positive ​

html
<w-alert variant="positive" show>
  <p>Your changes were saved successfully.</p>
</w-alert>

Programmatic Visibility ​

html
<w-alert id="profile-alert" variant="positive">
  <p>Profile saved</p>
</w-alert>

<script type="module">
  const alert = document.querySelector('#profile-alert');
  alert.show = true;
</script>

Styling API ​

<w-alert> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
rolestring'alert'ARIA role announced to assistive technology.
showbooleanfalseWhether the alert is visible.
variantAlertVariants'info'Visual style of the alert.

Property Details ​

role ​

  • Type: string
  • Default: 'alert'

show ​

  • Type: boolean
  • Default: false

variant ​

Types ​

AlertVariants ​

'negative' | 'positive' | 'warning' | 'info'

Questions? ​

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