FeedbackAvailable

Badge

Compact label for status, categories, and small pieces of information.

CompletedIn progress

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/badge.json

Import the component into your project and keep the source code under your control.

tsx

import { Badge } from "@/components/ui/badge"

export function Example() {
  return <Badge variant="success">Completed</Badge>
}

Visual options included in the component’s official API.

DefaultNewCompletedReviewIn progressRequiredDraft

Appearance, behavior and keyboard checks.

A surface or content, not a control by default. No artificial hover, pressed or focus state.
Internal actions use Button or links. Informational states need text as well as color.

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
variant	default \| secondary \| success \| warning \| info \| destructive \| outline	default	Represents intent or status.

Rules that should remain intact when adapting the component to a product.

Always pair color with text.

For dynamic states, use an external aria-live container.

Keep labels short and understandable.