Alert

Alert shows a message about the page or the current task, with an optional icon, title, and actions. It has one root hook, four part hooks, and a status tone through data-bitsy-variant. It ships no JavaScript.

Public web API

One root hook on a <div> and four optional parts. Every part is optional, so an Alert can be just a description.

<div data-bitsy-alert data-bitsy-variant="warning">
  <svg data-bitsy-alert-icon aria-hidden="true">…</svg>
  <p data-bitsy-alert-title>Your trial ends in 3 days</p>
  <div data-bitsy-alert-description>
    <p>Add a payment method to keep your projects.</p>
  </div>
  <div data-bitsy-alert-actions>
    <a href="/billing">Add payment method</a>
  </div>
</div>

data-bitsy-variant="success" | "warning" | "error"; omit it for neutral, which also covers information.
The icon is author-supplied and decorative: use aria-hidden="true" and currentColor.
The title or text must say what happened. The tone color is never the only cue.

Tones

Only the icon and title take the tone color. The description stays secondary text so body copy keeps full contrast.

Scheduled maintenance

Bitsy Cloud will be read-only on Sunday from 02:00 to 02:30 UTC.

Settings saved

Your changes are live for everyone on the team.

Your trial ends in 3 days

Add a payment method to keep your projects.

Payment failed

We could not charge the card ending in 4242. Update it to avoid losing access.

Shapes and content

The layout collapses without the icon, title, or actions, and long text wraps at the first line of the icon.

Description only, no icon and no title.

Description with an icon, no title.

Title and description, no icon

Without the icon the content uses the full width.

A long title that has to wrap onto a second line to prove the icon stays beside the first one

A description can hold several paragraphs. The icon stays beside the first line of the title.

Two paragraphs and two actions

Your plan includes 5 seats and 7 are in use.

Remove two members or upgrade before the next billing date.

Narrow container

The icon stays at the first line.

Live regions

An Alert present at page load is plain content. For one inserted after an action, keep an empty role="status" region and fill it in.

Use role="status" for confirmations and role="alert" only for an error that needs attention now.
Do not put role="alert" on Alerts present at load; screen readers announce them all at once.

Bit boundary

Alert is for a message that stays on the page. An error on one field belongs to the field's own error message, a short status label is a Badge, a message that fades away is a Toast, and a confirmation that blocks the page is a Dialog. Alert never dismisses itself and ships no JavaScript.