Pure UI
DocsComponentsBlocksNEW
132

Docs

IntroductionGet Started
Installation
Theming

Components

AccordionAvatarBadgeButtonButton GroupCalendarCardCheckboxCollapsibleCombobox
Detached Triggers
DialogInputInput GroupInput OTPKbdLabelMenuNumber FieldPopoverRadio GroupNEWScroll AreaSelectSeparatorSheetSpinnerSwitchTabsNEWTextareaToastTooltip

Badge

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

Badge

Installation

Loading content...

Usage

import { Badge } from "@/components/ui/badge";
<Badge
  variant="default | outline | secondary | destructive"
  shape="simple | bar | dot"
>
  Badge
</Badge>

Shape

You can use the shape prop to change the shape of the badge.

Simple

Simple

Bar

Bar

Dot

Dot

Variants

You can use the variant prop to change the variant of the badge.

Default

Default

Destructive

Destructive

Secondary

Secondary

Outline

Outline

Custom

You can customize the badge as you want.

L. NorrisG. RusselO. BearmanM. VerstappenC. SainzN. HulkenbergL. Stroll