Badge
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;O componente é composto por um texto estilizado, além de um background que pode variar de cor conforme a comunicação.
Utilizamos esse componente para ajudar o usuário a identificar quantidades de itens pendentes que requerem uma ação.
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.
Essa variante é utilizada quando temos um contexto neutro, relacionado ao número informado pelo Badge, porém o destaque visual não é essencial.
Essa variante é utilizada quando temos um contexto neutro, relacionado ao número informado pelo Badge, porém o destaque visual é essencial.
Essa variante é utilizada quando temos um contexto positivo, relacionado ao número informado pelo Badge.
Essa variante é utilizada quando temos um contexto de intermediário, relacionado ao número informado pelo Badge.
Essa variante é utilizada quando temos um contexto negativo, relacionado ao número informado pelo Badge.
- Destacar itens pendentes
- Destacar quantidades de itens
- 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.
Instale o componente via terminal.
npm install @nimbus-ds/badgeAdditional props are passed to the <Badge> element. See div docs for a list of props accepted by the <Badge> element.