Tag
El componente Tag se utiliza para categorizar información, organizar o indicar el estado de elementos o componentes usando palabras clave, iconos y colores.
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;El componente se integra por texto estilizado que consume nuestros tokens, un icono y una forma con color. Estas dos últimas son opcionales y no pueden ser utilizadas al mismo tiempo.
El componente posee 3 variantes de configuración que pueden ser utilizadas según necesario.
- Solamente texto.
- Icono con texto.
- Color con texto.
Más allá de eso, también poseen 5 variantes que deben ser usadas según el mensaje que queremos comunicar.
Esta variante se usa para destacar información relevante de características neutrales. Es decir, aquellas que no están asociadas a un contexto positivo, de éxito, error o peligro.
Estas variantes son utilizadas para destacar información relevante que está asocaida a un contexto positivo o de éxito respectivamente.
Estas variantes se usan para destacar información relevante, que está asociada a un contexto de riesgo o error respectivamente. Las variantes pueden ser combinadas en un mismo contexto para ayudar a leer rápidamente el estado de diferentes elementos o informaciones.
Usamos el componente Tag para ayudar a la persona usuaria a entender el estado de diferentes elementos, categorizándolos por mediod e variantes y usando sus elementos para apoyar esta comunicación.
Componente Chip - Usado para categorizar datos dentro de un filtro o resultado de búsqueda. Componente Badge - Usado para destacar cantidad de ítems dentro de una sección o lista.
Additional props are passed to the <Tag> element. See div docs for a list of props accepted by the <Tag> element.