Component reference

Badge

A small label that names a category, such as a version or a release stage.

Preview

Category labels and long names

Shows how Badge actually renders. A badge is a dot-less category label; a state uses Status, the dot-led state badge.

packages/meowtail/stories/foundation.stories.tsxline 331tsx

render: () => (
  <Specimens>
    <Specimen
      label="Regular badges"
      note="Words name a category, never a state; tone only groups them."
    >
      <Inline gap="compact">
        <Badge tone="neutral">Docs</Badge>
        <Badge tone="accent">New</Badge>
        <Badge tone="success">Stable</Badge>
        <Badge tone="warning">Beta</Badge>
        <Badge tone="danger">Deprecated</Badge>
        <Badge>A longer category name to check on a narrow screen</Badge>
      </Inline>
    </Specimen>
    <Specimen label="Compact badges">
      <Inline gap="compact">
        <Badge size="small">Docs</Badge>
        <Badge size="small" tone="accent">
          New
        </Badge>
        <Badge size="small" tone="success">
          Stable
        </Badge>
        <Badge size="small" tone="warning">
          Beta
        </Badge>
        <Badge size="small" tone="danger">
          Deprecated
        </Badge>
      </Inline>
    </Specimen>
  </Specimens>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Badge } from "meowtail";

<Badge tone="neutral">Docs</Badge>

API reference

Props

Prop	Type	Default
`tone`	`"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "outline" \| "solid" \| "quiet"`	`"neutral"`
`size`	`"small" \| "default"`	`"default"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as badge in the meowtail component registry.