Skip to main content

Tag

Small label, optionally clickable.

Import​

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

Usage​

<kittl-tag>Label</kittl-tag>
<kittl-tag tag-type="clickable">Clickable Tag</kittl-tag>
<kittl-tag tag-type="clickable" disabled>Disabled</kittl-tag>
import { Tag } from '@kittl/ui-react';

/** Basic Tag usage, rendered live on the docs site. */
export const TagUsage = () => (
  <>
    <Tag>Label</Tag>
    <Tag type="clickable" onTagClick={() => console.log('clicked')}>
      Clickable Tag
    </Tag>
    <Tag type="clickable" disabled>
      Disabled
    </Tag>
  </>
);

Props​

PropertyAttributeTypeDefaultDescription
sizesize's''s'Tag size
typetag-type'default' | 'clickable''default'Interaction mode
disableddisabledboolean—Disable the tag
HTML attribute name

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

Events​

EventDetailDescription
tag-click—Fired when a clickable tag is clicked

React prop: onTagClick

Accessibility​

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