Todos los componentes (204)

Etiqueta

Superficies · Tag · .amset-label

Qué es y cuándo usarlo

Etiqueta de estado: pagada, pendiente, vencida. Lleva un punto además del color, porque el color solo no vale para quien no lo distingue, y en una impresión en blanco y negro desaparece.

Cuándo usarlo

El estado de una fila, de una tarjeta o de un encabezado: «Pagada», «Pendiente», «Vencida», «Borrador».
variant: soft (por defecto), solid para lo que tiene que saltar a la vista, outline en listas largas donde tanto fondo de color satura, ghost (el punto y el texto, sin caja) para una columna de tabla.
size: 20, 24 o 28 px de alto.
icon en lugar del punto cuando un dibujo lo dice mejor; withoutDot para las que son solo texto.
onRemove cuando se puede quitar (un destinatario, un filtro): aparece la equis.

Cuándo no

Los filtros puestos sobre una lista: AppliedFilters, que se recorren con las flechas y se quitan con Supr.
Elegir varias etiquetas de una lista o crear nuevas: MultiSelect.
Un aviso con frase entera: Alert.

Teclado: la etiqueta no es enfocable. Con onRemove, la equis es un botón con su parada de Tab; Intro y Espacio lo pulsan. Se ve un círculo de 1rem, pero se pulsa en 24 × 24 px con ratón y en 44 × 44 px con el dedo: el área de más es transparente y se sale de la etiqueta en vez de agrandarla.

Accesibilidad: el punto y el icono son decorativos (aria-hidden): el estado lo dice el texto. Un texto que no cabe se corta con puntos suspensivos, pero sigue entero en el documento, que es lo que lee el lector de pantalla. La equis se llama «Quitar» y el texto («Quitar Pendiente») cuando el texto es una cadena; si lo que va dentro no es texto, dale nombre con removeLabel, que también sirve para cambiarlo.

Aspecto fino: variables CSS --amset-label-*: -height, -padding, -slot, -font, -dot, -icon y -radius (999px da etiquetas de píldora); -remove-side es el lado del área pulsable de la equis (1.5rem; con el dedo, --amset-target-touch). Los colores del tono van en --amset-label-tone, -tone-soft, -tone-solid y -tone-ink. info es el azul fijo de información; accent, el color de la marca.

Cómo se ve

ActivoPendienteRevisar

<Tag tone="success">Activo</Tag>
<Tag tone="warning">Pendiente</Tag>
<Tag tone="error" variant="soft">Revisar</Tag>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Apagada: se lee pero no se quita. El boton de quitar sale `disabled`, con lo que el navegador ya le niega el clic y el tabulador, y la etiqueta entera lo anuncia con `data-disabled` para el CSS. Es para una etiqueta que viene impuesta -un estado que decide el sistema, un filtro obligatorio- donde esconder la equis seria peor: desaparece sin explicar por que.
`icon`	`ReactNode`	Icono propio en lugar del punto.
`onRemove`	`() => void`	Con esto aparece la equis para quitarla (filtros aplicados, destinatarios). Se ve un circulo de 1rem, pero se pulsa en 24 × 24 px con raton y en el objetivo tactil (44 px) con el dedo: el area de mas es transparente y se sale de la etiqueta en vez de agrandarla.
`removeLabel`	`string`	—
`size`	`"sm" \| "md" \| "lg"`	20, 24 o 28 px de alto.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	Como se pinta: `soft` (fondo del tono, por defecto), `solid` (relleno fuerte, para lo que tiene que saltar a la vista), `outline` (solo el borde, para listas largas donde tanto color satura) o `ghost` (el punto y el texto, sin caja: para columnas de una tabla).
`withoutDot`	`boolean`	Quita el punto: solo para etiquetas que ya llevan icono o son solo texto.

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-label-tone`	`var(--amset-ink-2)`
`--amset-label-tone-soft`	`var(--amset-surface-2)`
`--amset-label-tone-solid`	`var(--amset-ink)`
`--amset-label-tone-ink`	`var(--amset-surface)`
`--amset-label-height`	`1.5rem`
`--amset-label-padding`	`var(--amset-space-2)`
`--amset-label-slot`	`var(--amset-space-2)`
`--amset-label-font`	`var(--amset-text-sm)`
`--amset-label-dot`	`0.375rem`
`--amset-label-icon`	`0.875rem`
`--amset-label-radius`	`var(--amset-radius-sm)`
`--amset-label-background`	`var(--amset-label-tone-soft)`
`--amset-label-border`	`transparent`
`--amset-label-text`	`var(--amset-label-tone)`

Cómo se cambia

.amset-label {
  --amset-label-tone: ...;
  --amset-label-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: