Pular para o conteúdo
Ajude a traduzir esta página

Badge API

Documentação da API para o componente React Badge . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Badge from '@mui/material/Badge';
// ou
import { Badge } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiBadge can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente BadgeUnstyled também estão disponíveis.

NomeTipoPadrãoDescrição
anchorOrigin{ horizontal: 'left'
| 'right', vertical: 'bottom'
| 'top' }		{ vertical: 'top', horizontal: 'right', }
The anchor of the badge.
badgeContentnode
The content rendered within the badge.
childrennode
The badge will be added relative to this node.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'default'
A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
components{ Badge?: elementType, Root?: elementType }{}
The components used for each slot inside the Badge. Either a string to use a HTML element or a component.
componentsProps{ badge?: object, root?: object }{}
The props used for each slot inside the Badge.
invisibleboolfalse
If true, the badge is invisible.
maxnumber99
Max count to show.
overlap'circular'
| 'rectangular'		'rectangular'
Wrapped shape the badge should overlap.
showZeroboolfalse
Controls whether the badge is hidden when badgeContent is zero.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'dot'
| 'standard'
| string		'standard'
A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente BadgeUnstyled também estão disponíveis em Badge. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
root.MuiBadge-rootStyles applied to the root element.
badge.MuiBadge-badgeClass name applied to the badge `span` element.
dot.MuiBadge-dotClass name applied to the badge `span` element if variant="dot".
standard.MuiBadge-standardClass name applied to the badge `span` element if variant="standard".
anchorOriginTopRight.MuiBadge-anchorOriginTopRightClass name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }}.
anchorOriginBottomRight.MuiBadge-anchorOriginBottomRightClass name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }}.
anchorOriginTopLeft.MuiBadge-anchorOriginTopLeftClass name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }}.
anchorOriginBottomLeft.MuiBadge-anchorOriginBottomLeftClass name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }}.
invisible.MuiBadge-invisiblePseudo-class aplicada a the badge `span` element se invisible={true}.
colorPrimary.MuiBadge-colorPrimaryEstilos aplicados para the badge `span` element se color="primary".
colorSecondary.MuiBadge-colorSecondaryEstilos aplicados para the badge `span` element se color="secondary".
colorError.MuiBadge-colorErrorEstilos aplicados para the badge `span` element se color="error".
colorInfo.MuiBadge-colorInfoStyles applied to the badge `span` element if color="info".
colorSuccess.MuiBadge-colorSuccessStyles applied to the badge `span` element if color="success".
colorWarning.MuiBadge-colorWarningStyles applied to the badge `span` element if color="warning".
anchorOriginTopRightRectangular.MuiBadge-anchorOriginTopRightRectangularClass name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }} overlap="rectangular".
anchorOriginBottomRightRectangular.MuiBadge-anchorOriginBottomRightRectangularClass name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular".
anchorOriginTopLeftRectangular.MuiBadge-anchorOriginTopLeftRectangularClass name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }} overlap="rectangular".
anchorOriginBottomLeftRectangular.MuiBadge-anchorOriginBottomLeftRectangularClass name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular".
anchorOriginTopRightCircular.MuiBadge-anchorOriginTopRightCircularClass name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }} overlap="circular".
anchorOriginBottomRightCircular.MuiBadge-anchorOriginBottomRightCircularClass name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }} overlap="circular".
anchorOriginTopLeftCircular.MuiBadge-anchorOriginTopLeftCircularClass name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }} overlap="circular".
anchorOriginBottomLeftCircular.MuiBadge-anchorOriginBottomLeftCircularClass name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }} overlap="circular".
overlapRectangular.MuiBadge-overlapRectangularClass name applied to the badge `span` element if overlap="rectangular".
overlapCircular.MuiBadge-overlapCircularClass name applied to the badge `span` element if overlap="circular".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações