Buttonコンポーネント

フォーム送信用ボタンとリンク用ボタンのデモとテスト

FormButton

フォーム送信用のボタンコンポーネント

FormButton Example

TSX

// Basic form with FormButton
<form onSubmit={handleSubmit} className="space-y-6">
  <div>
    <label htmlFor="name" className="block text-sm font-medium mb-2">
      お名前
    </label>
    <input
      id="name"
      type="text"
      value={formData.name}
      onChange={(e) => setFormData({...formData, name: e.target.value})}
      className="w-full px-3 py-2 border rounded-md"
      required
    />
  </div>
  <div>
    <label htmlFor="email" className="block text-sm font-medium mb-2">
      メールアドレス
    </label>
    <input
      id="email"
      type="email"
      value={formData.email}
      onChange={(e) => setFormData({...formData, email: e.target.value})}
      className="w-full px-3 py-2 border rounded-md"
      required
    />
  </div>
  <ButtonGroup spacing="md">
    <FormButton
      type="submit"
      variant="primary"
      size="md"
      loading={isSubmitting}
      disabled={!formData.name || !formData.email}
    >
      <Icon name="user" size="sm" color="current" />
      送信
    </FormButton>
    <FormButton
      type="button"
      variant="secondary"
      size="md"
      onClick={() => setFormData({ name: "", email: "" })}
    >
      リセット
    </FormButton>
  </ButtonGroup>
</form>

基本的なフォーム例

FormButton Variations

すべてのバリエーションとサイズ

All FormButton Variations

TSX

// All variations and sizes of FormButton
<div className="space-y-4">
  {/* Primary variants in different sizes */}
  <ButtonGroup spacing="md">
    <FormButton variant="primary" size="sm">
      <Icon name="check" size="xs" color="current" />
      承認
    </FormButton>
    <FormButton variant="primary" size="md">
      <Icon name="user" size="sm" color="current" />
      ログイン
    </FormButton>
    <FormButton variant="primary" size="lg">
      <Icon name="save" size="md" color="current" />
      保存
    </FormButton>
  </ButtonGroup>

  {/* Secondary and tertiary variants */}
  <ButtonGroup spacing="md">
    <FormButton variant="secondary" size="md">
      <Icon name="settings" size="sm" />
      設定
    </FormButton>
    <FormButton variant="tertiary" size="md">
      <Icon name="info" size="sm" />
      詳細
    </FormButton>
    <FormButton variant="ghost" size="md">
      <Icon name="mail" size="sm" />
      ヘルプ
    </FormButton>
  </ButtonGroup>

  {/* Danger variant */}
  <ButtonGroup spacing="md">
    <FormButton variant="danger" size="md">
      <Icon name="delete" size="sm" color="current" />
      削除
    </FormButton>
    <FormButton variant="tertiary" size="md">
      <Icon name="info" size="sm" />
      情報
    </FormButton>
    <FormButton variant="ghost" size="md">
      <Icon name="check" size="sm" />
      完了
    </FormButton>
  </ButtonGroup>
</div>

すべてのバリエーション

Dropdown

ドロップダウンメニューとボタンの組み合わせ

Dropdown Use Cases

TSX

// Common dropdown patterns in real applications
<div className="space-y-6">
  {/* Filter dropdown */}
  <div>
    <h4 className="text-sm font-medium mb-3">Filter Options</h4>
    <Dropdown>
      <Dropdown.Toggler variant="secondary" size="md">
        <Icon name="filter" size="sm" />
        フィルター
      </Dropdown.Toggler>
      <Dropdown.Toggleable>
        <Dropdown.Item>すべて</Dropdown.Item>
        <Dropdown.Item>アクティブ</Dropdown.Item>
        <Dropdown.Item>完了</Dropdown.Item>
        <Dropdown.Item>保留中</Dropdown.Item>
      </Dropdown.Toggleable>
    </Dropdown>
  </div>

  {/* Action menu dropdown */}
  <div>
    <h4 className="text-sm font-medium mb-3">Action Menu</h4>
    <Dropdown>
      <Dropdown.Toggler variant="tertiary" size="md">
        <Icon name="menu" size="sm" />
        アクション
      </Dropdown.Toggler>
      <Dropdown.Toggleable>
        <Dropdown.Item>
          <Icon name="edit" size="sm" />
          編集
        </Dropdown.Item>
        <Dropdown.Item>
          <Icon name="copy" size="sm" />
          複製
        </Dropdown.Item>
        <Dropdown.Item>
          <Icon name="share" size="sm" />
          共有
        </Dropdown.Item>
        <Dropdown.Separator />
        <Dropdown.Item>
          <Icon name="delete" size="sm" />
          削除
        </Dropdown.Item>
      </Dropdown.Toggleable>
    </Dropdown>
  </div>

  {/* Settings dropdown */}
  <div>
    <h4 className="text-sm font-medium mb-3">Settings Menu</h4>
    <Dropdown>
      <Dropdown.Toggler variant="ghost" size="md">
        <Icon name="settings" size="sm" />
        設定
      </Dropdown.Toggler>
      <Dropdown.Toggleable>
        <Dropdown.Item>
          <Icon name="user" size="sm" />
          プロファイル
        </Dropdown.Item>
        <Dropdown.Item>
          <Icon name="mail" size="sm" />
          通知設定
        </Dropdown.Item>
        <Dropdown.Item>
          <Icon name="settings" size="sm" />
          プライバシー
        </Dropdown.Item>
        <Dropdown.Separator />
        <Dropdown.Item>
          <Icon name="arrow-left" size="sm" />
          ログアウト
        </Dropdown.Item>
      </Dropdown.Toggleable>
    </Dropdown>
  </div>
</div>

実際の表示

Filter Options

Action Menu

Settings Menu

ButtonGroup

ボタンをグループ化してレイアウトを管理

ButtonGroup Patterns

TSX

// Different spacing and attachment patterns
<div className="space-y-6">
  {/* Normal spacing - most common use case */}
  <div>
    <h4 className="text-sm font-medium mb-3">Normal Spacing</h4>
    <ButtonGroup spacing="md">
      <FormButton variant="primary" size="md">
        <Icon name="save" size="sm" color="current" />
        保存
      </FormButton>
      <FormButton variant="secondary" size="md">
        <Icon name="close" size="sm" />
        キャンセル
      </FormButton>
      <FormButton variant="tertiary" size="md">
        <Icon name="info" size="sm" />
        詳細
      </FormButton>
    </ButtonGroup>
  </div>

  {/* Attached buttons - for toggle-like interfaces */}
  <div>
    <h4 className="text-sm font-medium mb-3">Attached Buttons</h4>
    <ButtonGroup spacing="none">
      <FormButton variant="secondary" size="md">
        <Icon name="document" size="sm" />
        リスト
      </FormButton>
      <FormButton variant="secondary" size="md">
        <Icon name="folder" size="sm" />
        グリッド
      </FormButton>
      <FormButton variant="secondary" size="md">
        <Icon name="image" size="sm" />
        カード
      </FormButton>
    </ButtonGroup>
  </div>

  {/* Mixed button types */}
  <div>
    <h4 className="text-sm font-medium mb-3">Mixed Components</h4>
    <ButtonGroup spacing="md">
      <FormButton variant="danger" size="md">
        <Icon name="delete" size="sm" color="current" />
        削除
      </FormButton>
      <LinkButton href="/edit" variant="primary" size="md">
        <Icon name="edit" size="sm" color="current" />
        編集
      </LinkButton>
      <Dropdown>
        <Dropdown.Toggler variant="secondary" size="md">
          <Icon name="menu" size="sm" />
          その他
        </Dropdown.Toggler>
        <Dropdown.Toggleable>
          <Dropdown.Item>複製</Dropdown.Item>
          <Dropdown.Item>移動</Dropdown.Item>
          <Dropdown.Item>アーカイブ</Dropdown.Item>
        </Dropdown.Toggleable>
      </Dropdown>
    </ButtonGroup>
  </div>
</div>

実際の表示

Normal Spacing

Attached Buttons

Mixed Components

編集

LinkButton

ナビゲーションとリンクのためのボタンコンポーネント

LinkButton Variations

TSX

// LinkButton with different targets and styles
    <div className="space-y-4">
      {/* Different targets */}
      <ButtonGroup spacing="md">
        <LinkButton href="/about" variant="primary" size="md">
          <Icon name="user" size="sm" color="current" />
          内部リンク
        </LinkButton>
        <LinkButton 
          href="https://example.com" 
          variant="secondary" 
          size="md"
          target="_blank"
        >
          <Icon name="external-link" size="sm" />
          外部リンク
        </LinkButton>
        <LinkButton href="#section1" variant="tertiary" size="md">
          <Icon name="arrow-down" size="sm" />
          アンカーリンク
        </LinkButton>
      </ButtonGroup>

  {/* Size variations with appropriate use cases */}
  <ButtonGroup spacing="md">
    <LinkButton href="/quick-action" variant="ghost" size="sm">
      <Icon name="arrow-right" size="xs" />
      クイック
    </LinkButton>
    <LinkButton href="/main-action" variant="primary" size="md">
      <Icon name="check" size="sm" color="current" />
      メインアクション
    </LinkButton>
    <LinkButton href="/important" variant="primary" size="lg">
      <Icon name="check" size="md" color="current" />
      重要なアクション
    </LinkButton>
  </ButtonGroup>

  {/* Contextual usage */}
  <ButtonGroup spacing="md">
    <LinkButton href="/docs" variant="secondary" size="md">
      <Icon name="document" size="sm" />
      ドキュメント
    </LinkButton>
    <LinkButton href="/settings" variant="tertiary" size="md">
      <Icon name="settings" size="sm" />
      設定
    </LinkButton>
    <LinkButton href="/help" variant="ghost" size="md">
      <Icon name="info" size="sm" />
      ヘルプ
    </LinkButton>
  </ButtonGroup>
</div>

実際の表示

内部リンク外部リンクアンカーリンク

クイックメインアクション重要なアクション

ドキュメント設定ヘルプ

使用方法とベストプラクティス

ボタンコンポーネントの実装ガイド

Basic Implementation

TSX

// Import statements
import { FormButton, LinkButton, ButtonGroup } from "@/components/Button";
import { Icon } from "@/components/Icon";

// Basic usage patterns
function ExampleUsage() {
  const handleSubmit = async (formData: FormData) => {
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form buttons for actions */}
      <ButtonGroup spacing="normal">
        <FormButton 
          type="submit" 
          variant="primary" 
          size="md"
          loading={isSubmitting}
        >
          <Icon name="save" size="sm" color="current" />
          保存
        </FormButton>
        
        <FormButton 
          type="button" 
          variant="secondary" 
          size="md"
          onClick={handleCancel}
        >
          <Icon name="close" size="sm" />
          キャンセル
        </FormButton>
      </ButtonGroup>

      {/* Link buttons for navigation */}
      <LinkButton href="/help" variant="ghost" size="sm">
        <Icon name="info" size="xs" />
        ヘルプ
      </LinkButton>
    </form>
  );
}

組み合わせ例

Form Action Buttons

Navigation Links

ヘルプ

Design Guidelines

TSX

// Design best practices and guidelines

// 1. Icon and size consistency
// Always match icon size with button size:
// - size="sm" → icon size="xs" 
// - size="md" → icon size="sm"
// - size="lg" → icon size="md"

// 2. Color inheritance for primary buttons
<FormButton variant="primary" size="md">
  <Icon name="check" size="sm" color="current" />
  色を継承
</FormButton>

// 3. Semantic usage patterns
<div className="space-y-4">
  {/* Destructive actions */}
  <FormButton variant="danger" size="md">
    <Icon name="delete" size="sm" color="current" />
    削除
  </FormButton>

  {/* Primary actions */}
  <FormButton variant="primary" size="md">
    <Icon name="save" size="sm" color="current" />
    保存
  </FormButton>

  {/* Secondary/supportive actions */}
  <FormButton variant="secondary" size="md">
    <Icon name="settings" size="sm" />
    設定
  </FormButton>

  {/* Low-priority actions */}
  <FormButton variant="ghost" size="md">
    <Icon name="info" size="sm" />
    詳細
  </FormButton>
</div>

セマンティックな使用例

Semantic Usage