---
title: "Badge"
description: "Display version numbers, status labels, and tags within your content."
canonical_url: "https://ui.nuxt.com/docs/typography/badge"
last_updated: "2026-05-07"
---
# Badge

> Display version numbers, status labels, and tags within your content.

## Usage

Use markdown in the default slot of the `badge` component to display a [Badge](/docs/components/badge) in your content.

```vue
<template>
  <code />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::badge
  **v4.0.0**
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  badge
  </span></span>
  <span class=line>
  <span class=sHepR>
  **</span>
  <span class=so75L>
  v4.0.0</span>
  <span class=sHepR>
  **
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Slots

```ts
/**
 * Slots for the Badge component
 */
interface BadgeSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      badge: {
        base: 'rounded-full'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Badge.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/badge.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.