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.
<Badge badgeContent={4} color="primary">
<MailIcon color="action" />
</Badge>
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.
<Badge badgeContent={4} color="secondary">
<MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
<MailIcon color="action" />
</Badge>
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.
<IconButton aria-label="cart">
<StyledBadge badgeContent={4} color="secondary">
<ShoppingCartIcon />
</StyledBadge>
</IconButton>
Press Enter to start editing
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.
<Badge color="secondary" badgeContent={0}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
<MailIcon />
</Badge>
Press Enter to start editing
Valor máximo
Você pode usar a propriedade max para limitar o valor do conteúdo do emblema.
<Badge color="secondary" badgeContent={99}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={100}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={1000} max={999}>
<MailIcon />
</Badge>
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.
<Badge color="secondary" variant="dot">
<MailIcon />
</Badge>
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.
<Badge color="secondary" badgeContent=" ">
{rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
{rectangle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" ">
{circle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
{circle}
</Badge>
Press Enter to start editing
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:
<IconButton aria-label={notificationsLabel(100)}>
<Badge badgeContent={100} color="secondary">
<MailIcon />
</Badge>
</IconButton>
Press Enter to start editing
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.