All components (204)

Alert

Surfaces · Alert · .amset-alert

What it is and when to use it

A status band inside a screen: something went well, something failed, something is about to expire. It always carries an icon AND text, and each tone has its own silhouette (circle for info and success, triangle for warning, octagon for error): color alone does not say what is happening, because some people cannot tell colors apart.

When to use it

To tell something about what is being viewed or filled in: a save that failed, an invoice due tomorrow, an import left half done.
variant: soft (default), solid for what cannot be overlooked, outline over a background that is already colored, ghost for an inline note with no box.
size: sm inside a card or a row, lg to head a screen.
title in bold when the alert has more than one sentence; a short one does not need it.
actions for what can be done about it ("Retry", "See details").
onClose so it can be dismissed. The alert does not remove itself: whoever renders it removes it, when it receives the call.
icon changes the tone's icon; withoutIcon removes it, only if the title already says what it is about.

When not to

What affects the whole application (maintenance, an expiring trial): GlobalAlert, the ribbon at the top of the page.
A confirmation that goes away on its own ("Saved"): a notification with useNotifications.
The screen shown after a payment or after a failure with no way back: Result.
The error of a specific field: the field's own error prop.

Keyboard: the alert is not focusable. With onClose, a close button appears with its own Tab stop (Enter and Space press it); the actions buttons have theirs.

Accessibility: an error is announced immediately (role="alert"); the rest waits until the screen reader finishes what it was saying (role="status"). announcement forces it one way or the other (alert or status), or removes it with none for a note that is already on the page at load. The icon is decorative. The X looks 24 to 32 px and is pressed at 44 × 44 with a finger; it is called "Close alert" and closeLabel changes it.

Fine-tuning: CSS variables --amset-alert-*: -padding-block, -padding-line, -slot, -font, -font-title, -icon, -close and -radius. The tone colors go in --amset-alert-tone, -tone-soft, -tone-solid and -tone-ink.

What it looks like

Before confirming

The Professional plan includes priority support and unlimited users.

Could not save

Your session expired. Sign in again and resubmit.

<Alert tone="info" title="Before confirming">
  El plan Profesional incluye soporte prioritario y usuarios ilimitados.
</Alert>
<Alert tone="error" title="Could not save">
  La sesion caduco. Vuelve a entrar y repite el envio.
</Alert>

Props

Import it with import { Alert } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`actions`	`ReactNode`	Buttons at the foot of the notice: "Retry", "View details".
`announcement`	`AlertAnnouncement`	Forces how it is announced. By default an error interrupts (`alert`) and the rest wait their turn (`status`).
`className`	`string`	Merged with the library classes; it does not replace them.
`closeLabel`	`string`	—
`icon`	`ReactNode`	Custom icon instead of the one that matches the tone.
`onClose`	`() => void`	Shows the close button and notifies when it is pressed.
`size`	`"sm" \| "md" \| "lg"`	`sm` inside a card or a row; `lg` to head a screen.
`title`	`ReactNode`	Bold title above the text. Optional: a short notice does not need it.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	What it means. Defaults to `info`.
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	How it is drawn: `soft` (tone background, default), `solid` (strong fill, for what cannot be overlooked), `outline` (border only, on the surface) or `ghost` (no box: an inline note).
`withoutIcon`	`boolean`	No icon. Only if the title already says what tone it is: color alone does not convey it.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-alert-tone`	`var(--amset-info)`
`--amset-alert-tone-soft`	`var(--amset-info-soft)`
`--amset-alert-tone-solid`	`var(--amset-info-solid)`
`--amset-alert-tone-ink`	`var(--amset-info-ink)`
`--amset-alert-padding-block`	`var(--amset-space-3)`
`--amset-alert-padding-line`	`var(--amset-space-4)`
`--amset-alert-slot`	`var(--amset-space-3)`
`--amset-alert-font`	`var(--amset-text-base)`
`--amset-alert-font-title`	`var(--amset-text-base)`
`--amset-alert-icon`	`1.125rem`
`--amset-alert-close`	`1.75rem`
`--amset-alert-radius`	`var(--amset-radius)`
`--amset-alert-background`	`var(--amset-alert-tone-soft)`
`--amset-alert-border`	`color-mix(in oklab, var(--amset-alert-tone) 35%, transparent)`
`--amset-alert-text`	`var(--amset-alert-tone)`
`--amset-alert-first`	`calc(var(--amset-alert-font) * var(--amset-line-normal))`

How to change it

.amset-alert {
  --amset-alert-tone: ...;
  --amset-alert-tone-soft: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: