Dividerディバイダー

視覚的に区切るためのコンポーネントです。コンテナ内でコンテンツをグループ化する際にも使用します。

更新 2024/11/1

カラー

視覚的な強弱に応じて使い分けてください。

Light
Normal
Dark

import { Divider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function ColorSample() {
  return (
    <Dl>
      <Dt>Light</Dt>
      <Dd>
        <Divider color="light" />
      </Dd>

      <Dt>Normal</Dt>
      <Dd>
        <Divider color="normal" />
      </Dd>

      <Dt>Dark</Dt>
      <Dd>
        <Divider color="dark" />
      </Dd>
    </Dl>
  );
}

バリエーション

水平と垂直の2種類があります。

Horizontal

Vertical