Box

汎用的なレイアウトプリミティブコンポーネント。padding、margin、border、背景色などのスタイルプロパティを提供します。

基本的な使い方

Preview

Padding

8段階のpaddingサイズを提供します。

Preview

Margin

8段階のmarginサイズを提供します。

Preview

Border Radius

6段階のborder radiusサイズを提供します。

Preview

Border

border propでボーダーを追加できます。

Preview

Background Color

backgroundColor propで背景色を設定できます。CSS変数を使用します。

Preview

as Prop

as propで任意のHTML要素としてレンダリングできます。

Preview

Props

Prop	Type	Default	Description
`as`	`ElementType`	`'div'`	レンダリングするHTML要素
`padding`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'`	-	パディング
`margin`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'`	-	マージン
`borderRadius`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`	-	ボーダー半径
`backgroundColor`	`string`	-	背景色（CSS変数推奨）
`border`	`boolean`	`false`	ボーダーの表示
`className`	`string`	-	追加のCSSクラス

使用例

カード風のレイアウト:

import { Box, Typography } from '@codeconnect-llc/design-system'

export function Card() {
  return (
    <Box
      padding="lg"
      borderRadius="lg"
      border
      style={{ backgroundColor: 'var(--color-bg-primary)' }}
    >
      <Typography variant="heading" level={3}>
        タイトル
      </Typography>
      <Typography variant="body">
        これはカード風のレイアウトです。Boxコンポーネントを使って簡単に作成できます。
      </Typography>
    </Box>
  )
}

セクション区切り:

import { Box } from '@codeconnect-llc/design-system'

export function Sections() {
  return (
    <div>
      <Box as="section" padding="xl" style={{ backgroundColor: 'var(--color-bg-secondary)' }}>
        <h2>セクション1</h2>
        <p>コンテンツ...</p>
      </Box>

      <Box as="section" padding="xl" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
        <h2>セクション2</h2>
        <p>コンテンツ...</p>
      </Box>
    </div>
  )
}

コンテナ:

import { Box } from '@codeconnect-llc/design-system'

export function Container({ children }) {
  return (
    <Box
      as="main"
      padding="lg"
      margin="auto"
      style={{ maxWidth: '1200px' }}
    >
      {children}
    </Box>
  )
}