Skip to content

role alert

Alert draft v0.1.0

A brief, important message that draws attention without interrupting the task.

An alert tells people something important about the page or what they just did: a saved change, a failed payment, a maintenance window, a quota about to run out. It sits in the content, tinted by its intent with an icon and a title, and is announced by assistive technology when it appears. It never moves focus and never blocks the page: a message that needs a decision is a dialog, a short transient confirmation is a toast.

Examples

Scheduled maintenance

The service will be unavailable on Sunday from 02:00 to 04:00 UTC.

intent="info"
title="Scheduled maintenance"
message="The service will be unavailable on Sunday from 02:00 to 04:00 UTC."

Open in playground

Changes saved

Your profile has been updated.

intent="success"
title="Changes saved"
message="Your profile has been updated."

Open in playground

Storage almost full

You have used 95% of your storage. Delete files or upgrade your plan to keep uploading.

intent="warning"
title="Storage almost full"
message="You have used 95% of your storage. Delete files or upgrade your plan to keep uploading."

Open in playground

Payment failed

Your card was declined. Check the card details or try another payment method.

intent="error"
title="Payment failed"
message="Your card was declined. Check the card details or try another payment method."

Open in playground

You can change the language of the interface in Settings.

intent="info"
message="You can change the language of the interface in Settings."

Open in playground