BadgeBadge

O Badge exibe informações dinâmicas, como contagens ou indicadores de status. Pode conter texto ou números.

Como usar

Importe o componente quando necessário:

import 'mdui/components/badge.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Badge } from 'mdui/components/badge.js';

Exemplo de uso:

<mdui-badge>12</mdui-badge>

Exemplos

Variante

Use o atributo variant para definir a variante do badge. Quando variant é large, um badge grande será exibido. Você também pode adicionar o texto a ser exibido no slot padrão.

99+

<mdui-badge variant="small"></mdui-badge>
<mdui-badge variant="large">99+</mdui-badge>

Fonte

API

Propriedades

Atributo Propriedade Reflect Tipo Padrão

variant variant 'small' | 'large' 'large'

Atributo	Propriedade	Reflect	Tipo	Padrão
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Forma do badge. Os valores possíveis são: `small`: Badge pequeno, não exibe texto. `large`: Badge grande, exibe texto.

Forma do badge. Os valores possíveis são:

small: Badge pequeno, não exibe texto.
large: Badge grande, exibe texto.

Slots

Nome
(padrão)
Texto exibido no badge.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

Avatar Avatar

Próximo capítulo

BottomAppBar Barra de aplicativo inferior