Pular para o conteúdo

Emblema

O componente Badge gera um pequeno emblema no canto superior direito de seu(s) filho(s).

Emblemas básicos

Exemplos de emblemas contendo texto, usando cores primárias e secundárias. O emblema é aplicado aos seus filhos.

4
Press Enter to start editing

Emblemas customizados

Você pode usar a propriedade overlap para colocar o emblema em relação ao canto do elemento envolvido.

44
Press Enter to start editing

Visibilidade do emblema

Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.

Press Enter to start editing

Visibilidade do emblema

A visibilidade dos emblemas pode ser controlada usando a propriedade invisible.

1

The badge hides automatically when badgeContent is zero. Você pode sobrescrever isso com a propriedade showZero.

0
Press Enter to start editing

Valor máximo

Você pode usar a propriedade max para limitar o valor do conteúdo do emblema.

9999+999+
Press Enter to start editing

Emblema como ponto

A propriedade dot altera um emblema para um pequeno ponto. Isto pode ser usado como uma notificação de que algo mudou sem fornecer uma contagem.

Press Enter to start editing

Alinhamento do emblema

Você pode usar a propriedade overlap para colocar o emblema em relação ao canto do elemento envolvido.

Press Enter to start editing

Alinhamento do emblema

Você pode usar a propriedade anchorOrigin para mover o emblema para qualquer canto do elemento envolvido.

Vertical
Horizontal
11299+999+
<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

Accessibility

You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with aria-label:

Press Enter to start editing

Unstyled

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.