Tag

Tag is a compact chip for status, category, and removable or checkable filters. Semantic colors use the same soft wash as Message. Checked filters use a 22% brand wash.

Demos

Types

default is a quiet gray fill. primary is solid brand with on-brand text. Success, warning, error, and info use a 16% wash and pressed-tone text.

DefaultPrimarySuccessWarningErrorInfo

<gk-tag>Default</gk-tag>
<gk-tag type="primary">Primary</gk-tag>
<gk-tag type="success">Success</gk-tag>
<gk-tag type="warning">Warning</gk-tag>
<gk-tag type="error">Error</gk-tag>
<gk-tag type="info">Info</gk-tag>

Bordered

bordered keeps the soft fill and adds a 1px type-colored border. Bordered primary switches from a solid fill to an 18% brand wash.

DefaultPrimarySuccessWarningErrorInfo

<gk-tag bordered>Default</gk-tag>
<gk-tag type="primary" bordered>Primary</gk-tag>
<gk-tag type="success" bordered>Success</gk-tag>
<gk-tag type="warning" bordered>Warning</gk-tag>
<gk-tag type="error" bordered>Error</gk-tag>
<gk-tag type="info" bordered>Info</gk-tag>

Round

round uses the pill radius.

CourseLivePublishedDraft

<gk-tag type="primary" round>Course</gk-tag>
<gk-tag type="info" round>Live</gk-tag>
<gk-tag type="success" round>Published</gk-tag>
<gk-tag bordered round>Draft</gk-tag>

Sizes

Chip heights are tighter than Button: sm 22, md 24, lg 28.

sm 22md 24lg 28

<gk-tag size="sm" type="primary">sm 22</gk-tag>
<gk-tag size="md" type="primary">md 24</gk-tag>
<gk-tag size="lg" type="primary">lg 28</gk-tag>

Closable

The × button emits close and does not remove the tag. The accessible name is “Close”, or 「關閉」 when the document language is Chinese.

KnowledgeTag ARemovable

<!-- host: remove the tag when close fires -->
<gk-tag type="primary" closable @close="removeTag('knowledge')">Knowledge</gk-tag>

Icon

The icon slot sits before the label.

Verified Notice

<gk-tag type="success">
  <svg slot="icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5-5L12.6 5.1z"/></svg>
  Verified
</gk-tag>

Checkable filters

checkable exposes role="checkbox". Checked chips use a 22% brand wash and pressed brand text. Unchecked hover is an 18% wash. type="primary" stays solid when checked.

AllDesignEngineeringMarketingArchived

<gk-tag checkable checked @update:checked="onFilter('design', $event)">Design</gk-tag>
<gk-tag checkable @check="onFilter('dev', $event)">Engineering</gk-tag>

Disabled

disabled sets opacity to 0.5 and blocks close, check, and the focus ring.

DisabledPrimaryError

<gk-tag disabled>Disabled</gk-tag>
<gk-tag type="primary" disabled>Primary</gk-tag>
<gk-tag type="error" disabled closable checkable>Error</gk-tag>

API

Tag Props

Prop	Type	Default
type	'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'	'default'
variant	same as type	—
size	'sm' | 'md' | 'lg'	'md'
bordered	boolean	false
round	boolean	false
closable	boolean	false
checkable	boolean	false
checked	boolean	false
disabled	boolean	false
color	string	—

Prefer type. variant is an alias; if both attributes are present on the first render, type wins. error uses the danger token. color sets the host variable --gk-tag-color and overrides the fill.

A static tag does not emit a click event. Closable and checkable tags are the interactive cases.

Tag Slots

Name	Description
default	Label
icon	Leading icon

Tag Events

Name	Description
close	× pressed. Bubbles; composed: true. Does not toggle checked.
update:checked	Checkable chip toggled. detail: { checked: boolean }.
check	Same payload as update:checked.

Space and Enter toggle a focused checkable tag. The component updates checked itself.

CSS Parts

Part	Description
base	Chip surface. role="checkbox" when checkable
icon	Icon slot wrapper
content	Label
close	× button
check-indicator	Present when checkable, hidden unless checked. Style it to add a custom mark

CSS Variables

Name	Description
--gk-tag-color	Set from the color prop. Used as the chip fill

Accessibility

• No role until checkable, which sets role="checkbox" and aria-checked.
• The × control is type="button" with aria-label="Close" (「關閉」 when lang starts with zh).
• disabled sets aria-disabled="true" and removes the chip from the tab order.
• Focus-visible uses a soft ring: 0 0 0 2px color-mix(focus-ring 70%).