Tag

2.5.1

Comunica el estado o la categoría de un elemento mediante una palabra clave breve y un color semántico.

Ver en Figma

Cuándo usar

Comunicar el estado de un elemento: mostrar de un vistazo en qué situación está un elemento dentro de una lista o tabla, sin abrir el detalle. Ej.: "Enviada", "Pendiente", "Rechazado".
Categorizar un elemento con una palabra clave: clasificarlo dentro de un tipo o grupo fijo, que la persona no necesita quitar. Ej.: "Nuevo", "Beta", "Borrador".
Señalar contenido generado por IA: identificar con la apariencia ai-generative un valor o una recomendación que generó la inteligencia artificial, para distinguirlo del resto. Ej.: "Generado por IA".

Cuándo no usar

Permitir que la persona agregue o quite la etiqueta: el Tag es de solo lectura y no se puede remover. En su lugar, usar Chip. Ej.: un criterio o filtro aplicado sobre una lista.
Mostrar una cantidad o un contador: comunicar el número de ítems o de acciones pendientes asociadas a una sección. En su lugar, usar Badge. Ej.: la cantidad de mensajes sin leer.
Ejecutar una acción al hacer clic: el Tag no es interactivo ni dispara ninguna acción. En su lugar, usar Button o Link. Ej.: confirmar un pedido o ver su detalle.

Anatomía

Entregada

Surface: contenedor de color que define el significado semántico de la etiqueta.
Text: palabra clave que nombra el estado o la categoría, en pocas palabras. Es obligatoria.
Icon: elemento opcional, ubicado antes del texto, que refuerza la lectura del estado sin reemplazarlo.

Variantes

Apariencia

Neutral

Neutral: estado o categoría sin carga semántica positiva ni negativa. Valor por defecto. Ej.: "Archivada", "Borrador", "Reembolsado".

Primary

Primary: usa el color de marca para destacar un elemento, como una novedad o una recomendación. Ej.: "Nuevo", "Por enviar", "Por retirar".

Success

Success: estado positivo o completado con éxito. Ej.: "Enviada", "Recibido", "Activado".

Warning

Warning: estado en transición o que requiere atención, sin ser un error. Ej.: "Pendiente", "En análisis", "Cancelación pendiente".

Danger

Danger: estado de error, rechazo o resultado negativo. Ej.: "Rechazado", "Vencido", "Cancelada".

AI generative

AI generative: reservar para contenido o recomendaciones generadas por inteligencia artificial, para distinguirlas del resto. Ej.: "Generado por IA", "Recomendado por Lumi".

Aplicación

Suele acompañar el título o el dato principal de una fila, una tarjeta o un encabezado de sección, ubicada cerca del elemento que califica para que la relación entre ambos sea evidente. Es habitual en columnas de estado de tablas de pedidos, filas de medios de pago o listas de productos.

Pedido #1042

Ana Gómez

Enviada

Pedido #1043

Luis Pérez

Pendiente

Pedido #1044

Sofía Ruiz

Rechazado

Do and Don'ts

Pedido #1050

Pendiente

Usar una palabra clave breve que nombre el estado o la categoría.

Pedido #1050

Pago pendiente de confirmación

Evitar frases largas u oraciones completas dentro del Tag.

Pedido #1051

Reembolsado

Usar neutral cuando el estado es una resolución cerrada, aunque el nombre suene negativo.

Pedido #1051

Reembolsado

Evitar danger en un estado ya resuelto: un reembolso es una resolución, no un error.

Accesibilidad

No depender solo del color: el significado de la apariencia se apoya siempre en el texto, de modo que el estado se entienda sin distinguir colores. La palabra clave es la que comunica; el color refuerza.
Ícono que refuerza el mensaje: cuando el Tag incluye un ícono, este refuerza el significado del texto en lugar de aportar información por sí solo. El estado siempre se entiende por el texto, sin depender del ícono.

Implementación

Instalá el componente vía terminal.

npm install @nimbus-ds/components

import React from "react";
import { Tag, Text } from "@nimbus-ds/components";
import { BoxPackedIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <Tag appearance="neutral">
    <BoxPackedIcon size={12} />
    <Text color="neutral-textLow">Text</Text>
  </Tag>
);

export default Example;

Props

Las propiedades adicionales se pasan al elemento <Tag>. Consultá la documentación del elemento div para ver la lista de atributos aceptados.

Componentes relacionados

Chip — Para representar un criterio o filtro que la persona puede quitar, en lugar de un estado fijo de solo lectura.
Badge — Para comunicar la cantidad de ítems o de acciones pendientes, en lugar de una categoría con palabras clave.

Tag

Name	Type	Default	Description
children*	React.ReactNode		The content of the tag.
appearance	'ai-generative' 'danger' 'neutral' 'primary' 'success' 'warning'	'neutral'	Change the visual style of the tag.

Tag.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
className	string
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.

Ayudanos a mejorar la documentación

¿Encontraste un problema o tenés una sugerencia? Contanos.

Compartí tu opinión