Skip to content
DOL Studio

Divider

Design: Stable Code: Coded layoutseparator 6 Figma sets Divider/Dot

Live preview

Horizontal tones

3 tones — subtle (slate-100, section-within-section) / default (slate-200, primary separator) / strong (slate-300, emphasized break).

Subtle (slate-100)

Default (slate-200)

Strong (slate-300)

With label

`children` slot renders inline label inside the rule. 3 alignments — center (default) / start / end. Common for 'OR / Hoặc' separators in forms.

Line styles

3 stroke styles — solid (default) / dashed (dotted-line equivalent) / dotted (subtle dash). Tone is independent of style.

Solid (default)

Dashed

Dotted

Vertical orientation

`orientation=vertical` — toolbar separator pattern. Auto-inherits parent height; pair with `h-N` on the container.

Import & files

Import
import { Divider } from "@dol/ui/divider";
Source file
packages/@dol/ui/src/divider/Divider.tsx

Figma source

Figma source 6 sets
Page
Divider
Sets
6
Primary set
Divider/Dot · 10 variants Open in Figma →
Showing: Divider/Dot
5 other sets
  • .Dot slide/Dot 6 variants Figma →
  • Divider horizontal 8 variants Figma →
  • Divider vertical 6 variants Figma →
  • Divider vertical + resize 6 variants Figma →
  • Slider 8 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Divider
Slug: `divider`
Domain: general · Category: display
Design: stable · Code: coded


## Description
Horizontal + vertical dividers, plus dot-slide indicators.


## Import
```ts
import { Divider } from "@dol/ui/divider";
```
Source: `packages/@dol/ui/src/divider/Divider.tsx`


## Figma source
Page: Divider
Sets: 6
Primary: Divider/Dot
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7210-65997

Related

  • DOL English logo

    Logo

    Coded

  • Avatar, User

    Coded
  • Tag label

    Tag

    Coded
  • Field
    Value
    Name
    DOL Edu

    Table

    Coded

  • Order number

    Coded
  • 3

    Badge

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).