Components / data-display

Divider

A thin rule that separates content. Horizontal separates stacked sections, Vertical separates inline items (toolbar groups), Labeled adds a short centered word such as "OR".

import { Divider } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Divider } from '@basiiik/ui';

<Divider />

• Static. decorative hides it from assistive tech; otherwise horizontal is an <hr> and the others are role=separator.
• Storybook: Data display/Divider.

Props

Other props

States. Static. decorative hides it from assistive tech; otherwise horizontal is an <hr> and the others are role=separator.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Separate stacked sections or inline groups

Do not use it when

• Table row borders (belong to Table Row)

Rules for agents

• Prefer spacing first; add a Divider only when spacing alone does not make the grouping clear
• Set decorative when the structure (headings, lists, cards) already shows the grouping
• Use emphasis="subtle" inside a group and "strong" between major sections
• Use orientation="labeled" with label for a short word between alternatives, such as "OR"

Avoid

• A Divider between every item of a list or every row of a table
• Several Dividers in a row, or a Divider directly next to a Card border
• Long text in a labeled Divider

Accessibility

• aria-orientation="vertical" for vertical separators with role="separator"

Colour tokens it reads

Related

• Card
• List Item

data-display 9 Figma variants Try it in the live demo