badge
Badge é um pequeno texto usado para representar situação, propriedade e outras informações.
índice
demo interativa
Uma versão de interativa do componente desenvolvido. Por ser um componente em fase Beta, algumas variações e especificações do componente podem não estar disponíveis ainda.
badge default
propriedades*
property | description | required | default value | type |
---|---|---|---|---|
variation | Badge style variation | false | primary | neutral primary info success alert error |
showIcon | show icon at render | false | true | boolean |
icon | An Icon component from | false | undefined | ElementType<any> |
*valores gerados automaticamente.
propriedades para estilização (styled props)
Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system
para atender cenários não mapeados:
badge filter
badge filter (close button)
propriedades*
property | description | required | default value | type |
---|---|---|---|---|
selected | Indicates if the badge is selected. | false | false | boolean |
disabled | Indicates if the badge is disabled. | false | false | boolean |
id | false | undefined | string | |
isOpen | Indicates if the badge is displayed. | false | true | boolean |
showIcon | Indicates if the selected icon is displayed. | false | true | boolean |
onClose | Event fired when user clicks on close button | false | undefined | () => void |
onChange | Event fired when user clicks on close button | false | undefined | () => void |
*valores gerados automaticamente.
badge notification
propriedades*
property | description | required | default value | type |
---|---|---|---|---|
countNotifications | The number of notifications. | false | undefined | number |
variation | Badge variation. | false | alert | neutral primary info alert notice accent |
*valores gerados automaticamente.
formatação
- Icon: ícone que auxília na identificação do estado da badge.
- Label: texto que trás a característica do componente associado à badge.
uso
É utilizada para usado para representar situação, propriedade e outras informações.
variações
variação | utilização |
---|---|
status badge | Para alertar a situação em que um objeto se encontra. |
category badge | Para enquadrar um elemento a uma categoria. |
filter | Para facilitar a identificação de um objeto reduzindo o número de opções na tela. |
notification | Para alertar o número de eventos relacionados a um objeto. |
grupos e alinhamento
Normalmente a badge é usada próxima a um outro componente ao qual ela se refere, como um produto, uma linha da tabela ou mesmo um link de menu.
guia de conteúdo
- Pequeno texto que descreva a categoria ou situação do objeto;
- Número de eventos relacionado a badge;
- Ícone que reforça o status da badge;
- Círculo vazio quando há necessidade de informar que algo mudou, sem especificar o que, mas há pouco espaço disponível na tela.
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Use os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
conteúdo relacionado
Migração do United para Olist Design System
Propriedades
United | Olist Design System |
---|---|
variation | variation |
pill | <FilterBadge /> |
circle | <BadgeNotification /> |
❌ | showIcon |
❌ | icon |
❌ | selected (FilterBadge) |
❌ | disabled (FilterBadge) |
❌ | id (FilterBadge) |
❌ | isOpen (FilterBadge) |
❌ | onClose (FilterBadge) |
❌ | onChange (FilterBadge) |
❌ | countNotifications (BadgeNotification) |
Variações Existentes
United | Olist Design System |
---|---|
primary | primary |
info | info |
success | success |
error | error |
danger | error |
alternate | ❌ |
default | neutral |
positive | primary |
attention | alert |
inactive | neutral |
news | info |
dark | ❌ |
light | ❌ |
secondary | ❌ |
warning | alert |