Badge
Badge são indicadores de status utilizados para tornar evidentes metadados importantes.
Quando usar
- For necessário mostrar status associados com a lógica de negócio ou ações do usuário.
- O conteúdo a ser mostrado for readonly.
- For preciso categorizar algo.
Quando não usar
- O conteúdo que a badge representa puder ser setado ou removido pelo usuário.
- O click no componente precisar executar uma ação ou funcionalidade.
Uso
js
<CdsBadge
variant="red"
size="md"
>
Badge
</CdsBadge>Preview
Badge
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'gray' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
size | string | 'md' | sm md lg | Especifica o tamanho da badge. São 3 tamanhos implementados. |
clickable | boolean | false | -- | Especifica o tamanho da badge. São 3 tamanhos implementados: 'sm', 'md', 'lg'. |
Eventos
Nome | Descrição |
|---|---|
@click | Evento que indica se a Badge foi clicada |
Slots
Nome | Descrição |
|---|---|
#default | Slot padrão utilizado para exibir o conteúdo dentro da badge |