Tag

元数据胶囊：28px，凸起并带描边，可带图标和移除圆形按钮。

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";

属性

children
ReactNode
标签的文字。
icon
IconSvgElement
文字前的图标。
invalid
boolean
标记未被接受的值。
onClick
((e: MouseEvent<HTMLElement, MouseEvent>) => void)
渲染为悬停时带底色的按钮。
onRemove
((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
显示移除圆形按钮；点击时调用。
pressed
boolean
用于可切换的胶囊（DisplayOptions）。
removeLabel
string
移除圆形按钮的无障碍名称。默认为 LocaleProvider 语言中的“移除”加上标签。
size
"md" | "sm" = md
标签的高度。
variant
"outline" | "soft" | "raised" = raised
在面板上凸起、柔和填充或带描边。