Notion UI
Documentation

Badge

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

Shadcn UI

badge
<Badge>badge</Badge>

Installation

pnpm add @notion-kit/shadcn

Options

Variant

Use the variant prop to control the visual style of the badge.
The default variant is "default".

default
gray
blue
orange
tag
<Badge variant="default">default</Badge>
<Badge variant="gray">gray</Badge>
<Badge variant="blue">blue</Badge>
<Badge variant="orange">orange</Badge>
<Badge variant="tag">tag</Badge>

Size

Use the size prop to control the text size of the badge. The default size is "md".

badge
badge
<Badge size="sm">badge</Badge>
<Badge size="md">badge</Badge>

API Reference

Badge

An Badge extends the HTML <div> component. We list the extended properties only.

PropTypeDefaultDescription
variant"default" | "gray" | "blue | "orange" | "tag" | null"default"The visual style of the badge.
size"sm" | "md""md"The size of the badge.

Previous

Installation

Next

Button

On this page