Skip to content
Cloudflare Docs

Badges

Badges are a built-in component provided by Starlight ↗. Use them to indicate a product is in beta, for example.

Component

New Deprecated Starlight Custom 
import { Badge } from "~/components";


<Badge text="New" variant="tip" size="small" />
<Badge text="Deprecated" variant="caution" size="medium" />
<Badge text="Starlight" variant="note" size="large" />
<Badge text="Custom" variant="success" style={{ fontStyle: "italic" }} />

Badges can be added to the sidebar via page frontmatter.

---
title: Hello World
sidebar:
  badge:
    variant: tip
    text: New
---

If you want to add the Beta badge to a product, omit the variant: entry:

---
title: Hello World
sidebar:
  badge:
    text: Beta
---
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings