'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Avisos
Toast
Un mensaje breve que confirma que algo pasó, con una acción opcional como Deshacer.
import { ToastProvider, useToast } from '@alea/ui';
Ejemplos
Toasts
show() desde cualquier lugar dentro de ToastProvider. Hover o foco pausa el temporizador.
Con una acción
Deshacer es el clásico.
Promesa, progreso e íconos
promise() muestra un toast de carga y lo convierte en éxito o error cuando termina el trabajo; showProgress dibuja una barra que se vacía hasta que se cierra (se pausa con hover); icon define el tuyo.
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-strong…--alea-accent-subtle…--alea-border-strong…--alea-chip-bg…--alea-chip-text…--alea-status-danger…--alea-status-danger-bg…--alea-status-info…--alea-status-info-bg…--alea-status-success…--alea-status-success-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-full…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-leading-normal…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-toast…
Component
--alea-glass-blur…--alea-glass-rim…--alea-glass-saturate…--alea-glass-tint…--alea-stack-dir…--alea-stack-i…--alea-stack-y…--alea-swipe-n…--alea-swipe-x…--alea-toast-ms…
Props
ToastProvider props
Muestra toasts en cualquier lugar debajo de él; ponlo una vez cerca de la raíz.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
motion | MotionProp | - | Cómo entran y salen los toasts (por defecto: suben con un resorte, se deslizan al salir): un preset, false, u opciones. |
placement | "bottom" | "top" | "bottom-end" | "top-end" | 'bottom-end' | Dónde se apilan los toasts: bottom-end (por defecto), bottom, top-end o top. |
stacked | boolean | - | Los toasts se apilan detrás del más nuevo y se abren en abanico con hover o foco (el patrón stack). |
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.
- Variantes
placementbottomtopbottom-endtop-end- Estados
- Hover (CSS)Focus inside
- Motion
- risepressAcepta una prop motion para su entrada y salida.
- 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-toast-region.alea-toast.alea-alert-icon.alea-toast-progress.alea-alert-body.alea-alert-title.alea-alert-text.alea-toast-action.alea-alert-x- Atributos data
data-tone=successdata-tone=warningdata-tone=dangerdata-tone=accentdata-tone=neutraldata-placement=bottom-enddata-placement=top-enddata-placement=bottomdata-placement=topdata-swipingdata-stackeddata-variant=soliddata-size=smdata-paused
Accesibilidad
- Se anuncia sin interrumpir (los errores sí interrumpen); el tiempo se pausa con el mouse encima o con foco.
- Los errores se quedan hasta que se cierran.
Teclado
| Tecla | Acción |
|---|---|
| F6 o Tab | Llega a la región de notificaciones |
| Enter | Ejecuta la acción |
| Escape | Cierra el toast con foco |
Qué hacer y qué evitar
Hacer
- Confirma acciones cuyo resultado la gente no ve.
Evitar
- No pongas la única forma de hacer algo en un toast.