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.
Emblemas customizados
Você pode usar a propriedade overlap para colocar o emblema em relação ao canto do elemento envolvido.
Visibilidade do emblema
Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.
Visibilidade do emblema
A visibilidade dos emblemas pode ser controlada usando a propriedade invisible.
The badge hides automatically when badgeContent is zero. Você pode sobrescrever isso com a propriedade showZero.
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.
Alinhamento do emblema
Você pode usar a propriedade overlap para colocar o emblema em relação ao canto do elemento envolvido.
Alinhamento do emblema
Você pode usar a propriedade anchorOrigin para mover o emblema para qualquer canto do elemento envolvido.
<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:
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.