'/%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}
Datos
Tag
Etiquetas que se pueden quitar o elegir: filtros y valores escogidos.
import { TagGroup, Tag } from '@alea/ui';
Ejemplos
Etiquetas que se quitan
Valores elegidos con una x. Suprimir y Retroceso quitan la etiqueta enfocada.
Filtra
selectionMode convierte las etiquetas en alternancias.
Estilos, tamaños e íconos
outline (por defecto), soft o solid en cualquier tono; sm, md o lg; un ícono o un avatar pequeño antes del texto.
Una línea con scroll
overflow="scroll" mantiene los chips de filtro en una línea que se desplaza de lado, con desvanecidos y flechas para el puntero; las flechas del teclado recorren las etiquetas y traen cada una a la vista.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Appearance
appearance - Size
size - Tone
tone
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
Cada tamaño y espacio es múltiplo de 4 px.
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-solid…--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-border-strong…--alea-chip-bg…--alea-chip-text…--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-info-on-solid…--alea-status-info-solid…--alea-status-success…--alea-status-success-bg…--alea-status-success-on-solid…--alea-status-success-solid…--alea-status-warning…--alea-status-warning-bg…--alea-status-warning-on-solid…--alea-status-warning-solid…--alea-surface-hover…--alea-surface-raised…--alea-text…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…
Motion
--alea-motion-duration-fast…
Props
TagGroup props
Etiquetas que se pueden seleccionar (filtros) o quitar (valores elegidos). Las flechas se mueven, Suprimir quita.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
items | Iterable<T> | - | Las etiquetas como datos, mostradas con la función children. |
label | ReactNode | - | La etiqueta visible del grupo. |
onRemove | ((keys: Set<Key>) => void) | - | Se llama con las claves quitadas; muestra una x en cada etiqueta. |
overflow | "wrap" | "scroll" | 'wrap' | wrap (por defecto): las etiquetas pasan a más líneas. scroll: una línea que se desplaza de lado, con flechas para el puntero, para chips de filtro sobre una lista. |
renderEmptyState | (() => ReactNode) | - | Se muestra cuando no hay etiquetas. |
Tag props
Una etiqueta en un TagGroup.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
appearance | "soft" | "outline" | "solid" | - | outline (por defecto), soft (con tinte) o solid. |
icon | ReactNode | - | Un ícono o un avatar pequeño antes del texto. |
size | "sm" | "md" | "lg" | - | sm (24 px), md (32 px, por defecto) o lg (40 px). |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | "info" | 'neutral' | Color de la etiqueta: neutral (por defecto), accent, success, warning, danger o info. |
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 × appearance
Oscuro
appearance="outline" | appearance="soft" | appearance="solid" | |
|---|---|---|---|
tone="neutral" | |||
tone="accent" | |||
tone="info" | |||
tone="success" | |||
tone="warning" | |||
tone="danger" |
Claro
appearance="outline" | appearance="soft" | appearance="solid" | |
|---|---|---|---|
tone="neutral" | |||
tone="accent" | |||
tone="info" | |||
tone="success" | |||
tone="warning" | |||
tone="danger" |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Size
Oscuro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
TagGroup
- Variantes
overflowwrapscroll- 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-tag-list.alea-tag-group.alea-tag-scroller.alea-tab-scroll- Atributos data
data-overflow=scrolldata-overflow-enddata-overflow-start
Tag
- Variantes
appearancesoftoutlinesolidsizesmmdlgtonedangerneutralaccentsuccesswarninginfo- Estados
- HoverSelectedDisabled
- Motion
- press
- 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-tag.alea-tag-icon.alea-tag-remove- Atributos data
data-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-overflow=scrolldata-allows-removingdata-selection-modedata-appearance=softdata-appearance=soliddata-tone=neutraldata-size=smdata-size=lg
Accesibilidad
- Una grilla navegable con teclado; Suprimir y Retroceso quitan la etiqueta con foco.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Se mueven entre etiquetas |
| Suprimir / Retroceso | Quita la etiqueta |
| Espacio | Elige (modo de selección) |
Qué hacer y qué evitar
Hacer
- Usa una o dos palabras por etiqueta.
- Haz que las etiquetas removibles también se quiten con el teclado (onRemove lo hace).
Evitar
- No uses etiquetas como botones que ejecutan acciones.
- No muestres más de una línea de etiquetas sin una forma de ver el resto.