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.

Decisions

From decisions in packages/components/specs/components/alert.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Variant

  • An alert has four intents, info (default), success, warning and error, each reading the Figma library's functional family: subtle fill global.bg.subtle.functional.<family>.default, border global.border.accent.functional.<family>.default, icon global.icon.on-subtle.functional.<family>.default, title global.text.on-subtle.functional.<family>.default; the message stays in the primary text color.

    intents · 2026-10-03 · v0.1.0

    alert.container.background.*alert.container.border-color.*alert.icon.color.*alert.title.color.*alert.message.color

Anatomy

Dimension

  • The box has 16 px of padding, 12 px between the icon and the text, 4 px between title and message, a 0.6 px border and 8 px corners; the title is 16 px medium, the message 16 px regular.

    box · 2026-10-03 · v0.1.0

    alert.container.paddingalert.container.gapalert.content.gapalert.container.border-widthalert.container.border-radiusalert.title.typographyalert.message.typography

Behaviour

  • The alert has no close button and no actions in this version: dismissing needs script, and actions in a live region are read before people can reach them. Both are open questions.

    no-dismiss-no-actions · 2026-10-03 · v0.1.0

    APG: Alert pattern