Badge

BadgeSecondaryDestructiveOutline

"use client"

import { Badge } from "uilab-core"

export function BadgePreview() {

Usage

import { Badge } from "uilab-core"

<Badge variant="default | outline | secondary | destructive">Badge</Badge>

Examples

Basic

Use the variant prop to change the variant of the badge.

DefaultSecondaryDestructiveOutlineGhost

"use client"

import { Badge } from "uilab-core"

export function BadgeVariantsExample() {

Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

VerifiedBookmark

"use client"

import { Badge } from "uilab-core"
import { BadgeCheck, BookmarkIcon } from "lucide-react"

Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

DeletingGenerating

"use client"

import { Badge, Spinner } from "uilab-core"

export function BadgeSpinnerExample() {

Link

Use the render prop to render a link as a badge.

Open Link

"use client"

import { Badge } from "uilab-core"
import { ArrowUpRightIcon } from "lucide-react"

export function BadgeLinkExample() {
  return (
    <Badge render={<a href="#link">Open Link <ArrowUpRightIcon data-icon="inline-end" /></a>} />
  )
}

Custom colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

BlueGreenSkyPurpleRed