Component

Tag

An interactive chip — clickable, removable, with optional avatar, icon, or count. Use over Badge when the label is actionable.

$pnpm dlx @stalk-ui/cli add @stalk-ui/tag

<Tag>
  <Tag.Label>Frontend</Tag.Label>
</Tag>

<Tag tone="success" dot>
  <Tag.Label>Online</Tag.Label>
</Tag>

<Tag tone="danger">
  <Tag.Label>Errors</Tag.Label>
  <Tag.Count>12</Tag.Count>
</Tag>

<Tag size="lg">
  <Tag.Avatar>AB</Tag.Avatar>
  <Tag.Label>Ada Byron</Tag.Label>
</Tag>

<Tag variant="outline" onClose={() => {}}>
  <Tag.Label>Removable</Tag.Label>
  <Tag.Close />
</Tag>

Prop	Type	Required	Default	Description
`src`	`string`	No	-	Image source; renders an \`<img>\` filling the avatar slot.
`alt`	`string`	No	-	Alt text for the image (decorative by default).
`imgProps`	`ImgHTMLAttributes<HTMLImageElement>`	No	-	-
`children`	`ReactNode`	No	-	Fallback content (e.g. initials) shown when no \`src\` is provided.
Prop	`Type`	Required	Default	Description
`dot`	`boolean`	No	-	Render a small leading dot in the palette's solid color.
`disabled`	`boolean`	No	-	Disable interaction (click + close) and dim the chip.
`onClick`	`(event: ReactMouseEvent<HTMLSpanElement>) => void`	No	-	Make the whole chip focusable/clickable with keyboard activation.
`onClose`	`(event: ReactMouseEvent<HTMLButtonElement>) => void`	No	-	Inherited by \`Tag.Close\`; called when the close button is activated.
`closeAriaLabel`	`string`	No	-	Accessible label for \`Tag.Close\`. Defaults to \`Remove\`.
`radius`	`TagRadius`	No	-	-
`size`	`TagSize`	No	-	-
`tone`	`TagTone`	No	-	Selects the semantic color palette. Defaults to \`accent\`.
`variant`	`TagVariant`	No	-	-

Install