Component
◈

Tag

Compact label chip with variants, removable support, icon slots, and theme-reactive colors.

Import

import { Tag } from '@stareezy-ui/components'

Basic usage

Live Preview

Variants

NeutralPrimarySuccessWarningDangerOutline

Removable tags

ReactTypeScriptDesign
<Tag>React</Tag>
<Tag>TypeScript</Tag>
<Tag>Design System</Tag>

Variants

<Tag variant="neutral">Neutral</Tag>  // default
<Tag variant="primary">Primary</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="danger">Danger</Tag>
<Tag variant="outline">Outline</Tag>

Sizes

<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>  // default
<Tag size="lg">Large</Tag>

Removable

const [tags, setTags] = useState(['React', 'TypeScript', 'Design'])

{tags.map((tag) => (
  <Tag
    key={tag}
    removable
    onRemove={() => setTags(tags.filter(t => t !== tag))}
  >
    {tag}
  </Tag>
))}

With icon

<Tag icon={<StarIcon />}>Featured</Tag>
<Tag icon={<CheckIcon />} variant="success">Verified</Tag>

With BoxLayoutProps

<Tag mr={4} mb={4}>React</Tag>
<Tag px={{ base: 8, md: 12 }}>TypeScript</Tag>

Props

PropTypeDescription
childrenreqReactNodeTag label content.
variant"neutral" | "primary" | "success" | "warning" | "danger" | "outline"Color variant. Defaults to "neutral".
size"sm" | "md" | "lg"Size preset. Defaults to "md".
removablebooleanShow a remove button (×) at the end of the tag.
onRemove() => voidCalled when the remove button is pressed.
iconReactNodeIcon shown before the label.
onPress() => voidMakes the tag pressable. Adds appropriate ARIA role.

Accessibility

ℹ
When onPress is provided, Tag renders with role="button" and is keyboard-focusable. When removable is true, the remove button has aria-label="Remove {label}". Inactive tags render with role="status" by default.

Themes

Tag is Theme_Reactive — background, text color, and border colors are all derived from the Active_Theme at render time. Each variant maps to semantic color slots that adapt across quasar, light, dark, aurora, and steins-gate themes.