MiComponents/Documentation

Tag

A badge-like component for displaying labels or categories.

Installation

npx micomponents-cli add tag

Preview

Tag

Usage

Import

import Tag from "@/components/ui/tag";

Basic Usage

<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium bg-primary text-primary-foreground">
  Tag
</span>

Tag Variants

Display tags in different color variants.
PrimarySecondarySuccessWarningDanger

Tag Sizes

Choose from multiple tag sizes.
SmallMediumLarge

API Reference

PropTypeDefaultDescription
variantdefault | secondary | success | warning | danger | outlinedefaultThe color variant of the tag
sizesm | md | lgmdThe size of the tag