Skip to main content

Badge

Label status or metadata beside related content.

Polymorphic
View as MarkdownSource Code

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#

import { Badge } from 'moraine'

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

Playground#

New feature
Props
Slots

Anatomy#

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.

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#

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. Renders a <span> element by default.

Prop