Avisos

Alert

Un mensaje en la página: info, éxito, advertencia o peligro, con acciones.

import { Alert } from '@alea/ui';

Ejemplos

Tonos

Info, éxito, advertencia y peligro.

New in 0.1

Forty components with dark and light.

Variables created

11 colors in the Theme collection.

One mode on the Free plan

Dark goes into its own collection.

Couldn't load the font

Install Inter or pick another font.

Acciones y cerrar

Botones a la derecha, un botón de cerrar, y live para anunciarlo.

Alea Pro is out

Thirteen plugins, one license.

Estilos y tamaños

soft (por defecto), outline, solid y accent (una barra a la izquierda); size="sm" cabe en una línea en formularios y tablas; icon reemplaza el ícono del tono.

Soft

The default: tinted in its tone.

Outline

A border in the tone, no fill.

Solid

Filled, for the one message that must be seen.

Accent

A bar on the left and your own icon.

2 errors

Fix them to continue.

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

hideIcon: false

hideIcon: true

neutral

accent

success

warning

danger

info

soft

accent

outline

solid

Hide IconhideIcon
Sizesize
Tonetone
Variantvariant

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-accent-on…
--alea-accent-strong…
--alea-accent-subtle…
--alea-status-danger…
--alea-status-danger-bg…
--alea-status-danger-on-solid…
--alea-status-danger-solid…
--alea-status-info…
--alea-status-info-bg…
--alea-status-on…
--alea-status-success…
--alea-status-success-bg…
--alea-status-warning…
--alea-status-warning-bg…
--alea-surface…
--alea-surface-raised…
--alea-text…
--alea-text-muted…

Space

--alea-space-2…
--alea-space-3…
--alea-space-4…

Radius

--alea-radius-md…
--alea-radius-sm…

Type

--alea-font-family-body…
--alea-font-leading-normal…
--alea-font-size-md…
--alea-font-size-sm…
--alea-font-weight-semibold…

Shadow

--alea-shadow-card…

Props

`Alert` props

Ver 10 props heredadas

Un mensaje en la página: info, success, warning, danger, accent o neutral, en cuatro estilos y dos tamaños.

Prop	Tipo	Por defecto	Descripción
`actions`	`ReactNode`	-	Botones o enlaces a la derecha (o debajo en pantallas pequeñas).
`hideIcon`	`boolean`	-	Oculta el ícono.
`icon`	`ReactNode`	-	Tu propio ícono en lugar del del tono.
`live`	`boolean`	-	Lo anuncia a los lectores de pantalla cuando aparece (role alert para danger, status en otros casos). Por defecto false para alertas al cargar la página.
`onDismiss`	`(() => void)`	-	Muestra un botón de cerrar y llama a esto.
`size`	`"sm" \| "md"`	-	md (por defecto) o sm: una línea compacta, para formularios y tablas.
`title`	`ReactNode`	-	El titular, en negrita.
`tone`	`"danger" \| "neutral" \| "accent" \| "success" \| "warning" \| "info"`	`'info'`	info (por defecto), success, warning, danger, accent o neutral.
`variant`	`"soft" \| "accent" \| "outline" \| "solid"`	-	soft (con tinte, por defecto), outline (un borde del tono), solid (relleno) o accent (una barra a la izquierda).

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Tone

Oscuro

Alert dark
`tone="neutral"`	Saved Your changes are live.
`tone="accent"`	Saved Your changes are live.
`tone="info"`	Saved Your changes are live.
`tone="success"`	Saved Your changes are live.
`tone="warning"`	Saved Your changes are live.
`tone="danger"`	Saved Your changes are live.

Claro

Alert light
`tone="neutral"`	Saved Your changes are live.
`tone="accent"`	Saved Your changes are live.
`tone="info"`	Saved Your changes are live.
`tone="success"`	Saved Your changes are live.
`tone="warning"`	Saved Your changes are live.
`tone="danger"`	Saved Your changes are live.

Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.

Variantes: sizesmmd
tonedangerneutralaccentsuccesswarninginfo
variantsoftaccentoutlinesolid
Motion: rise
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-alert.alea-alert-icon.alea-alert-body.alea-alert-title.alea-alert-text.alea-alert-actions.alea-alert-x
Atributos data: data-tone=successdata-tone=warningdata-tone=dangerdata-tone=accentdata-tone=neutraldata-variant=outlinedata-variant=soliddata-variant=accentdata-size=sm

Usa live cuando aparece después de algo que hizo la persona, para que se anuncie.

Teclado

Tecla	Acción
`Tab`	Va a las acciones y al botón de cerrar
`Enter`	Ejecuta la acción con foco

Qué hacer y qué evitar

Hacer

Di qué pasó y qué hacer.

Evitar

No uses danger para cosas que no son errores.