---
title: Badge
description: Label status or metadata beside related content.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Badge

> Label status or metadata beside related content.

Use Badge for compact status or metadata beside content. It is presentational by default; an action needs a semantic interactive root and an accessible name.

## Basic usage

```tsx
import { Badge } from 'moraine'

export function Example() {
  return <Badge>Active</Badge>
}
```

## Anatomy

```text
Badge [component; slot=root]
├── leading [slot]
├── label [slot]
└── trailing [slot]
```

## Usage

### Presentational status

Use `Badge` for compact, presentational status or metadata alongside a separately labeled control or heading. For an interactive badge, choose a semantic root with `as` and provide its required attributes, such as `type="button"`. Badge does not replace an accessible status announcement where one is required.

```tsx
import { Badge } from 'moraine'
import { For } from 'solid-js'

const TASKS = [
  { title: 'Review access request', status: 'Needs review', variant: 'outline' },
  { title: 'Publish release notes', status: 'In progress', variant: 'subtle' },
  { title: 'Archive old project', status: 'Complete', variant: 'solid' },
] as const

export function BadgeUsage() {
  return (
    <ul class="max-w-md w-full divide-border divide-y">
      <For each={TASKS}>
        {(task) => (
          <li class="py-2 flex gap-3 items-center justify-between">
            <span class="text-sm">{task.title}</span>
            <Badge variant={task.variant}>{task.status}</Badge>
          </li>
        )}
      </For>
    </ul>
  )
}
```

## Examples

### Status and metadata

```tsx
import { Badge } from 'moraine'

export function StatusAndMetadata() {
  return (
    <div class="p-4 b-1 b-border rounded-xl max-w-xl space-y-4">
      <div class="space-y-1.5">
        <p class="text-xs text-muted-foreground tracking-wider font-semibold uppercase">
          Deployment Pipeline
        </p>
        <div class="flex flex-wrap gap-3 items-center">
          <Badge variant="solid" leading="i-lucide:check-circle">
            Production Deployed
          </Badge>
          <Badge variant="subtle" leading="i-lucide:loader-circle">
            Building Preview...
          </Badge>
          <Badge variant="outline" leading="i-lucide:shield-check">
            Security Audit Passed
          </Badge>
        </div>
      </div>

      <div class="pt-2 border-t border-border space-y-1.5">
        <p class="text-xs text-muted-foreground tracking-wider font-semibold uppercase">
          Git Metadata
        </p>
        <div class="flex flex-wrap gap-3 items-center">
          <Badge variant="outline" trailing="i-lucide:git-commit">
            commit: #9f82a1
          </Badge>
          <Badge variant="outline" leading="i-lucide:users">
            34 contributors
          </Badge>
          <Badge variant="outline" leading="i-lucide:star">
            1.2k stars
          </Badge>
        </div>
      </div>
    </div>
  )
}
```

## Props

Props for the Badge component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| leading | IconT.Name \| undefined | — | Leading icon name. |
| size | 'sm' \| 'md' \| 'lg' \| undefined | 'md' | Visual size of the component. |
| title | string \| undefined | — | Accessible title shown by the browser for the badge root. |
| trailing | IconT.Name \| undefined | — | Trailing icon name. |
| variant | 'solid' \| 'subtle' \| 'surface' \| 'outline' \| undefined | 'subtle' | Visual treatment of the component. |
| as | T \| undefined | 'span' | Root element or component. |
| children | JSX.Element \| undefined | — | Children of the badge. |
| class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. |
| classes | Classes \| undefined | — | Family slot class defaults for this instance. |
| style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |
| styles | Styles \| undefined | — | Family slot style defaults for this instance. |