1. Docs
  3. Components
  5. Badge

Badge

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

Installation

npx shadcn@latest add @kanpeki/badge

Anatomy

import { Badge } from "~/components/ui/badge";

<Badge variant="outline">Badge</Badge>

Link

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

import { BadgeStyles } from "~/components/ui/badge";

<Link className={BadgeStyles({ variant: "outline" })}>Badge</Link>

Examples

Secondary

Outline

Destructive

API Reference

PropTypeDefault
variant
enum
"default"
AvatarBreadcrumb