Alert

wu-alert shows a message with a title and a marker, with optional actions and a dismiss button. The title text carries the meaning (“Error”, “Saved”), and the marker shape repeats it: a circle by default, a check for success, a triangle for warning, an octagon for danger.

Use role="alert" for urgent messages and role="status" for the rest.

Class	Effect
`wu-alert`	Root. Gray subtle background and border, circle marker
`wu-alert-title`	Part. Bold title line, in the role text color
`wu-alert-actions`	Part. Row of buttons under the text
`wu-alert-close`	Part, a `<button>` with `aria-label`, last in the alert. Cross drawn in CSS
`brand`, `success`, `danger`, `warning`, `info`	Role background, border, marker and title color

Default

Note

Changes apply to new projects only.

<div class="wu-alert" role="status">
  <strong class="wu-alert-title">Note</strong>
  <p>Changes apply to new projects only.</p>
</div>

Roles

New

Shared views are available in every workspace.

Information

The export runs in the background.

Saved

Your profile was updated.

Warning

Your trial ends in three days.

Error

The payment was declined. Check the card details.

<div class="flex col gap-3">
  <div class="wu-alert brand" role="status">
    <strong class="wu-alert-title">New</strong>
    <p>Shared views are available in every workspace.</p>
  </div>
  <div class="wu-alert info" role="status">
    <strong class="wu-alert-title">Information</strong>
    <p>The export runs in the background.</p>
  </div>
  <div class="wu-alert success" role="status">
    <strong class="wu-alert-title">Saved</strong>
    <p>Your profile was updated.</p>
  </div>
  <div class="wu-alert warning" role="status">
    <strong class="wu-alert-title">Warning</strong>
    <p>Your trial ends in three days.</p>
  </div>
  <div class="wu-alert danger" role="alert">
    <strong class="wu-alert-title">Error</strong>
    <p>The payment was declined. Check the card details.</p>
  </div>
</div>

Title only

Invitation sent

<div class="wu-alert success" role="status">
  <strong class="wu-alert-title">Invitation sent</strong>
</div>

Actions

Warning

Your trial ends in three days.

<div class="wu-alert warning" role="status">
  <strong class="wu-alert-title">Warning</strong>
  <p>Your trial ends in three days.</p>
  <div class="wu-alert-actions">
    <button class="wu-btn sm brand" type="button">Upgrade</button>
    <button class="wu-btn sm" type="button">Remind me later</button>
  </div>
</div>

Dismiss

wu-alert-close is markup only: the app listens for the click and removes the alert. Name the action in aria-label.

Information

The export runs in the background.

<div class="wu-alert info" role="status">
  <strong class="wu-alert-title">Information</strong>
  <p>The export runs in the background.</p>
  <button class="wu-alert-close" type="button" aria-label="Dismiss"></button>
</div>

Right to left

The marker sits at the inline start and the close button at the inline end, so both swap sides in right-to-left text.

الدفع مستحق

تنتهي صلاحية بطاقتك في نهاية الشهر.

<div class="wu-alert warning" role="status">
  <strong class="wu-alert-title">الدفع مستحق</strong>
  <p>تنتهي صلاحية بطاقتك في نهاية الشهر.</p>
  <button class="wu-alert-close" type="button" aria-label="إغلاق"></button>
</div>

Load only the alert

@use "@wovenui/components/alert";

The alert needs no other component.