'/%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
EmptyState y Result
Qué mostrar cuando todavía no hay nada, y el resultado de un flujo o una página.
import { EmptyState, Result } from '@alea/ui';
Ejemplos
EmptyState
Nada todavía, y qué hacer al respecto.
No palettes yet
Make your first one from a brand color. It takes about a minute.
Result
Listo, falló, no encontrado, sin acceso.
Payment received
Your license key is in your inbox.
Page not found
It moved, or it never existed.
Tamaños, discontinuo y dos acciones
size="sm" cabe dentro de una tarjeta o una tabla, lg llena una página; variant="dashed" marca un área que espera ser llenada; secondaryAction va junto a la principal y footer lleva un enlace de ayuda.
No results
Try a shorter search, or clear the filters.
No projects yet
Projects keep your palettes and tokens together.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Illustration
illustration - Size
size - Variant
variant
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-strong…--alea-accent-subtle…--alea-border-control…--alea-status-danger…--alea-status-danger-bg…--alea-status-success…--alea-status-success-bg…--alea-surface-raised…--alea-text-muted…
Space
--alea-space-1…--alea-space-10…--alea-space-16…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Radius
--alea-radius-lg…
Type
--alea-font-family-body…--alea-font-family-display…--alea-font-size-2xl…--alea-font-size-3xl…--alea-font-size-md…--alea-font-size-sm…--alea-font-tracking-display…--alea-font-weight-light…--alea-font-weight-semibold…
Props
EmptyState props
Qué mostrar cuando todavía no hay nada, y qué hacer al respecto: tres tamaños, un estilo discontinuo, una ilustración, dos acciones y un pie.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | - | Qué está vacío, en pocas palabras. |
action | ReactNode | - | Un botón para resolverlo: "Crea tu primera paleta". |
description | ReactNode | - | Qué hacer al respecto. |
footer | ReactNode | - | Una línea debajo de las acciones: un enlace de ayuda, una nota. |
headingAs | ElementType | 'h3' | El elemento del título. Por defecto h3. |
icon | ReactNode | - | Un ícono o ilustración. Por defecto una bandeja de entrada. Pasa un <img> o SVG para una ilustración completa (se muestra más grande, sin el mosaico). |
illustration | boolean | - | Muestra icon como una ilustración completa en lugar de un ícono en un mosaico. |
secondaryAction | ReactNode | - | Una segunda acción, más discreta, junto a la principal: "Importar", "Más información". |
size | "sm" | "md" | "lg" | - | sm (dentro de tarjetas y tablas), md (por defecto) o lg (una página entera). |
variant | "dashed" | "plain" | - | plain (por defecto) o dashed: una caja discontinua, para áreas que esperan ser llenadas. |
Result props
El resultado de un flujo o de una página entera: listo, falló, no encontrado, sin acceso.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
statusobligatoria | "error" | "success" | "info" | "404" | "403" | "500" | - | success, error, 404, 403, 500 o info. |
titleobligatoria | ReactNode | - | Qué está vacío, en pocas palabras. |
action | ReactNode | - | Un botón para resolverlo: "Crea tu primera paleta". |
description | ReactNode | - | Qué hacer al respecto. |
footer | ReactNode | - | Una línea debajo de las acciones: un enlace de ayuda, una nota. |
headingAs | ElementType | - | El elemento del título. Por defecto h3. |
illustration | boolean | - | Muestra icon como una ilustración completa en lugar de un ícono en un mosaico. |
secondaryAction | ReactNode | - | Una segunda acción, más discreta, junto a la principal: "Importar", "Más información". |
size | "sm" | "md" | "lg" | - | sm (dentro de tarjetas y tablas), md (por defecto) o lg (una página entera). |
variant | "dashed" | "plain" | - | plain (por defecto) o dashed: una caja discontinua, para áreas que esperan ser llenadas. |
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.
EmptyState
- Variantes
sizesmmdlgvariantdashedplain- 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-empty.alea-empty-art.alea-empty-icon.alea-empty-title.alea-empty-text.alea-empty-action.alea-empty-footer- Atributos data
data-variant=dasheddata-size=smdata-size=lgdata-status=successdata-status=errordata-status=404data-status=403data-status=500
Result
- Variantes
statuserrorsuccessinfo404403500sizesmmdlgvariantdashedplain- 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-result- Atributos data
data-status=successdata-status=errordata-status=404data-status=403data-status=500
Accesibilidad
- El título es un encabezado real, así el estado vacío aparece cuando se recorre la página por encabezados.
- La ilustración es decorativa y queda oculta para los lectores de pantalla; el texto lo dice todo.
- Result no anuncia nada por sí solo: cuando reemplaza un flujo, mueve el foco a su título.
Qué hacer y qué evitar
Hacer
- Di qué hacer después y ofrece el botón para hacerlo.
Evitar
- No culpes a la persona.