Badges

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

Component

To adopt this styling in a React component, apply the sl-badge class to a span element.

Note Success Tip Caution Danger Default

import { Badge } from "~/components";

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="Danger" variant="danger" />
<Badge text="Default" />

Sidebar

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
---