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.
Try it
or
Knobs
orientation inset Indents the rule to line up with a list's text column.
emphasis <script> import { Divider } from 'omaris';</script><Divider>or</Divider>Walkthrough
1. 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>2. 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>