Tag

In context

Tag input, dismissible filter chips with add-affordances, a skills board, and a single-pick category strip.

Project tags

Add a tag. Press Enter to commit. Click × to remove.

payrolleu-westurgent

Inbox filters

Active filters are dismissible; idle filters add on click.

OwnerPast 30 days

2 filters active74 matches

Skills & teams

Static tags as label chips — no remove affordance.

Skills

ReactTypeScriptNext.jsTailwindTanStackPostgresFigma

Departments

EngineeringPeople OpsRecruitingSales

Category strip

Single-pick navigation built from Tag-shaped buttons.

Showing recipes for Patterns.

All variants

Each variant maps to a semantic context. Use destructive for errors, success for positive states.

DefaultPrimaryAccentDestructiveSuccessWarning

import { Tag } from '@mihcm/ui/Tag';
 
<div className="flex flex-wrap gap-2">
  <Tag variant="default">Default</Tag>
  <Tag variant="primary">Primary</Tag>
  <Tag variant="accent">Accent</Tag>
  <Tag variant="destructive">Destructive</Tag>
  <Tag variant="success">Success</Tag>
  <Tag variant="warning">Warning</Tag>
</div>

Sizes

Use sm in dense table cells, md as the default, and lg for standalone filters.

SmallMediumLarge

import { Tag } from '@mihcm/ui/Tag';
 
<div className="flex items-center gap-2">
  <Tag size="sm">Small</Tag>
  <Tag size="md">Medium</Tag>
  <Tag size="lg">Large</Tag>
</div>

Pass onRemove to render a close button. The remove button is keyboard-accessible and announces "Remove [tag]".

ReactTypeScriptTailwind CSS

import { Tag } from '@mihcm/ui/Tag';
 
<div className="flex flex-wrap gap-2">
  <Tag variant="primary" onRemove={() => {}}>React</Tag>
  <Tag variant="primary" onRemove={() => {}}>TypeScript</Tag>
  <Tag variant="accent" onRemove={() => {}}>Tailwind CSS</Tag>
</div>