Todos los componentes (204)

Aviso

Superficies · Alert · .amset-alert

Qué es y cuándo usarlo

Banda de estado dentro de una pantalla: algo ha ido bien, algo ha fallado, algo vence. Siempre lleva icono Y texto, y cada tono tiene su silueta (círculo para información y correcto, triángulo para el aviso, octógono para el error): el color solo no cuenta lo que pasa, porque hay quien no lo distingue.

Cuándo usarlo

Para contar algo sobre lo que se está viendo o rellenando: un guardado que ha fallado, una factura que vence mañana, una importación a medias.
variant: soft (por defecto), solid para lo que no se puede pasar por alto, outline sobre un fondo que ya es de color, ghost para una nota en línea sin caja.
size: sm dentro de una tarjeta o de una fila, lg para encabezar una pantalla.
title en negrita cuando el aviso tiene más de una frase; uno corto no lo necesita.
actions para lo que se puede hacer al respecto («Reintentar», «Ver el detalle»).
onClose para que se pueda descartar. El aviso no se quita solo: lo quita quien lo pinta, al recibir la llamada.
icon cambia el icono del tono; withoutIcon lo quita, solo si el título ya dice de qué va.

Cuándo no

Lo que afecta a la aplicación entera (mantenimiento, prueba que caduca): GlobalAlert, la cinta de arriba de la página.
Una confirmación que se va sola («Guardado»): una notificación con useNotifications.
La pantalla que queda después de pagar o de un fallo sin vuelta atrás: Result.
El error de un campo concreto: la prop error del propio campo.

Teclado: el aviso no es enfocable. Con onClose aparece un botón de cerrar con su parada de Tab (Intro y Espacio lo pulsan); los botones de actions tienen la suya.

Accesibilidad: un error se anuncia al momento (role="alert"); el resto espera a que el lector de pantalla termine lo que estaba diciendo (role="status"). announcement lo fuerza en un sentido u otro (alert o status), o lo quita con none para una nota que ya está en la página al cargar. El icono es decorativo. La equis se ve de 24 a 32 px y se pulsa en 44 × 44 con el dedo; se llama «Cerrar aviso» y closeLabel lo cambia.

Aspecto fino: variables CSS --amset-alert-*: -padding-block, -padding-line, -slot, -font, -font-title, -icon, -close y -radius. Los colores del tono van en --amset-alert-tone, -tone-soft, -tone-solid y -tone-ink.

Cómo se ve

Antes de confirmar

El plan Profesional incluye soporte prioritario y usuarios ilimitados.

No se pudo guardar

La sesión caducó. Vuelve a entrar y repite el envío.

<Alert tone="info" title="Antes de confirmar">
  El plan Profesional incluye soporte prioritario y usuarios ilimitados.
</Alert>
<Alert tone="error" title="No se pudo guardar">
  La sesion caduco. Vuelve a entrar y repite el envio.
</Alert>

Props

Se importa con import { Alert } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`actions`	`ReactNode`	Botones al pie del aviso: "Reintentar", "Ver el detalle".
`announcement`	`AlertAnnouncement`	Fuerza como se anuncia. Por defecto un error interrumpe (`alert`) y el resto espera turno (`status`).
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`closeLabel`	`string`	—
`icon`	`ReactNode`	Icono propio en lugar del que corresponde al tono.
`onClose`	`() => void`	Muestra el boton de cerrar y avisa al pulsarlo.
`size`	`"sm" \| "md" \| "lg"`	`sm` dentro de una tarjeta o de una fila; `lg` para encabezar una pantalla.
`title`	`ReactNode`	Titulo en negrita sobre el texto. Opcional: un aviso corto no lo necesita.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Que quiere decir. Por defecto, `info`.
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	Como se pinta: `soft` (fondo del tono, por defecto), `solid` (relleno fuerte, para lo que no se puede pasar por alto), `outline` (solo el borde, sobre la superficie) o `ghost` (sin caja: una nota en linea).
`withoutIcon`	`boolean`	Sin icono. Solo si el titulo ya dice de que tono es: el color solo no lo cuenta.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--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))`

Cómo se cambia

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

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: