Tag
O componente Tag é utilizado para categorizar informações, organizar ou indicar status de elementos ou componentes usando palavras-chave, ícones ou cores.
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;O componente é composto por texto estilizado que consome nossos tokens, além de um ícone e uma forma com cor, esses dois últimos são opcionais e não podem ser utilizados ao mesmo tempo.
O Componente tag possui 3 possibilidades de configuração que podem ser utilizadas de acordo com a necessidade.
- Somente texto;
- Ícone com texto;
- Cor com texto.
Além disso, ele possui 5 variantes que devem ser usadas levando em consideração a mensagem que queremos comunicar.
Essa variante é utilizada para destacar informações relevantes porém neutras, ou seja, aquelas que não estão associadas a um contexto positivo, de sucesso, erro ou perigo.
Essas variantes são utilizadas para destacar informações relevantes, que estão associadas a um contexto positivo ou de sucesso respectivamente.
Essas variantes são utilizadas para destacar informações relevantes, que estão associadas a um contexto de risco ou erro respectivamente. As variantes podem ser combinadas em um mesmo contexto para ajudar a ler rapidamente o status de diferentes elementos ou informações.
Utilizamos o componente Tag para ajudar o usuário a entender o estado de diferentes elementos, os categorizando por meio das variantes e usando seus elementos para dar suporte a essa comunicação.
Componente Chip - Usado para categorizar dados dentro de um filtro ou resultado de busca. Componente Badge - Usado para destacar quantidades de itens dentro de uma seção ou 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. |