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.
Tag
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the tag. | |
appearance | 'danger' | 'neutral' | Change the visual style of the tag. |
Tag.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
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. |