# Badges

To display small pieces of information, such as a status or category, use the `<Badge>` component.

New

## Import

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

## Usage

Display a badge using the `<Badge>` component and pass the content you want to display to the [`text`](#text) attribute of the `<Badge>` component.

By default, the badge will use the theme accent color of your site.
To use a built-in badge color, set the [`variant`](#variant) attribute to one of the supported values.

```mdx
import { Badge } from '@astrojs/starlight/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" />
```

```markdoc
- {% 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" /%}
```

- Note
- Success
- Tip
- Caution
- Danger

### Use different sizes

Use the [`size`](#size) attribute to control the size of the badge text.

```mdx /size="\w+"/
import { Badge } from '@astrojs/starlight/components';

- <Badge text="New" size="small" />
- <Badge text="New and improved" size="medium" />
- <Badge text="New, improved, and bigger" size="large" />
```

```markdoc /size="\w+"/
- {% badge text="New" size="small" /%}
- {% badge text="New and improved" size="medium" /%}
- {% badge text="New, improved, and bigger" size="large" /%}
```

- New
- New and improved
- New, improved, and bigger

### Customize badges

Customize badges by using any other `<span>` attributes such as `class` or `style` with custom CSS.

```mdx "style={{ fontStyle: 'italic' }}"
import { Badge } from '@astrojs/starlight/components';

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

```markdoc 'style="font-style: italic;"'
{% badge text="Custom" variant="success" style="font-style: italic;" /%}
```

Custom

## `<Badge>` Props

**Implementation:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/src/user-components/Badge.astro)

The `<Badge>` component accepts the following props and also any [other `<span>` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes):

### `text`

**required**\
**type:** `string`

The text content to display in the badge.

### `variant`

**type:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'`\
**default:** `'default'`

The badge color variant to use: `note` (blue), `tip` (purple), `danger` (red), `caution` (orange), `success` (green), or `default` (theme accent color).

### `size`

**type:** `'small' | 'medium' | 'large'`

Defines the size of the badge to display.

## Related pages

- [Starlight](../index.md)
- [Using Components](./components-using-components.md)
- [Pages](./guides-pages.md)
- [Not found](./more-404.md)
- [Configuration Reference](./reference-configuration.md)
- [Plugins and Integrations](./resources-plugins.md)
- [Start Here](./start-here-index.md)
- [Getting Started](./start-here-getting-started.md)
- [Cards](./components-cards.md)
- [Guides](./guides-index.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.