Tag

Metadata pills: 28px, raised and ringed, with an optional icon and remove circle.

gpt-5claude-sonnet-4-5Oct 12Activecheckout

<div className="flex flex-wrap items-center gap-6">
      <Tag>gpt-5</Tag>
      <Tag>claude-sonnet-4-5</Tag>
      <Tag icon={icons.calendar}>Oct 12</Tag>
      <Tag>Active</Tag>
      <Tag onRemove={() => undefined}>checkout</Tag>
    </div>

import { Tag } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
The tag's text.
icon
IconSvgElement
An icon before the text.
invalid
boolean
Marks a value that isn't accepted.
onClick
((e: MouseEvent<HTMLElement, MouseEvent>) => void)
Renders a button with a hover fill.
onRemove
((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
Shows a remove circle; called with the click.
pressed
boolean
For toggle pills (DisplayOptions).
removeLabel
string
The remove circle's accessible name. Defaults to "Remove" and the label in the provider's language.
size
"md" | "sm" = md
The tag's height.
variant
"outline" | "soft" | "raised" = raised
Raised on the panel, soft fill, or outlined.