RebarSteel
Get startedFoundationsComponentsPatternsRules

Primitives

Box, Stack, Inline, Flex, Grid, Bleed, Pressable, Anchor 는 디자인 토큰을 바로 쓰는 레이아웃·상호작용 기본 요소예요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/primitives.json

프리미티브는 'space.100', 'color.background.neutral' 처럼 토큰 이름을 그대로 props 로 받아요. 토큰 밖의 값을 쓸 수 없어서 간격과 색이 디자인 시스템을 벗어나지 않아요. 나머지 스타일은 className 으로 토큰 유틸을 더해요.

프리미티브용도
Box배경·패딩이 필요한 범용 컨테이너
Stack자식을 세로로 쌓기
Inline자식을 가로로 나란히 놓기
FlexFlexbox 를 직접 다루기
GridCSS Grid 레이아웃
Bleed부모 패딩 밖까지 넓히기
Pressable직접 디자인한 버튼
Anchor직접 디자인한 링크

Examples

Box

Box 는 기본이 div 이고 as 로 다른 요소가 될 수 있어요(버튼은 Pressable, 링크는 Anchor). backgroundColor 에는 color.background.* 와 elevation.surface.* 토큰을 쓸 수 있어요. 굵은 배경을 주면 안의 Heading 과 Text 가 자동으로 inverse 색이 돼요.

Box 패딩

padding 은 사방, paddingBlock·paddingInline 은 세로·가로, paddingBlockStart·paddingBlockEnd·paddingInlineStart·paddingInlineEnd 는 한쪽씩 지정해요. 구체적인 값이 우선해요. 값은 space.0 부터 space.1000 까지의 간격 토큰이에요.

Stack

Stack 은 자식을 세로로 쌓아요. space 로 간격을, alignInline 으로 가로 정렬을, alignBlock·spread 로 세로 배치를 정해요. grow="fill" 이면 부모를 채워요.

Inline

Inline 은 자식을 가로로 나란히 놓아요. alignBlock 으로 세로 정렬(기본 start), alignInline 으로 가로 정렬, spread="space-between" 으로 양 끝 배치를 해요.

Inline 줄바꿈

shouldWrap 을 켜면 공간이 모자랄 때 다음 줄로 넘어가요. 줄 사이 간격은 rowSpace 로 따로 정할 수 있어요.

Inline 구분자

separator 를 주면 자식 사이마다 구분자를 넣어요. 문자열이면 color.text.subtle 색의 span 으로 감싸져요.

Flex

Flex 는 Flexbox 속성(direction, wrap, justifyContent, alignItems, gap, rowGap, columnGap)을 그대로 노출해요. 대부분은 Stack 과 Inline 으로 충분하고, 그보다 세밀한 제어가 필요할 때 써요.

Grid

Grid 는 CSS Grid 를 써요. templateColumns, templateRows, templateAreas 로 틀을 잡고 gap 으로 토큰 간격을 줘요.

Bleed

Bleed 는 음수 마진으로 부모 패딩을 무시하고 내용을 넓혀요. all, inline, block 에 space.025 ~ space.200 을 줘요.

Pressable

Pressable 은 직접 디자인한 버튼을 만드는 프리미티브예요. <button type="button"> 으로 렌더링되고, 기본 포커스 링(color.border.focused, 2px)과 isDisabled 처리가 들어 있어요. Box 처럼 backgroundColor·padding 도 받아요.

Anchor

Anchor 는 직접 디자인한 링크를 만드는 프리미티브예요. 기본으로 밑줄과 포커스 링이 있고, target="_blank" 면 스크린리더에 "(새 창에서 열림)" 을 덧붙여 읽어 줘요(newWindowLabel 로 바꿀 수 있어요).

Usage guidelines

  • 레이아웃은 Stack 과 Inline 부터. 세로·가로 배치는 Stack 과 Inline 으로 만들고, 배경·패딩이 필요한 곳에 Box 를 더해요. Flex·Grid 는 더 복잡한 배치가 필요할 때 써요.
  • Box 를 남용하지 않아요. Box 는 가장 범용적인 요소라, 더 구체적인 프리미티브가 맞는지 먼저 확인해요.
  • Pressable 은 기존 컴포넌트로 안 될 때만. Button 이나 메뉴 같은 기존 컴포넌트를 다시 만드는 데 쓰면 화면 사이 일관성이 깨져요. 버튼처럼 보이는 커스텀 컨트롤에는 motion.button.* 토큰으로 배경색 전환만 줘요.
  • 이동은 Anchor, 동작은 Pressable. 모달 열기·폼 제출 같은 화면 안의 동작은 Pressable, URL 이 바뀌는 이동은 Anchor 를 써요. 일반 링크는 기존 링크 컴포넌트를 먼저 고려해요.
  • 새 창은 꼭 필요할 때만. 작업 흐름을 잃을 수 있거나 외부 사이트로 갈 때만 target="_blank" 를 써요.
  • 링크 문구는 구체적으로. "여기", "자세히" 대신 목적지를 알 수 있는 문구를 쓰고, 다운로드 링크에는 파일 형식과 크기를 적어요.
Do· 토큰 props 로 간격
space="space.100" 처럼 간격 토큰을 써서 리듬을 맞춰요.
Don't· Pressable 에 밑줄
Pressable 에 밑줄을 넣으면 링크처럼 보여 동작을 오해하게 만들어요.

Accessibility

  • Pressable 은 기본 버튼이라 Tab 으로 포커스하고 Enter·Space 로 실행해요. 포커스 링이 기본으로 있으니 따로 포커스 스타일을 추가하거나 애니메이션을 넣지 않아요.
  • 아이콘만 있는 Pressable 에는 동작을 설명하는 이름을 꼭 줘요(예: "이슈 색을 노란색으로 바꾸기"). 눌리는 영역은 최소 24×24px 로 해요.
  • 비활성 버튼은 이유를 알기 어렵고 포커스도 받지 못하니 되도록 피하고, 눌렀을 때 이유를 알려주는 방식을 고려해요.
  • Anchor 는 기본으로 밑줄이 있어요. 본문 속 링크는 색만으로 구분하지 말고 밑줄을 유지해요. 내비게이션처럼 맥락상 링크임이 분명할 때만 밑줄을 뺄 수 있어요.
  • 링크 글자는 12px 이상, 글자가 아닌 링크의 클릭 영역은 24×24px 이상으로 해요.
  • 레이아웃 프리미티브(Box, Stack, Inline, Flex, Grid)는 의미가 없는 div 예요. 목록이면 as="ul"/as="li" 처럼 의미에 맞는 요소를 골라요.

Props

Box

Prop

Type

Stack

Prop

Type

Inline

Prop

Type

Flex

Prop

Type

Grid

Prop

Type

Bleed

Prop

Type

Pressable

Prop

Type

Anchor

Prop

Type

Popup

팝업은 트리거 옆 오버레이에 짧은 내용이나 작은 상호작용을 띄워요.

Progress Bar

진행 막대는 시스템 작업이 얼마나 진행됐는지 보여줘요.

On this page

설치ExamplesBoxBox 패딩StackInlineInline 줄바꿈Inline 구분자FlexGridBleedPressableAnchorUsage guidelinesAccessibilityPropsBoxStackInlineFlexGridBleedPressableAnchor