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 | neutralprimaryinfosuccessalerterror |
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 | neutralprimaryinfoalertnoticeaccent |
*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 |