Tag

Usage

Use it to:

• show categories, labels or select-option values the user created
• edit a multi-value field with removable tags

Don’t use it to:

• system statuses or counts (use Badge or StatusPill)
• filters that toggle (use a Button or SegmentedControl)

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { Tag } from '@krackedui/motion';

export function TagEditor() {
  const [tags, setTags] = useState(['Design', 'Research', 'Q3']);
  return (
    <div className="flex flex-wrap gap-1.5">
      {tags.map((t) => (
        <Tag key={t} color="purple" onRemove={() => setTags((all) => all.filter((x) => x !== t))}>
          {t}
        </Tag>
      ))}
    </div>
  );
}

Examples

Colors

default plus the ten palette colors (motionColors).

Size

Dark theme

API Reference

Tag

A <span>; supports all of its props. Adds:

motionColors

readonly MotionColor[]: default and the ten palette colors, in menu order.

Accessibility

• The tag is static text. The remove button is a separate, named button (“Remove Design”) reached with Tab and pressed with Enter / Space; it is 24×24 on touch screens.
• Long labels truncate; pass title when the full text matters.