Docs
Badge

Badge

A versatile component for displaying small pieces of information or status indicators.

Settings

Features

  • Customizable Variants: Easily switch between different visual styles such as default, info, warning, success, and outline.
  • Resizable: Adjust the badge size with options like sm, md, and lg.
  • Interactive: Includes built-in hover effects and focus states for better user interaction.
  • Transition Effects: Smooth transition effects for hover states.

Installation

npx duck-ui@latest add badge

Usage

import { Badge, TooltipProvider } from "@/components/ui"
<TooltipProvider>
  <Badge variant="outline"> Badge</Badge>
</TooltipProvider>

Link

You can use the badgeVariants helper to create a link that looks like a badge.

import { badgeVariants } from "@/components/ui"
<Link className={badgeVariants({ variant: "outline" })}> Badge</Link>

Badge Component

Badge represents a small, rounded element used to display status or counts.

Key Properties

  • className (string, optional): Additional classes to apply to the badge.

  • variant (Variant, optional): Defines the visual style of the badge (e.g., default, secondary, destructive, outline).

  • size (Size, optional): Defines the size of the badge (e.g., default, sm, lg, icon).

  • label (LabelType, optional): Label text or tooltip content to display with the badge.

  • ...props (React.HTMLAttributes<HTMLDivElement>): Additional HTML attributes to apply to the badge element.

Variant

The variant property determines the visual style of the badge.

Variants

  • default: The primary style of the badge, with a background color defined by the primary theme.

  • secondary: A secondary style using the secondary color scheme.

  • destructive: A style intended for actions that might have irreversible effects, using the destructive color scheme.

  • outline: A minimal style with just an outline and no background color.

Size

The size property determines the size of the badge.

Sizes

  • default: The default badge size, balanced for most use cases.

  • sm: A smaller badge with reduced padding and font size.

  • lg: A larger badge with increased padding and font size, for emphasis.

  • icon: A badge designed to only contain an icon, with equal height and width.

LabelType

LabelType defines the properties for label or tooltip content associated with the badge.

Key Properties

  • children (React.ReactNode, optional): The content to display inside the tooltip.

  • className (string, optional): Additional classes to apply to the tooltip content.

AlertDialogButton