Badges are inline labels that signal the status of a feature or page. They're small enough to drop next to a heading or in a sentence without disrupting the flow.
Examples#
Default Beta New Pro plan Deprecated
Insert#
Use the slash menu: /badge. The badge is inline — it lives next to text, not on its own line. Click the badge after inserting to change its color, size, shape, or label from the inspector panel.
Settings#
| Setting | Values | Default | Description |
|---|---|---|---|
| Color | Gray, Blue, Green, Yellow, Orange, Red, Purple | Gray | Background and text color |
| Size | XS, SM, MD, LG | MD | Visual size |
| Shape | Rounded, Pill | Rounded | Corner radius |
| Icon | Lucide icon name | none | Optional inline icon |
| Stroke | on/off | off | Outline-only variant |
| Label | text | required | Keep it short — one or two words |
Common patterns#
- Plan-gating — drop a yellow "Pro" badge next to a heading so readers see at a glance that the feature requires Pro.
- New / Beta tags — green "New" or blue "Beta" next to feature names in your changelog or sidebar.
- Deprecated APIs — red "Deprecated" next to the API name. Always pair with a callout explaining the replacement:
Deprecated
Use client.users.get() instead. fetch() will be removed in v2.0.
When not to use a Badge#
- Don't put more than one Badge on the same heading. It looks busy.
- Don't use Badges for marketing language ("Awesome!", "Hot!"). They're informational, not promotional.
- Don't use a Badge where a Callout would carry the message better. Badges are flags, not warnings.