Badge

3.1.2

O componente Badge nos permite comunicar quantidades de itens ou ações pendentes.

import React from "react";
import { Badge } from "@nimbus-ds/components";

const Example: React.FC = () => <Badge count="+99" theme="light" />;

export default Example;

Anatomia do componente

O componente é composto por um texto estilizado, além de um background que pode variar de cor conforme a comunicação.

Guidelines

Utilizamos esse componente para ajudar o usuário a identificar quantidades de itens pendentes que requerem uma ação.

Estados possíveis

O componente Badge possui 5 estados possíveis, podendo ser usados de acordo com a urgência da comunicação e a quantidade de itens.

Neutral

Essa variante é utilizada quando temos um contexto neutro, relacionado ao número informado pelo Badge, porém o destaque visual não é essencial.

Primary

Essa variante é utilizada quando temos um contexto neutro, relacionado ao número informado pelo Badge, porém o destaque visual é essencial.

Success

Essa variante é utilizada quando temos um contexto positivo, relacionado ao número informado pelo Badge.

Warning

Essa variante é utilizada quando temos um contexto de intermediário, relacionado ao número informado pelo Badge.

Danger

Essa variante é utilizada quando temos um contexto negativo, relacionado ao número informado pelo Badge.

Recomendações de uso

Destacar itens pendentes
Destacar quantidades de itens

Componentes relacionados

Tag - Usado para categorizar informações, organizar ou indicar status de elementos ou componentes usando palavras-chave, ícones ou cores.
Chip - Usado para categorizar dados dentro de um filtro ou resultado de busca.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/badge

Props

Additional props are passed to the <Badge> element. See div docs for a list of props accepted by the <Badge> element.

Badge

Name	Type	Default	Description
appearance	'danger' 'neutral' 'primary' 'success' 'warning'	'neutral'	Change the visual style of the badge.
count*	'string' 'number'		Total items to be displayed without badge
theme	'light' 'surface'	'surface'	Change the color scheme of the badge.

Badge.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.
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.