saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Badge

Badge

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

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/badge

Usage

import { Badge } from "@/components/ui/badge"
<Badge variant="default">Badge</Badge>

Examples

Variants

Loading...
All badge style variants.

With Icon

Loading...
Badge with a verified icon.

Circular

Loading...
Circular badges with numbers.

With Dot

Loading...
Badges with colored dot indicators.

Closable

Loading...
Dismissible badge.

API Reference

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline""default"The visual style variant.

On This Page

  • Installation
  • Usage
  • Examples
  • Variants
  • With Icon
  • Circular
  • With Dot
  • Closable
  • API Reference
ShootingIn ReviewPending ApprovalHoldWrapped
DefaultSecondaryDestructiveOutline
Verified
51299+
CompletedPendingError
ReactTypeScriptTailwind