Component reference

Tag

A static fact beside content.

Preview

Facts, counts and paths

A tag is a static fact next to content and cannot be clicked. Neutral tags state a count or category, accent tags mark the current or default item, and the orange count is the only color that interrupts you; paths, model IDs and versions are checkable facts set in a monospace font.

packages/meowtail/stories/tag.stories.tsxline 21tsx

render() {
  return (
    <SchemePair>
      {() => (
        <div style={{ display: "grid", gap: "16px" }}>
          <Inline gap="compact" align="center">
            <Tag>Neutral tag</Tag>
            <Tag>2 completion conditions</Tag>
            <Tag tone="accent">Default</Tag>
            <Tag tone="warning" kind="count">
              1
            </Tag>
            <Tag kind="count">128</Tag>
            <Tag tone="accent" kind="count">
              3
            </Tag>
          </Inline>
          <Inline gap="compact" align="center">
            <Tag kind="path">docs/records/x.md</Tag>
            <Tag kind="path">deepseek-v4.1-flash</Tag>
            <Tag kind="path">v0.1.0</Tag>
          </Inline>
          <div style={{ maxWidth: "260px" }}>
            <Tag kind="path">
              docs/records/2026-10-09-ui-systematic-design/reference/original.png
            </Tag>
          </div>
        </div>
      )}
    </SchemePair>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Tag } from "meowtail";

<Tag>Neutral tag</Tag>

API reference

Choosing or filtering belongs to Pill, which is a button.

Props

Prop	Type	Default
`tone`	`"neutral" \| "accent" \| "warning"`	`"neutral"`
`kind`	`"label" \| "count" \| "path"`	`"label"`

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

DOM parts

root

Registry

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