KARAKURIDESIGN SYSTEM

Button

ボタンは、ユーザーがアクションを実行するための最も基本的なインタラクティブ要素です。 クリック、タップで操作を開始し、フォーム送信やナビゲーションなど様々な用途に使用します。

4
Variants
4
Colors
5
Sizes
Pure
React

Playground

Preview
solidD
Variant
Color
Size
Radius
Icon
Weight
Width
State
Label
<Button>Button</Button>

Variants

Style

Solid
ソリッド背景。最も視覚的に目立つスタイル。
送信、保存、購入
Outline
中立的なアクション。背景と調和させたい場合。
詳細を見る、編集
Ghost
最小限の視覚的存在感。ツールバーなどに最適。
ツールバー、ナビ
Link
テキストリンクスタイル。インラインアクションに。
もっと見る、詳細

Solid Colors

Default
ダークカラー。最も汎用的なCTA。
送信、保存
Primary
ブランドカラー。ブランドを強調するアクション。
サインアップ
Secondary
補助的なアクション。プライマリと並べて使用。
キャンセル、戻る
Destructive
破壊的なアクション。削除や取消不能な操作に。
削除、リセット

Sizes

xs
高さ28px
横パディング10px
Gap4px
アイコン14px
フォント12px
sm
高さ32px
横パディング12px
Gap8px
アイコン14px
フォント13px
md
高さ36px
横パディング14px
Gap8px
アイコン16px
フォント14px
default
高さ40px
横パディング16px
Gap8px
アイコン16px
フォント14px
lg
高さ48px
横パディング24px
Gap8px
アイコン16px
フォント16px

タッチターゲット: WCAG 2.5.8基準では最小24pxのタッチ領域が必要です。 最小のxs（28px）でもWCAG基準を満たしています。

Features

With Icons

States

Solid Primary
Outline

API

Props

variant"solid"
"solid" | "outline" | "ghost" | "link"

ボタンのスタイル。solid=600、outline/ghost/link=400のフォント太さ

color"default"
"default" | "primary" | "secondary" | "destructive"

solidバリアントの色（default=ダーク、primary=ブランド、secondary=セカンダリ、destructive=エラー）。solid以外では無視

size"default"
"xs" | "sm" | "md" | "default" | "lg" | "icon"

ボタンの高さとパディング

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)

fullWidthfalse
boolean

幅100%で表示

loadingfalse
boolean

ローディングStates

disabledfalse
boolean

無効States

leftIconundefined
ReactNode

左側アイコン

rightIconundefined
ReactNode

右側アイコン

fontWeightundefined
"normal" | "semibold"

フォント太さの上書き。未指定時はvariantデフォルト（solid系=600, outline/ghost/link=400）。直接prop > ButtonGroupコンテキスト > variantデフォルトの優先順位

selectedfalse
boolean

選択States（outline/ghostのみ対応）。outlineはbg-background-muted、ghostはfont-semibold。他のvariantでは効果なし

pressEffectundefined
boolean

プレスエフェクト（active:scale-pressed）。未指定時はtrueとして動作。falseで無効化

asChildfalse
boolean

Slotとしてレンダリング