Divider

콘텐츠를 시각적으로 나누는 얇은 선입니다. 라벨을 넣어 구간의 이름을 붙일 수도 있습니다.

import { Divider } from 'neba';

<Divider />
<Divider>또는</Divider>
<Divider orientation="vertical" />;

Props

Prop	타입	기본값	설명
orientation공통	'horizontal' | 'vertical'	'horizontal'	선이 놓이는 방향. 세로 선은 자기 높이가 없고 flex 부모에 맞춰 늘어납니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. Card가 섹션을 나눌 때 쓰는 것과 같은 하이라인입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	라벨의 타입 스케일. 선 자체에는 크기가 없습니다
length	number | string	—	선이 뻗는 길이, 가로 divider의 너비, 세로 divider의 높이. 숫자는 px, 문자열은 임의의 CSS 길이입니다. 생략하면 가로는 컨테이너의 100%, 세로는 flex 행 높이만큼 늘어납니다
thickness	number | string	1	선의 두께. 숫자는 px, 문자열은 임의의 CSS 길이입니다
children	ReactNode	—	선 사이에 들어가는 라벨. 문자열이면 aria-label로도 쓰입니다
textAlign	'start' | 'center' | 'end'	'center'	라벨의 위치. 가운데가 아니면 가까운 쪽에 짧은 선이 남습니다

variant와 elevation은 없습니다. 선은 border 한 변으로만 그려지므로 선 두께 외에 레이아웃을 차지하지 않습니다.

예시

length와 thickness

length는 선이 뻗는 길이입니다. 가로 divider에서는 너비, 세로 divider에서는 높이입니다. thickness는 선의 두께입니다. 둘 다 숫자(px) 또는 임의의 CSS 길이 문자열을 받습니다. 생략하면 가로 선은 컨테이너를 가득 채우고, 세로 선은 자신이 놓인 flex 행의 높이에 맞춰 늘어납니다.

import { Divider, Typography } from 'neba';

/**
 * `length` is the long axis and `thickness` is the short one, whichever way the
 * rule runs. Both take a number of pixels or any CSS length.
 */
export default function DividerSize() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-4">
      <Typography level="caption">Full width, 1px — the default</Typography>
      <Divider />

      <Typography level="caption">length=&quot;50%&quot;</Typography>
      <Divider length="50%" />

      <Typography level="caption">length=&#123;120&#125; thickness=&#123;2&#125;</Typography>
      <Divider length={120} thickness={2} color="success" />

      <Typography level="caption">thickness=&quot;0.25rem&quot;</Typography>
      <Divider thickness="0.25rem" color="danger" />

      <Typography level="caption">Vertical, length=&#123;48&#125;</Typography>
      <div className="flex items-center gap-4">
        <Typography level="caption">before</Typography>
        <Divider orientation="vertical" length={48} thickness={2} color="info" />
        <Typography level="caption">after</Typography>
      </div>
    </div>
  );
}

textAlign

children으로 라벨을 넣으면 선이 라벨을 비켜 갑니다. center는 선을 절반으로 나누고, start와 end는 가까운 쪽에 짧은 선만 남겨 라벨이 선 안에 놓인 것처럼 보이게 합니다.

import { Divider } from 'neba';

export default function DividerLabels() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Divider textAlign="start">Recent</Divider>
      <Divider>Older</Divider>
      <Divider textAlign="end">Archived</Divider>
    </div>
  );
}

orientation

vertical은 자기 높이를 갖지 않고 flex 부모의 높이에 맞춰 늘어납니다. 툴바에서 컨트롤 그룹을 나눌 때 쓰는 형태입니다. 세로 라벨은 선 방향에 맞춰 회전합니다.

import { Divider } from 'neba';

export default function DividerVertical() {
  return (
    <div className="flex h-32 items-stretch gap-6">
      <div className="flex w-28 items-center justify-center text-[0.8125rem]">Before</div>
      <Divider orientation="vertical" />
      <div className="flex w-28 items-center justify-center text-[0.8125rem]">Between</div>
      <Divider orientation="vertical">AND</Divider>
      <div className="flex w-28 items-center justify-center text-[0.8125rem]">After</div>
    </div>
  );
}

color

color는 선에만 적용되고, 아주 옅게 들어갑니다.

import { Divider } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function DividerColors() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      {COLORS.map((color) => (
        <Divider key={color} color={color}>
          {color}
        </Divider>
      ))}
    </div>
  );
}

접근성

• role="separator"로 렌더링됩니다.
• separator는 내용에서 accessible name을 가져오는 role이 아니므로, 문자열 라벨은 aria-label로도 함께 전달됩니다. node를 넘긴 경우에는 그중 무엇이 이름인지 알 수 없으므로 그대로 둡니다. 필요하면 aria-label을 직접 지정하세요.