Docs
Badge

Badge

Small status descriptors for UI elements.

Default

Badge

Variants

Default
Secondary
Destructive
Outline
Ghost
Link

Special Variants

Success
Warning
Info

Sizes

XS
SM
MD
LG

Shapes

Default
Rounded
Square

Installation

Run the following command:

Update your imports:
import { Badge } from "@/components/ui/badge"

Usage

import { Badge } from "@/components/ui/badge";
 
export default function Home() {
  return (
    <Badge>New</Badge>
  );
}

Props

PropTypeDefaultDescription
variantdefault | secondary | destructive | outline | ghost | link | success | warning | infodefaultStyle variant of the badge
sizexs | sm | md | lgmdSize of the badge
shapedefault | rounded | squaredefaultShape variant of the badge
classNamestring-Additional CSS classes

Supported HTML Attributes

Because the Badge uses a standard HTML div element, it inherits and supports all standard HTML div attributes, including:
  • id
  • onClick
  • role
  • tabIndex
  • aria-* attributes
  • data-* attributes
  • Event handlers like onMouseEnter, onFocus, etc.
The Badge component ensures proper accessibility and semantic HTML.