Box

Box는 Foundation spacing, color, radius, stroke 토큰을 하나의 표면에 적용합니다. CSS를 직접 만들지 않고 토큰 기반 래퍼가 필요할 때 사용하세요.

Inset content

계약

Overview

Machine-readable contract from Component Spec.

component: boxexport: Boxversion: 1attributes: data-refineui=box

Anatomy

Part	data-refineui
root	box

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Box } from "@refineui/react";

<Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">
  Content
</Box>

<Box
  as="section"
  paddingX="sizeLarge"
  paddingY="sizeSmall"
  border="strokeWidthThin"
  borderColor="borderDefault"
  background="backgroundPrimary"
>
  Outlined section
</Box>

API 레퍼런스

Prop	Default	Type	Description
as	"div"	ElementType	루트 요소.
padding	—	Spacing token	모든 면 패딩.
paddingX	—	Spacing token	가로 패딩.
paddingY	—	Spacing token	세로 패딩.
background	—	Background / surface alias	채우기 색.
radius	—	Radius token	모서리 radius.
border	—	Stroke token	테두리 두께.
borderColor	—	Border color alias	테두리 색(`border`와 함께 기본 적용).