Tag

Metadaten-Pills: 28px, erhaben und umrandet, mit optionalem Symbol und Entfernen-Kreis.

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
Der Text des Tags.
icon
IconSvgElement
Ein Symbol vor dem Text.
invalid
boolean
Markiert einen Wert, der nicht akzeptiert wird.
onClick
((e: MouseEvent<HTMLElement, MouseEvent>) => void)
Rendert einen Button mit Fläche beim Überfahren.
onRemove
((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
Zeigt einen Entfernen-Kreis; wird mit dem Klick aufgerufen.
pressed
boolean
Für umschaltbare Pills (DisplayOptions).
removeLabel
string
Der zugängliche Name des Entfernen-Kreises. Standardmäßig „Entfernen“ und die Beschriftung in der Sprache des LocaleProvider.
size
"md" | "sm" = md
Die Höhe des Tags.
variant
"outline" | "soft" | "raised" = raised
Erhaben auf dem Panel, sanft gefüllt oder umrandet.