BadgeBadge

El componente Badge se usa para mostrar información dinámica, como recuentos o indicadores de estado. Puede contener texto o números.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/badge.js';

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

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

Ejemplos

Forma

El atributo variant define la forma del Badge. Cuando variant es large, se mostrará un Badge grande. También puedes definir el texto que se mostrará en el slot por defecto.

99+

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

Fuente

API

Propiedades

Atributo Propiedad Reflect Tipo Predeterminado

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

Atributo	Propiedad	Reflect	Tipo	Predeterminado
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Variante del badge. Los valores posibles son: `small`: Badge pequeño, sin texto `large`: Badge grande, muestra texto

Variante del badge. Los valores posibles son:

small: Badge pequeño, sin texto
large: Badge grande, muestra texto

Slots

Nombre
(predeterminado)
Texto que se muestra en el badge.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

Avatar Avatar

Capítulo siguiente

BottomAppBar Bottom App Bar