Tag - HapplyUI

A compact tag component for labeling and categorization with icon, image, avatar, and dismiss support.

Installation

bunx @happlyui/cli@latest add tag

Dependencies

npm packages

@radix-ui/react-slot
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as Tag from "@/components/ui/tag"

<Tag.Root>
  <Tag.Icon as={RiPushpinFill} />
  Customer
</Tag.Root>

Examples

Stroke

Stroke variant tags, plain and with icon.

Tag

Customer

<Tag.Root variant="stroke">Tag</Tag.Root>
<Tag.Root variant="stroke">
  <Tag.Icon as={RiPushpinFill} />
  Customer
</Tag.Root>

Gray

Gray variant tags, plain and with icon.

Tag

Customer

<Tag.Root variant="gray">Tag</Tag.Root>
<Tag.Root variant="gray">
  <Tag.Icon as={RiPushpinFill} />
  Customer
</Tag.Root>

Rounded

Tags with rounded (default, pill shape) and non-rounded (medium corners) variants.

Rounded (default)

Rounded

Not Rounded

<Tag.Root rounded>Rounded</Tag.Root>
<Tag.Root rounded={false}>Not Rounded</Tag.Root>

Disabled

Disabled tags in both stroke and gray variants.

Tag

Customer

Tag

Customer

<Tag.Root variant="stroke" disabled>Tag</Tag.Root>

With Image

Tags with brand logo images using the polymorphic Icon.

Apple

Figma

<Tag.Root>
  <Tag.Icon as="img" src="/logo.svg" />
  Brand
</Tag.Root>

With Avatar

Tag with an Avatar component as the icon.

James Brown

<Tag.Root>
  <Tag.Icon as={Avatar.Root}>
    <Avatar.Image src="/avatar.png" />
  </Tag.Icon>
  Name
</Tag.Root>

Dismissable

Tags with a dismiss (close) button in stroke and gray variants.

Tag

Customer

Tag

Customer

<Tag.Root>
  Tag
  <Tag.DismissButton onClick={handleDismiss} />
</Tag.Root>

API Reference

Tag.Root

The main tag container.

Prop	Type	Default	Description
`variant`	`'stroke' \| 'gray'`	`'gray'`	The visual variant of the tag
`rounded`	`boolean`	`true`	Whether the tag uses fully rounded corners (pill shape) or medium rounded corners
`disabled`	`boolean`	-	Whether the tag is disabled
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Tag.Icon

Renders a polymorphic icon, image, or avatar inside the tag.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The element or component to render

Tag.DismissButton

A dismiss/close button with a default close icon.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Tag.DismissIcon

The close icon rendered inside DismissButton. Can be overridden.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render