# Alert

> A message about the page or a section of it, in the tone of what it says.

- **Level**: molecule · **Status**: stable · **Role**: feedback
- **Import**: `import { Alert } from "@rrios-forge/ui/molecules/alert";`
- **Source**: `packages/ui/src/molecules/alert`

Persistent inline feedback for a section, form, page area or system state. Use Alert when the message must remain visible until dismissed; use Toast for ephemeral results. Patterns consulted: Patterns/Feedback · SuccessWarningError + LocalVsGlobalFeedback + BlockingVsNonBlocking, Patterns/Visual Priority · StatusHierarchy, Patterns/Decision Matrix · FeedbackChoice.

## Use it for

- Alert / banner → `Alert tone="info|success|warning|danger|neutral"`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `info` `success` `warning` `danger` | `info` | Which semantic colour family the element speaks in. |
| `emphasis` | — | `soft` `outline` `solid` | `soft` | How strongly a control or chip asserts itself, quiet to loud. |
| `size` | — | `sm` `md` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-alert--playground) · frame: `/iframe.html?id=components-molecules-alert--playground&viewMode=story`
- [Tones](/?path=/story/components-molecules-alert--tones) · frame: `/iframe.html?id=components-molecules-alert--tones&viewMode=story`
- [Emphases](/?path=/story/components-molecules-alert--emphases) · frame: `/iframe.html?id=components-molecules-alert--emphases&viewMode=story`
- [With Action](/?path=/story/components-molecules-alert--with-action) · frame: `/iframe.html?id=components-molecules-alert--with-action&viewMode=story`
- [Dismissible](/?path=/story/components-molecules-alert--dismissible) · frame: `/iframe.html?id=components-molecules-alert--dismissible&viewMode=story`
- [Accessibility](/?path=/story/components-molecules-alert--accessibility) · frame: `/iframe.html?id=components-molecules-alert--accessibility&viewMode=story`
- [In context](/?path=/story/components-molecules-alert--in-context) · frame: `/iframe.html?id=components-molecules-alert--in-context&viewMode=story`

## Decisions that name it

- ADR-003 — Storybook editorial convention and pattern↔component bidirectionality
- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-030 — Axis vocabulary: one name, one meaning
- ADR-034 — Accessible names come from a labels provider

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).