SEED Design

Divider

Divider는 구분선을 표시하는 컴포넌트입니다.

import { Box, Divider, VStack } from "@seed-design/react";

export default function DividerPreview() {
  return (
    <VStack width="full" bg="bg.layerDefault" p="x4">
      <Box p="x4">
        Nisi elit pariatur incididunt quis fugiat mollit ipsum fugiat duis culpa esse incididunt
        cupidatat.
      </Box>
      <Divider />
      <Box p="x4">Consectetur voluptate quis do culpa et culpa.</Box>
    </VStack>
  );
}

Props

Prop

Type

Usage

import { Divider } from "@seed-design/react";
<Divider />

Screen Reader Behavior

Divider는 기본적으로 <hr />을 렌더링합니다. <hr />은 의미를 가진(semantic) 구분선이며, 스크린 리더 역시 해당 요소를 "수평(수직) 분할선"으로 읽습니다.

Divider가 의미를 가지지 않은 장식적 요소라면, as prop을 활용해 <div> 등으로 렌더링하여 스크린 리더가 해당 요소를 읽지 않도록 해야 합니다.

반대로, Divider를 <li> 등 <hr />이 아닌 요소로 렌더링해야 하는 상황에서, 스크린 리더가 해당 요소를 읽어야 한다면, role="separator"를 명시적으로 지정해야 합니다.

Examples

Orientation

import { Box, Divider, HStack, VStack } from "@seed-design/react";

export default function DividerOrientation() {
  return (
    <VStack width="full" gap="x4">
      <VStack flexGrow bg="bg.layerDefault" gap="x4">
        <Box bg="palette.blue400" height="x8" />
        <Divider />
        <Box bg="palette.blue400" height="x8" />
      </VStack>
      <HStack flexGrow bg="bg.layerDefault" gap="x4" height="x16">
        <Box bg="palette.blue400" flexGrow />
        <Divider orientation="vertical" />
        <Box bg="palette.blue400" flexGrow />
      </HStack>
    </VStack>
  );
}

Last updated on

On this page

Props
Usage
Screen Reader Behavior
Examples
Orientation