Badge

Badge

A small label used to display statuses, counts, or notifications.

Example

DefaultSecondaryDestructiveOutlineSuccessWarningInfo

Verified89920+

Usage

Installation

Required Component

This component depends on Field. Make sure you have installed and configured it before using this component.

Field

The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.

Install following dependencies:

npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

TypeScript

JavaScript

lib/utils.ts

Copy and paste the following code into your project.

TypeScript

JavaScript

components/ui/core/badge.tsx

npx libravelui@latest add badge

Anatomy

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

<Badge tone="default">Default</Badge>
<Badge tone="secondary">Secondary</Badge>
<Badge tone="destructive">Destructive</Badge>
<Badge tone="outline">Outline</Badge>

Another Example

As Child

Displays different types of badges used to indicate status or categories with flexible styling that can be applied directly to other elements without adding extra DOM nodes.

Click Me!