FeedbackDisponible
Badge
Etiqueta compacta para estados, categorías y pequeñas cantidades de información.
CompletedIn progress
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/badge.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
import { Badge } from "@/components/ui/badge"
export function Example() {
return <Badge variant="success">Completed</Badge>
}Variantes
Opciones visuales incluidas en la API oficial del componente.
DefaultNewCompletedReviewIn progressRequiredDraft
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
- Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| variant | default | secondary | success | warning | info | destructive | outline | default | Representa intención o estado. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
El color siempre se acompaña de texto.
Para estados dinámicos, usa un contenedor aria-live externo.
Mantén las etiquetas breves y comprensibles.