ComponentsCore

Badge

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

Example

Installation

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.

lib/utils.ts

Copy and paste the following code into your project.

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.

Props

Loading types…

Edit on GitHub

Alert

A styled text component for highlighting important information, warnings, or contextual messages within a UI.

Loader

A sleek, lightweight loading indicator designed to elevate user experience by clearly signaling ongoing background activity with smooth, modern animations.