@olundot/ui · Reference

Separator

콘텐츠 흐름 안에서 섹션, 도구막대, 의미 그룹을 얇은 선으로 구분하는 primitive입니다.

orientation
horizontal과 vertical 방향을 지원합니다.
decorative
기본값은 true이며 의미 있는 구분선이면 false로 바꿉니다.
size
horizontal은 h-px/w-full, vertical은 h-full/w-px로 동작합니다.

섹션 구분

decorative horizontal

기본 정보

다음 섹션과 시각적으로 분리합니다.

코드 보기tsx
import { Separator } from "@olundot/ui";

export function SectionDivider() {
  return (
    <section>
      <h2>기본 정보</h2>
      <Separator />
      <p>다음 섹션과 시각적으로 분리합니다.</p>
    </section>
  );
}

도구막대 구분

vertical orientation
코드 보기tsx
import { Button, Separator } from "@olundot/ui";

export function ToolbarDivider() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, height: 38 }}>
      <Button size="sm" variant="ghost">요약</Button>
      <Separator orientation="vertical" />
      <Button size="sm" variant="ghost">설정</Button>
    </div>
  );
}

의미 있는 구분

decorative=false

필수 정보

선택 정보

코드 보기tsx
import { Separator } from "@olundot/ui";

export function SemanticSeparator() {
  return (
    <div>
      <p>필수 정보</p>
      <Separator decorative={false} />
      <p>선택 정보</p>
    </div>
  );
}