PackagesUIComponentsLayouts
Box
padding・borderRadius・background・shadowをトークンベースで適用する汎用ボックスコンポーネント。
いつ使うか
- コンポーネントの外側に padding を与えたいとき
- カード風の背景・角丸・影を手軽に適用したいとき
- Tailwind の直書きを避けて、デザイントークンに沿ったスペーシングを維持したいとき
いつ使わないか
display: flexやgapが必要な場合は Stack / HStack を使うdisplay: gridが必要な場合は Grid を使う- 単にセンタリングしたい場合は Center を使う
Usage
import { Box } from '@bi-shop-it/ui/box';
<Box background="muted" borderRadius="md" padding="md">
<p>コンテンツ</p>
</Box>;Props
| Prop | 型 | デフォルト | Responsive | 説明 |
|---|---|---|---|---|
padding | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | なし | Yes | 全方向の内側余白 |
paddingX | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | なし | Yes | 水平方向の内側余白 |
paddingY | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | なし | Yes | 垂直方向の内側余白 |
borderRadius | 'none' | 'sm' | 'md' | 'lg' | 'full' | なし | No | 角丸 |
background | 'default' | 'card' | 'muted' | なし | No | 背景色 |
shadow | 'sm' | 'md' | 'lg' | なし | No | 影 |
asChild | boolean | false | - | 子要素をルート要素として使用する |
padding トークン
Stack の gap と同じトークン体系を使用する。
| サイズ | 値 | 用途 |
|---|---|---|
xs | 4px | 密接な内側余白 |
sm | 8px | コンパクトな内側余白 |
md | 16px | 標準的な内側余白 |
lg | 24px | ゆとりのある内側余白 |
xl | 32px | 広い内側余白 |
状態
Padding 比較
xs
Content
sm
Content
md
Content
lg
Content
xl
Content
<Box padding="xs">...</Box>
<Box padding="sm">...</Box>
<Box padding="md">...</Box>
<Box padding="lg">...</Box>
<Box padding="xl">...</Box>PaddingX / PaddingY
paddingX="lg"
Content
paddingY="lg"
Content
<Box paddingX="lg" paddingY="sm">...</Box>
<Box paddingX="sm" paddingY="lg">...</Box>Border Radius
none
Content
sm
Content
md
Content
lg
Content
full
Content
<Box borderRadius="none">...</Box>
<Box borderRadius="sm">...</Box>
<Box borderRadius="md">...</Box>
<Box borderRadius="lg">...</Box>
<Box borderRadius="full">...</Box>Background
default
Content
card
Content
muted
Content
<Box background="default">...</Box>
<Box background="card">...</Box>
<Box background="muted">...</Box>Shadow
sm
Content
md
Content
lg
Content
<Box shadow="sm">...</Box>
<Box shadow="md">...</Box>
<Box shadow="lg">...</Box>Responsive Padding
ブレークポイントごとに異なる padding を指定できる。
リサイズして確認
<Box padding={{ base: 'sm', md: 'md', lg: 'lg' }}>リサイズして確認</Box>Stack との使い分け
| やりたいこと | 使うコンポーネント |
|---|---|
| 要素を並べて間隔を空ける | Stack / HStack |
| 要素の外側に余白を付ける | Box |
| 背景色・角丸・影を付ける | Box |
| 並べつつ余白も付ける | Box の中に Stack |
アクセシビリティ
コンポーネントが内部で処理すること
- レイアウト専用のコンポーネントであり、セマンティクスは付与しない（
divを使用する） asChildで任意のセマンティック要素（section,aside等）に差し替え可能である
利用者が対応すること
- セマンティクスが必要な場合は
asChildで適切な要素を指定すること
関連コンポーネント
- Stack / HStack — 要素の配置と間隔
- Center — センタリング
- Container — 最大幅の制御