Stalk UI

Component

Tag

Labels content with a compact, optionally interactive chip.

Install

Run the CLI to copy the source into your project.

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

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Tag>Frontend</Tag>
Theme
<Tag tone="success" dot>
  Online
</Tag>
Theme
<Tag tone="danger" count={12}>
  Errors
</Tag>
Theme
<Tag variant="outline" onClose={() => {}}>
  Removable
</Tag>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`leadingIcon``ReactNode`No-Optional leading icon or content rendered before the label.
`trailingIcon``ReactNode`No-Optional trailing content rendered after the label (before the count/close).
`count``number \string`No-
`dot``boolean`No-Render a small leading dot in the palette's solid color.
`onClick``(event: MouseEvent<HTMLSpanElement>) => void`No-Make the tag focusable/clickable. Adds keyboard activation.
`onClose``(event: MouseEvent<HTMLButtonElement>) => void`No-Show a close button. Called when the user clicks it.
`closeAriaLabel``string`No-Accessible label for the close button.
`radius``TagRadius`No--
`size``TagSize`No--
`tone``TagTone`No-Selects the semantic color palette. Defaults to \`accent\`.
`variant``TagVariant`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`
`radius``none`, `sm`, `md`, `lg`, `full`
`variant``solid`, `subtle`, `outline`
`interactive``true`, `false`
`dot``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/tag.json`
  • Recipe: `tag`
  • Files: `src/components/ui/tag.tsx`