Divider

A <Divider> is a visual separator between two groups of content, either horizontally between page sections or vertically within an inline group such as a toolbar.

Anatomy

The <Divider> component contains a single element that can be used to create a horizontal or vertical line to separate content.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

The Divider component supports variants to control the visual weight of the separator.

Usage

You should use <Divider> to visually separate related content, such as sections in a settings page, items in a list, or actions in a toolbar. They help improve clarity and organization without adding semantic meaning. However, dividers should be used sparingly, only when spacing alone doesn't provide enough separation. Avoid them if they create visual clutter or when semantic elements like headings or sections are more appropriate.

import { Divider, Stack, Text } from '@marigold/components';export default () => (  <Stack space={4}>    <Stack space={2}>      <Text weight="bold">Account Information</Text>      <Text>Update your name, email address, and password.</Text>    </Stack>    <Divider />    <Stack space={2}>      <Text weight="bold">Notification Settings</Text>      <Text> Choose how you want to receive updates and alerts.</Text>    </Stack>  </Stack>);

Orientation

Set orientation="vertical" to render a vertical divider. This is useful for separating items in a horizontal layout such as toolbars or inline groups. A vertical <Divider> expects a parent that establishes a height (e.g. <Inline>). It falls back to a minimum height so it remains visible when the parent has none.

import { Divider, IconButton, Inline } from '@marigold/components';import { Bold, Delete, Italic, Underline } from '@marigold/icons';export default () => (  <Inline space={2} alignY="center">    <IconButton aria-label="Bold">      <Bold />    </IconButton>    <IconButton aria-label="Italic">      <Italic />    </IconButton>    <IconButton aria-label="Underline">      <Underline />    </IconButton>    <Divider orientation="vertical" />    <IconButton aria-label="Delete">      <Delete />    </IconButton>  </Inline>);

Accessibility

The <Divider> uses the ARIA role separator to indicate that it visually separates and distinguishes sections of content or groups of menu items.

Props

Divider

Alternative components

• Stack: If you need to create space between elements, consider using the <Stack> component instead of a divider. It provides spacing without the visual line.
• Inline / Split: Pair with a vertical <Divider> to group related actions in a toolbar-style horizontal layout.