Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Badge

Badge

Displays a badge or a component that looks like a badge.

BadgeSecondaryDestructiveOutline
Verified89920+

Installation

npx shadcn@latest add https://ui.saturation.io/r/badge.json

Usage

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

export function BadgeDemo() {
  return <Badge>Badge</Badge>
}

Examples

Variants

DefaultSecondaryDestructiveOutline

With Icon

Verified

Circular

89920+

With Dot

CompletedPendingErrorIn Progress

Closable

Closable

API Reference

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline""default"The visual style of the badge
classNamestring-Additional CSS classes

On This Page

  • Installation
  • Usage
  • Examples
  • Variants
  • With Icon
  • Circular
  • With Dot
  • Closable
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.