Badges

Using Badges

Badges are small labels we can use to highlight a status, a version, or something new.

I use Badges to mark content as New, Beta, or Deprecated.

Importing Badges in the mdx file

After the frontmatter of the mdx file, add the following import:

import { Badge } from '@astrojs/starlight/components';

Creating a simple badge

By default the badge uses the site’s accent color:

Default

<Badge text="Default" />

Color variants

We can use the variant property to choose the badge color:

Note Success Tip Caution Danger

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

Sizes

We can use the size property to change the badge size:

Small Medium Large

<Badge text="Small" variant="success" size="small" />
<Badge text="Medium" variant="success" size="medium" />
<Badge text="Large" variant="success" size="large" />

Badge inside headings

We can place a badge next to a heading to highlight something new:

## New feature <Badge text="New" variant="success" />

New feature New

Custom style

We can use the style property to create a badge with its own styling:

Custom

<Badge text="Custom" variant="note" style={{ fontStyle: 'italic' }} />

Badge in the sidebar

We can add a badge to a specific sidebar page using the file’s frontmatter:

---
title: My page
sidebar:
  badge:
    text: New
    variant: success
---

To add a badge to a starlight-sidebar-topics topic, use the badge property in astro.config.mjs:

{
  label: 'Neovim IDE',
  link: '/neovim/intro',
  badge: { text: 'New', variant: 'success' },
  items: [],
}