Skip to content

Button

Jump to bottom
Yu Ohno edited this page Apr 1, 2026 · 1 revision

Button

インタラクティブなボタンコンポーネントです。5 つのバリアント、3 つのサイズ、アイコン・ローディング状態をサポートします。

Props

Prop 型 デフォルト 説明
variant 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'link' 'primary' ボタンのビジュアルスタイル
size 'sm' | 'md' | 'lg' 'md' ボタンのサイズ
icon IconName - Lucide アイコン名（PascalCase）
iconPosition 'start' | 'end' 'start' アイコンの配置位置
isLoading boolean false ローディングスピナーを表示し、ボタンを無効化
asChild boolean false Radix Slot で子要素に props を委譲
disabled boolean false ボタンを無効化

isLoading は asChild が true のときは無視されます。

バリアント

Primary

メインのアクションに使用します。hover で背景が濃くなり、テキストも明るくなります。

状態 Light Dark
通常 bg: ink-dark / text: paper-warm bg: #d4d0cb / text: #1e1e1c
Hover bg: ink-black / text: paper-white bg: #e8e4df / text: #1a1a1a
Disabled opacity 50% opacity 50%

Secondary

セカンダリのアクションに使用します。ボーダー付きの透明背景。

状態 スタイル
通常 border: ink-black / bg: transparent / text: ink-black
Hover bg: paper-cream

Tertiary

優先度の低いアクションに使用します。背景・ボーダーなし。

状態 スタイル
通常 text: ink-black
Hover bg: paper-cream

Destructive

削除などの破壊的操作に使用します。

状態 Light Dark
通常 bg: #c53d43 / text: paper-white bg: #e05a60 / text: paper-white
Hover bg: #a8333a（暗くなる） bg: #f07078（明るくなる）

Link

テキスト内にインラインで配置するリンクスタイルのボタンです。

状態 スタイル
通常 display: inline / underline / text: ink-black
Hover underline 消去 / text: ink-medium（薄くなる）
Disabled 通常と同じ見た目（hover 変化なし）

特徴:

  • display: inline でテキストの流れに沿って配置
  • size prop でフォントサイズが変わる（sm: 12px, md: 14px, lg: 16px）
  • アイコン対応（0.75em サイズ、テキストのベースラインに揃う）
  • ローディング状態は非対応

サイズ

サイズ 高さ パディング フォントサイズ アイコンサイズ
sm 32px (h-8) px-3 12px (text-xs) 14px
md 40px (h-10) px-5 py-2 14px (text-sm) 16px
lg 48px (h-12) px-8 16px (text-base) 20px

Link バリアントでは高さ・パディングは適用されず、フォントサイズのみが反映されます。

アイコン

Lucide React のアイコンを PascalCase で指定します。

<Button icon="Search">検索</Button>
<Button icon="ArrowRight" iconPosition="end">次へ</Button>
<Button icon="Plus" aria-label="追加" />  {/* アイコンのみ */}

アイコンのみ（children なし）の場合、ボタンは aspect-square になります。

ローディング状態

<Button isLoading>送信中</Button>
  • スピナーが中央に表示され、テキストが非表示になります
  • ボタンは自動的に disabled になります
  • 300ms のフェードアニメーション付き

フォーカス

  • focus-visible:ring-2 で ink-black のフォーカスリングが表示されます
  • Link バリアントは ring-offset-0 で余白なしのリングが表示されます

使用例

import { Button } from '@yasmro/schatten'

// 基本
<Button>送信</Button>

// バリアント
<Button variant="secondary">キャンセル</Button>
<Button variant="destructive" icon="Trash2">削除</Button>

// テキスト内のリンク
<p>
  詳しくは <Button variant="link">こちら</Button> をご覧ください。
</p>

// ローディング
<Button isLoading>処理中</Button>

Home

Foundation

Components

Development

Notes

Clone this wiki locally