ボタン

Buttonコンポーネントは、様々なバリエーションとサイズを提供する再利用可能なUIコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

バリエーション: Primary、Secondary、Outline、Ghost、Dangerの5種類
サイズ: Small (sm)、Medium (md)、Large (lg)の3サイズ
状態管理: 無効化状態のサポート
リンク機能: hrefプロパティでリンクとしても使用可能
アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

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

<kds-button variant="primary" size="md" theme="light">
  ボタンテキスト
</kds-button>

プロパティ

プロパティ	型	デフォルト	説明
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`'primary'`	ボタンのバリエーション
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	ボタンのサイズ
`disabled`	`boolean`	`false`	無効化状態
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTMLボタンタイプ
`href`	`string`	`""`	リンクとして使用する場合のURL
`theme`	`'light' \| 'dark'`	`'light'`	ボタンのカラーテーマ

使用例

Button Component

Various button variants and sizes for different use cases.

Variants

Primary

Secondary

Outline

Ghost

Danger

Sizes

Small

Medium

Large

States

Normal

Disabled

Themes

Light Theme

Dark Theme

Usage Examples

Form Actions

Submit

Reset

Cancel

Navigation

Home About Contact

Dangerous Actions

Delete Account

Cancel

バリエーション

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

primary: プライマリアクション用の強調されたボタン
secondary: セカンダリアクション用の控えめなボタン
outline: ボーダーのみのアウトラインボタン
ghost: 背景なしのゴーストボタン
danger: 危険なアクション用の赤いボタン

<!-- プライマリボタン -->
<kds-button variant="primary">保存</kds-button>

<!-- セカンダリボタン -->
<kds-button variant="secondary">キャンセル</kds-button>

<!-- アウトラインボタン -->
<kds-button variant="outline">詳細を見る</kds-button>

<!-- ゴーストボタン -->
<kds-button variant="ghost">編集</kds-button>

<!-- 危険ボタン -->
<kds-button variant="danger">削除</kds-button>

サイズバリエーション

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

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

<!-- 小さなボタン -->
<kds-button size="sm">小</kds-button>

<!-- 標準ボタン -->
<kds-button size="md">標準</kds-button>

<!-- 大きなボタン -->
<kds-button size="lg">大</kds-button>

状態管理

無効化状態

<kds-button disabled="true">無効化されたボタン</kds-button>

フォーム送信ボタン

<kds-button type="submit" variant="primary">送信</kds-button>
<kds-button type="reset" variant="secondary">リセット</kds-button>

リンクとしての使用

hrefプロパティを指定することで、ボタンをリンクとして使用できます：

<kds-button href="#" variant="outline">詳細ページへ</kds-button>
<kds-button href="#" variant="primary" target="_blank">外部サイト</kds-button>

使用ケース

フォームアクション

<div class="form-actions">
  <kds-button type="submit" variant="primary">保存</kds-button>
  <kds-button type="button" variant="secondary">キャンセル</kds-button>
</div>

危険なアクション

<div class="danger-actions">
  <kds-button variant="danger" disabled="true">アカウント削除</kds-button>
  <kds-button variant="outline">キャンセル</kds-button>
</div>

スタイリング

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

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

アクセシビリティ

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

セマンティックHTMLの<button>要素を使用
キーボードナビゲーションサポート（Tab、Enter、Space）
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
フォーカス表示の適切な管理

ベストプラクティス

バリエーションは意味に基づいて選択する（プライマリ=主要アクション、危険=削除など）
サイズはコンテキストに応じて選択する（フォーム=md、ナビゲーション=sm）
無効化状態を適切に使用してユーザーにフィードバックを提供する
リンクとして使用する場合は適切なhrefを設定する
複数のボタンがある場合は視覚的階層を明確にする
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

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

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

ボタン

機能