バリエーション: Default、Primary、Secondary、Success、Warning、Errorの6種類
サイズ: Small、Medium、Largeの3サイズ
インタラクティブ: クリック可能と削除可能なオプション
イベント: クリックと削除イベントのサポート
アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

---
import { Tag } from '@karan-monorepo/ui-core';
---

<kds-tag
  label="タグラベル"
  variant="default"
  size="md"
  removable="false"
  clickable="false"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
`label`	`string`	`""`	タグに表示するテキスト
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "error"`	`"default"`	タグの視覚的バリエーション
`size`	`"sm" \| "md" \| "lg"`	`"md"`	タグのサイズ
`removable`	`boolean`	`false`	削除ボタンを表示するかどうか
`clickable`	`boolean`	`false`	タグをクリック可能にするかどうか
`theme`	`"light" \| "dark"`	`"light"`	タグのカラーテーマ

使用例

Tag Component

Tag component for displaying labels, categories, and status indicators.

Variants

Default

Primary

Secondary

Success

Warning

Error

Sizes

Small

Medium

Large

Interactive Features

Normal Tag

Removable Tag

Themes

Light Theme

Dark Theme

Usage Examples

Status Tags

Category Tags

Filter Tags

バリエーション

Tagコンポーネントは6つの視覚的バリエーションをサポートします：

default: 標準的なグレーのタグ
primary: プライマリカラーのタグ
secondary: セカンダリカラーのタグ
success: 成功状態を示す緑のタグ
warning: 警告状態を示すオレンジのタグ
error: エラー状態を示す赤のタグ

<!-- デフォルトタグ -->
<kds-tag label="Default" variant="default" />

<!-- プライマリタグ -->
<kds-tag label="Primary" variant="primary" />

<!-- 成功タグ -->
<kds-tag label="Success" variant="success" />

<!-- エラータグ -->
<kds-tag label="Error" variant="error" />

サイズバリエーション

Tagコンポーネントは3つのサイズをサポートします：

sm: 小さなタグ（14px）
md: 標準的なタグ（16px）
lg: 大きなタグ（18px）

<!-- 小さなタグ -->
<kds-tag label="Small" size="sm" />

<!-- 大きなタグ -->
<kds-tag label="Large" size="lg" />

インタラクティブ機能

クリック可能なタグ

<kds-tag
  label="クリック可能"
  variant="primary"
  clickable="true"
/>

削除可能なタグ

<kds-tag
  label="削除可能"
  variant="secondary"
  removable="true"
/>

両方の機能を持つタグ

<kds-tag
  label="クリック・削除可能"
  variant="success"
  clickable="true"
  removable="true"
/>

イベントハンドリング

Tagコンポーネントは以下のイベントを発火します：

// タグのイベントリスナー
const tag = document.querySelector('kds-tag');

tag.addEventListener('click', (event) => {
  console.log('タグがクリックされました:', event.detail.label);
});

tag.addEventListener('remove', (event) => {
  console.log('タグが削除されました:', event.detail.label);
});

使用ケース

カテゴリタグ

<div class="category-tags">
  <kds-tag label="React" variant="primary" />
  <kds-tag label="TypeScript" variant="secondary" />
  <kds-tag label="Web Components" variant="default" />
</div>

ステータスタグ

<div class="status-tags">
  <kds-tag label="Active" variant="success" />
  <kds-tag label="Pending" variant="warning" />
  <kds-tag label="Inactive" variant="default" />
  <kds-tag label="Error" variant="error" />
</div>

フィルタータグ

<div class="filter-tags">
  <kds-tag label="JavaScript" variant="primary" removable="true" />
  <kds-tag label="CSS" variant="primary" removable="true" />
  <kds-tag label="HTML" variant="primary" removable="true" />
</div>

選択可能なタグ

<div class="selectable-tags">
  <kds-tag label="Option 1" variant="default" clickable="true" />
  <kds-tag label="Option 2" variant="primary" clickable="true" />
  <kds-tag label="Option 3" variant="default" clickable="true" />
</div>

スタイリング

Tagコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Tagコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLの<span>要素を使用
キーボードナビゲーションサポート
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
削除ボタンの適切なARIAラベル

ベストプラクティス

ラベルは簡潔で説明的に保つ
バリエーションは意味に基づいて選択する（成功=緑、エラー=赤など）
削除可能なタグは適切なコンテキストで使用する
クリック可能なタグは明確なアクションを提供する
複数のタグを表示する場合は適切な間隔を設ける
色の意味を一貫して使用し、ユーザーの期待に応える
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

Tagコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Grid
CSS Flexbox