Tag

Small label, optionally clickable.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Tag } from '@kittl/ui-react';

Usage

Web Component

<kittl-tag>Label</kittl-tag>
<kittl-tag tag-type="clickable">Clickable Tag</kittl-tag>
<kittl-tag tag-type="clickable" disabled>Disabled</kittl-tag>

React

<Tag>Label</Tag>
<Tag type="clickable" onTagClick={() => console.log('clicked')}>Clickable Tag</Tag>
<Tag type="clickable" disabled>Disabled</Tag>

Props

Property	Type	Default	Description
size	's'	's'	Tag size
type	'default' | 'clickable'	'default'	Interaction mode
disabled	boolean	false	Disable the tag

HTML attribute name

Use tag-type as the HTML attribute name (to avoid conflict with the native type attribute).

Events

Event	Detail	Description
tag-click	—	Fired when a clickable tag is clicked

React prop: onTagClick

Accessibility

• When type="clickable": role="button", tabindex="0"
• Keyboard: Enter triggers click