Documentation

Badge

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

Shadcn UI

Installation

pnpm add @notion-kit/ui

Options

Variant

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

Size

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

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.

Autocomplete

A Base UI autocomplete composed with Notion-style menu groups, items, labels, and separators.

Button

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

On this page

InstallationOptionsVariantSizeAPI ReferenceBadge