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.

Installation

How to install Notion UIs and structure your app.

Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

On this page

InstallationOptionsVariantSizeAPI ReferenceBadge