ComponentsCore
Badge
A small label used to display statuses, counts, or notifications.
Example
Usage
Installation
Required Component
This component depends on Field. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slotAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add badgeAnatomy
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.
Usage
Props
Loading types…