import { Canvas, Meta } from "@storybook/blocks";

import * as DividerStories from "./Divider.stories";

<Meta of={DividerStories} />

Divider

A divider is a thin line that groups content in lists and layouts.

<Canvas of={DividerStories.DividerStory} />

Kind

Horizontal

<Canvas of={DividerStories.DividerStory} />

Vertical

<Canvas of={DividerStories.DividerVerticalStory} />

Usage

• Dividers are a useful tool for organizing content into distinct groups. They can differentiate between types of information or create visual hierarchy.
• Supports horizontal and vertical scrolling, and grows to the length of the parent.
• Use dividers sparingly and consider other design elements, such as space, to achieve balance in your design.

TODO: When should we use dividers and when should we use space?