PackagesUIToken Reference
Spacing
スペーシングトークンのリファレンス。
基本単位は 4px。Tailwind のデフォルトスペーシングスケールをそのまま使用する。
スケール
以下は推奨値である。
| Tailwind | 値 | 主な用途 |
|---|---|---|
0.5 | 2px | アイコンとテキストの微調整 |
1 | 4px | コンパクトUI内の最小余白 |
1.5 | 6px | 小さいボタン内のpadding |
2 | 8px | フォーム要素内のpadding |
3 | 12px | カード内のpadding、フォームフィールド間のgap |
4 | 16px | コンポーネント間の基本gap |
6 | 24px | セクション内の余白 |
8 | 32px | セクション間の余白 |
12 | 48px | 大きなセクション区切り |
16 | 64px | ページレベルの余白 |
使い分け
コンポーネント内部の余白
関連性が強いため、小さい値を使う。
// ボタン内のアイコンとテキスト
<button className="gap-1.5"> {/* 6px */}
<Icon name="Mail" />
送信
</button>
// カード内のpadding
<div className="p-4"> {/* 16px */}
...
</div>コンポーネント間の余白
グルーピングの意図に応じて段階を変える。
// 関連するフォームフィールド同士
<div className="flex flex-col gap-3"> {/* 12px: 近接グループ */}
<TextField label="姓" />
<TextField label="名" />
</div>
// フォームセクション間
<div className="flex flex-col gap-8"> {/* 32px: セクション区切り */}
<section>基本情報</section>
<section>連絡先</section>
</div>