Badge

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

Badge

default.tsx

<Badge>Badge</Badge>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/badge

Anatomy

import { Badge } from "@/components/core/badge";

<Badge>Badge</Badge>;

Options

Variant

Use the variant prop to control the visual style of the Badge. The default variant is primary.

neutralaccentsuccessdangerwarninginfo

variants.tsx

<Badge variant="neutral">neutral</Badge>
<Badge variant="accent">accent</Badge>
<Badge variant="success">success</Badge>
<Badge variant="danger">danger</Badge>
<Badge variant="warning">warning</Badge>
<Badge variant="info">info</Badge>

Size

Use the size prop to control the size of the Badge. The default variant is sm.

SmallMediumLarge

sizes.tsx

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Examples

With icon

BadgeBadgeBadge

icon.tsx

<Badge size="sm"><ShieldIcon />Badge</Badge>
<Badge size="md"><ShieldIcon />Badge</Badge>
<Badge size="lg"><ShieldIcon />Badge</Badge>

API Reference

Badge accepts all HTML span element props and the following:

Prop	Type	Default	Description
`neutral`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'info' \| 'danger'`	The visual style of the badge.
`size`	`'sm' \| 'md' \| 'lg'`	`"sm"`	The size of the badge.

Last updated on 9/15/2025

Avatar Breadcrumbs

On this page

Installation Anatomy Options Variant Size Examples With icon API Reference

Badge

Installation

Anatomy

Options

Variant

Size

Examples

With icon

API Reference

Product

Community

Support