StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Badge } from "stofli-ui";

Cargando...

El componente Badge se utiliza para mostrar etiquetas, estados o contadores.

Cargando...

Muestra diferentes variantes del badge.

Cargando...

Usando la prop size: sm, md y lg.

Cargando...

Usando withDot y opcionalmente dotColor para personalizar el color del punto.

Cargando...

Usando la prop icon para agregar un icono al badge.

Cargando...

Usando dismissible para permitir que el badge pueda ser eliminado.

Cargando...

Usando la prop radius: none, sm, md y full.

Cargando...

Combinando el Badge con el componente Avatar para notificaciones o estados de usuario.

Cargando...

Combinando el Badge con iconos para mostrar notificaciones o estados.

Cargando...

Puedes personalizar cualquier parte del badge usando las propiedades de className con clases de Tailwind CSS.

Cargando...

Prop	Tipo	Default	Descripción
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "outline"`	`"default"`	Variante de estilo
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tamaño del badge
`radius`	`"none" \| "sm" \| "md" \| "full"`	`"full"`	Radio de las esquinas
`withDot`	`boolean`	`false`	Muestra un punto indicador
`dotColor`	`string`	-	Color personalizado para el punto
`icon`	`ReactNode`	-	Icono a mostrar
`onClick`	`() => void`	-	Función llamada al hacer clic
`dismissible`	`boolean`	`false`	Permite que el badge sea eliminado
`className`	`string`	-	Clases adicionales para el badge completo
`dotClassName`	`string`	-	Clases adicionales para el punto indicador
`iconClassName`	`string`	-	Clases adicionales para el icono
`contentClassName`	`string`	-	Clases adicionales para el contenido textual
`ariaLabel`	`string`	-	Etiqueta ARIA personalizada para el badge
`dotAriaLabel`	`string`	`"Indicador de estado"`	Etiqueta ARIA para el punto indicador
`dismissAriaLabel`	`string`	`"Eliminar badge"`	Etiqueta ARIA para la acción de eliminar
`id`	`string`	-	ID personalizado para el badge

Badge