Build / Atoms

Divider

atom
play-fn

A one-pixel rule on the Hairline token.

Renders <hr>, whose implicit ARIA role is already separator.

import { Divider } from '@meetcard/deck'

Example

<Divider /> <Divider orientation="vertical" decorative />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Between stacked sections — the common case.

Horizontal

Source

const Horizontal = () => <Stack gap={12}>
    <Text>Above the rule</Text>
    <Divider />
    <Text>Below the rule</Text>
</Stack>;

Between items in a row, such as toolbar groups.

Vertical

Source

const Vertical = () => <Stack direction="row" gap={12} align="center">
    <Text>Left</Text>
    <Divider orientation="vertical" />
    <Text>Right</Text>
</Stack>;

Hidden from assistive tech when the grouping is already conveyed.

Decorative

Source

const Decorative = () => <Divider decorative />;

Strong, for the one boundary on a surface that has to hold.

Strong

Source

const Strong = () => <Divider strong />;

Props

Prop	Type	Default	Description
`decorative`	`boolean`	`false`	Hide from assistive tech. Set this when the rule is purely visual and the surrounding markup already conveys the grouping.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	—
`strong`	`boolean`	`false`	Use the higher-contrast border token.

Also accepts everything from HTMLAttributes, so id, data-* and event handlers pass straight through.