Divider
A 1px line that separates sections — horizontal or vertical, optionally with text in the middle.
Mahsulotlar220 000 so'm
Yetkazib berish25 000 so'm
Jami245 000 so'm
'use client';
import { Divider } from '@akhatmirzo/ui';
export default function DividerBasic() {
return (
<div className="flex w-full max-w-sm flex-col gap-3 text-sm text-text">
<div className="flex justify-between">
<span>Mahsulotlar</span>
<span>220 000 so'm</span>
</div>
<div className="flex justify-between text-text-muted">
<span>Yetkazib berish</span>
<span>25 000 so'm</span>
</div>
<Divider />
<div className="flex justify-between font-semibold">
<span>Jami</span>
<span>245 000 so'm</span>
</div>
</div>
);
}
Import
import { Divider } from '@akhatmirzo/ui';When to use
- To separate parts that differ in meaning — the total on a receipt, menu groups, sections inside a card.
- Spacing is often enough. Don't put a line between every item — the page turns into a grid.
- Between alternatives —
label="or": "Sign in with phone" / "Sign in with Google". - If it's purely decorative (say, between navigation links), use
decorative.
With text
label puts text in the middle of the line. When it's a string, it also becomes the
aria-label.
yoki
'use client';
import { Button, Divider } from '@akhatmirzo/ui';
export default function DividerLabel() {
return (
<div className="flex w-full max-w-sm flex-col gap-4">
<Button variant="primary" fullWidth>
Telefon orqali kirish
</Button>
<Divider label="yoki" />
<Button variant="outline" fullWidth>
Google orqali kirish
</Button>
</div>
);
}
Vertical
orientation="vertical" sits inside a row and stretches to the parent's height. Give the parent
a height (h-5) or use items-stretch.
Bosh sahifaBuyurtmalarSozlamalar
'use client';
import { Divider } from '@akhatmirzo/ui';
export default function DividerVertical() {
return (
<div className="flex h-5 items-center gap-3 text-sm font-medium text-text-subtle">
<span>Bosh sahifa</span>
<Divider orientation="vertical" decorative />
<span>Buyurtmalar</span>
<Divider orientation="vertical" decorative />
<span>Sozlamalar</span>
</div>
);
}
Props
Divider accepts every other <div> attribute. Change the color with className, for example
bg-border-strong.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction |
label | ReactNode | — | Text in the middle ("or") |
decorative | boolean | false | Decoration only — hidden from screen readers (role="none") |
The root element has a data-orientation attribute.
Accessibility
role="separator"witharia-orientation— screen readers announce the boundary between sections.- A string
labelbecomes the separator'saria-label. decorativesetsrole="none", so meaningless lines aren't announced. Use it between navigation links or toolbar groups.