Skip to content
omaris

Containment

Divider

MD3 divider — a hairline that separates content without dividing the layout. inset indents it past a leading icon or avatar so the rule lines up with the text column of a list.

import { Divider } from 'omaris'
Learn

Examples

Basic

inset indents the rule past a leading icon or avatar, so it lines up with the text column instead of cutting the whole row in half.

Amina Yusuf Amina Yusuf
Dilan Karim Dilan Karim
Hevi Salih Hevi Salih
<script lang="ts">	import { Avatar, Divider } from 'omaris';</script>​<div class="w-full max-w-sm rounded-shape-lg border border-border">	<div class="flex items-center gap-3 p-3">		<Avatar name="Amina Yusuf" size="sm" colorize />		<span class="text-body-md">Amina Yusuf</span>	</div>	<Divider inset="start" />	<div class="flex items-center gap-3 p-3">		<Avatar name="Dilan Karim" size="sm" colorize />		<span class="text-body-md">Dilan Karim</span>	</div>	<Divider inset="start" />	<div class="flex items-center gap-3 p-3">		<Avatar name="Hevi Salih" size="sm" colorize />		<span class="text-body-md">Hevi Salih</span>	</div></div>

Vertical and labelled

A label in the rule for the "or" between two ways of signing in; orientation="vertical" between inline metadata in a toolbar.

or
Draft Edited 3m ago 2 comments
<script lang="ts">	import { Divider } from 'omaris';</script>​<div class="flex w-full max-w-sm flex-col gap-6">	<Divider>or</Divider>​	<div class="flex h-10 items-center gap-4">		<span class="text-body-sm text-muted-foreground">Draft</span>		<Divider orientation="vertical" />		<span class="text-body-sm text-muted-foreground">Edited 3m ago</span>		<Divider orientation="vertical" emphasis="strong" />		<span class="text-body-sm text-muted-foreground">2 comments</span>	</div></div>

When to use it

Use it for

  • Rows dense enough to run together, like a message list or a menu with two groups. inset="start" past an avatar or icon lines the rule up with the text column.
  • A rule with a word on it between two ways of doing the same thing: <Divider>or</Divider> between "Continue with Google" and the email form.
  • A vertical rule between inline metadata or toolbar groups. orientation="vertical" between "Draft" and "Edited 3m ago".
  • A full-width rule between unrelated regions of a screen, in emphasis="strong".

Not for

  • Between every row of a List by hand → dividers on List. It insets past the leading slot and skips the last row.
  • Between cards or sections that already have their own surface → a gap-6. A hairline under a Card is noise.
  • Under a heading, as decoration → a Text heading with space below it.
  • A section title inside a rule → a heading. A labelled divider is for "or" and "then", not "Details".

Do

  • Try whitespace first. Add a divider only when the grouping is still unclear.
  • Use inset="both" for a rule inside a padded card, so it stops where the content stops.
  • Give a vertical divider a flex row with a height (h-10 items-center) to stretch in. It is self-stretch, not a fixed height.
  • Keep emphasis="subtle" inside lists and menus. strong is for the one rule between the app bar's region and the page.

Don't

  • Draw one after the last row.
  • Stack a divider on a spacing utility or a border-b. Pick one.
  • Put a rule under a Top App Bar. It already lifts onto a raised surface as the page scrolls.
  • Use it as a spacer. It has no height.
Pairs with List Menu Card Top App Bar Text

Quick reference

orientation
  • horizontal (default)
  • vertical
inset
  • none (default)
  • start
  • both

Indents the rule to line up with a list's text column.

emphasis
  • subtle (default)
  • strong

API

Divider

MD3 divider — a hairline that separates content without dividing the layout. inset indents it past a leading icon or avatar so the rule lines up with the text column of a list.

With children it becomes a labelled rule, with the line drawn on both sides of the label. The two rules are flex-1, so they share whatever the label leaves and the divider survives a narrow container instead of pushing the label out of it.

import { Divider } from 'omaris'

Props

orientation

Defaults to 'horizontal'

DividerOrientation
horizontal
vertical
inset

Defaults to 'none'

DividerInset

Indent so the rule aligns with a list's text column.

none
start
both
emphasis

Defaults to 'subtle'

DividerEmphasis
subtle
strong
class
string
children
Snippet

A label sat in the middle of the rule. Horizontal only.