チップ

Chipコンポーネントは、タグやラベル、ステータス表示に使用される小さなコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

バリエーション: Default、Primary、Success、Warning、Errorの5種類
サイズ: Regular、Smallの2サイズ
テーマ対応: ライトテーマとダークテーマの自動切り替え
アクセシビリティ: 適切なコントラスト比とスクリーンリーダー対応

使用方法

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

<kds-chip label="タグ" variant="primary" theme="light">
  カスタムコンテンツ
</kds-chip>

プロパティ

プロパティ	型	デフォルト	説明
`label`	`string`	`''`	チップのラベルテキスト
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error'`	`'default'`	チップのバリエーション
`theme`	`'light' \| 'dark'`	`'light'`	チップのカラーテーマ
`small`	`boolean`	`false`	小さなサイズのチップ

使用例

Chip Component

Small, compact elements for tags, labels, and status indicators.

Variants

Default

Primary

Success

Warning

Error

Sizes

Regular

Small

Themes

Light Theme

Dark Theme

Usage Examples

Status Tags

バリエーション

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

default: 標準的なグレーのチップ
primary: プライマリカラーのチップ
success: 成功状態を示す緑のチップ
warning: 警告状態を示す黄色のチップ
error: エラー状態を示す赤のチップ

<!-- デフォルトチップ -->
<kds-chip label="デフォルト" variant="default" />

<!-- プライマリチップ -->
<kds-chip label="プライマリ" variant="primary" />

<!-- 成功チップ -->
<kds-chip label="成功" variant="success" />

<!-- 警告チップ -->
<kds-chip label="警告" variant="warning" />

<!-- エラーチップ -->
<kds-chip label="エラー" variant="error" />

サイズバリエーション

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

regular: 標準的なサイズ
small: 小さなサイズ

<!-- 標準サイズ -->
<kds-chip label="標準サイズ" variant="primary" />

<!-- 小さなサイズ -->
<kds-chip label="小サイズ" variant="primary" small />

使用ケース

ステータス表示

<div class="status-chips">
  <kds-chip label="アクティブ" variant="success" />
  <kds-chip label="保留中" variant="warning" />
  <kds-chip label="無効" variant="error" />
</div>

カテゴリ表示

<div class="category-chips">
  <kds-chip label="テクノロジー" variant="primary" />
  <kds-chip label="デザイン" variant="default" />
  <kds-chip label="ビジネス" variant="default" />
</div>

フィルター表示

<div class="filter-chips">
  <kds-chip label="すべて" variant="primary" />
  <kds-chip label="新着" variant="default" />
  <kds-chip label="人気" variant="default" />
</div>

スタイリング

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

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

アクセシビリティ

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

セマンティックHTMLの<span>要素を使用
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
カラーだけでなく形状でも情報を伝達

ベストプラクティス

バリエーションは意味に基づいて選択する（成功=緑、警告=黄、エラー=赤など）
サイズはコンテキストに応じて選択する（リスト=small、カード=regular）
カテゴリやステータス表示に適している
複数のチップがある場合は適切な間隔を設ける
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

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

CSS Custom Properties
Web Components (Lit)
CSS Flexbox

チップ

機能