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 />
</Badge>
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>Emblemas customizados
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.
<IconButton aria-label="cart">
<StyledBadge badgeContent={4} color="secondary">
<ShoppingCartIcon />
</StyledBadge>
</IconButton>Visibilidade do emblema
A visibilidade dos emblemas pode ser controlada usando a propriedade invisible.
O emblema se esconde automaticamente quando o badgeContent é zero. Você pode sobrescrever isso com a propriedade showZero.
<Badge color="secondary" badgeContent={0}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
<MailIcon />
</Badge><Badge badgeContent={99} {...defaultProps} />
<Badge badgeContent={100} {...defaultProps} />
<Badge badgeContent={1000} max={999} {...defaultProps} />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.
Typography
<Badge color="secondary" variant="dot">
<MailIcon />
</Badge>
<Badge color="secondary" variant="dot">
<Typography>Typography</Typography>
</Badge>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>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',
}}
><StyledBadge badgeContent={5} overlap="circular" sx={{ mr: 2 }}>
<BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot" overlap="circular">
<BadgeContent />
</StyledBadge>