Tag

free

Tag labels content with a compact keyword, category, or status marker.

LabelLabel

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

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Tag

pnpm dlx nateui@latest add Tag

yarn dlx nateui@latest add Tag

DraftDesignEngineeringResearch

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

export default function BasicDemo() {
  return (

SmallMediumLarge

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

export default function SizesDemo() {
  return (

Default dotCustom dotPrefix iconSuffix icon

import Tag from '@/components/ui/tag';
import { PiHash, PiPlus } from 'react-icons/pi'

export default function AffixDemo() {

ActiveDraftPendingFailed

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

export default function StatusDemo() {
  return (

EmeraldRoseBlueCyanOrangeRedPurpleYellow

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

export default function CategoryDemo() {
  return (

In stockFree shippingUnder $50On sale

import { useState } from 'react';
import Tag from '@/components/ui/tag';
import CloseButton from '@/components/ui/close-button';

Tag renders a span and accepts the props below plus native props for that element.

Prop	Description	Type	Default
`children`	Content shown inside the tag.	`ReactNode`	-
`size`	Controls padding and text size.	`ControlSize`	`'md'`
`prefix`	Content before the label. Pass `true` for a colored dot, or a node to render it directly.	`boolean \| ReactNode`	`false`
`prefixClass`	Extra classes for the prefix dot. Applies only when `prefix` is `true`.	`string`	-
`suffix`	Content after the label. Pass `true` for a colored dot, or a node to render it directly.	`boolean \| ReactNode`	`false`
`suffixClass`	Extra classes for the suffix dot. Applies only when `suffix` is `true`.	`string`	-
`className`	Extra classes for the root `span`.	`string`	-
`ref`	Ref forwarded to the root `span`.	`Ref<HTMLSpanElement>`	-
`...nativeSpanProps`	Native props for the root `span`.	`NativeTagSpanProps`	-

type ControlSize = 'sm' | 'md' | 'lg';
type NativeTagSpanProps = Omit<ComponentPropsWithRef<'div'>, 'prefix'>;