Badge

El componente Badge se utiliza para mostrar pequeñas etiquetas de notificación o información adicional sobre otro elemento.

Uso

import { Badge } from "essential-materials";

Ejemplos

Basico

Uso basico del Badge.

1

Tamaños

Se puede colocar en dos tamaños: "small", "medium".

1

1

Posicion

Se puede colocar en cuatro posiciones: "top-right", "top-left", "bottom-right", "bottom-left".

1

1

1

1

Variantes/Colores

Todas las variantes que se pueden colocar.

1

1

1

1

1

1

1

API

Propiedad	Tipo	Descripción	Valores posibles	Default
variant	"default" | "success" | "warning" | "error"	Define el estilo del badge	"default", "success", "warning", "error"	"default"
content	string | number	Contenido del badge	Texto o número	undefined
size	"small" | "medium" | "large"	Tamaño del badge	"small", "medium", "large"	"medium"
position	"top-left" | "top-right" | "bottom-left" | "bottom-right"	Posición del badge respecto al elemento hijo	"top-left", "top-right", "bottom-left", "bottom-right"	"top-right"
isVisible	boolean	Determina si el badge se muestra	true, false	true
className	string	Clases CSS adicionales	Clases personalizadas	""
children	ReactNode	Elemento sobre el cual se posiciona el badge	Cualquier componente válido en React	undefined