Skip to content
ENالعربية

Separator

Get Ritla UI

A horizontal rule that splits content, plain or with a heading, text or a button in the middle.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

PreviewCode
EnglishMirroredArabic
LTR →

Installation

  1. Add the component

    npx ritla add separator

    Also works with shadcn: npx shadcn@latest add @ritla/separator

  2. Or copy by hand

    Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

separator.tsx
import { Separator } from "@/components/ui/separator";<Separator /><Separator>Today</Separator><Separator type="heading" variant="dual">Notifications</Separator>

Examples

Styles

Lines on both sides, a rule above and below, or a muted band.

EnglishMirroredArabic
Get the code
LTR →

With a control

A button, icon button or button group between two blocks, such as Show 12 more.

EnglishMirroredArabic
Get the code
LTR →

Vertical

A vertical rule between items on one line.

EnglishMirroredArabic
Get the code
LTR →

API reference

Separator

PropTypeDefaultDescription
childrenReactNodeNoneThe label in the middle. Without it, a plain rule.
type"heading" | "text" | "action""text"Figma's Type: a heading, text or a control (a button or a button group).
variant"single" | "dual" | "fill""single"Figma's Style: single line, dual line or background fill.
orientation"horizontal" | "vertical""horizontal"For a plain rule: horizontal or vertical.
decorativebooleanfalseA rule for looks only, hidden from screen readers.

Usage guidelines

A separator is a line between two blocks. Line or space, labelled separators, how they work in Arabic, and the checks before handoff.

1. Line or space

Use space first. Add a line when two blocks share a background and could be read as one.

Do

  • Keep 24 px above and below a separator.
  • Use the faint colour inside cards.

Don't

  • Add a line under a heading.
  • Use a separator at the top or bottom of a container.

2. Labelled separators

A heading label names the block below: Earlier today. A button label offers an action between blocks: Show 12 more.

Do

  • Keep the label to three words.
  • Centre the label; it is a landmark, not a heading.

Don't

  • Use a labelled separator instead of a Section header.
  • Put two buttons in it without the Button group type.

3. Arabic and RTL

The label is centred so nothing moves; the button icon flips with the text direction.

Before handoff

  • All types placed in both directions.
  • Line colour chosen per surface.
  • Button separators wired to the action they describe.

Accessibility

ARIA

  • A plain rule is role="separator"; a vertical one adds aria-orientation.
  • A labelled separator exposes its text, and a button separator exposes the button only; the lines are hidden from screen readers.
  • The label isn't a heading: use a Section header for sections.

Arabic and RTL notes

Mirrors

  • A button's icon flips with the text direction, and a button group starts on the right.

Does not mirror

  • The label is centred, so nothing moves.
  • The line itself doesn't mirror.
Numerals
Digits in a label follow the RitlaProvider numerals setting.
Arabic typography
Heading body-18 Semibold, text body-14 Medium; Arabic lines are taller, so the separator grows a little.

Do

  • The RTL variant for Arabic labels, so they set in the Arabic fonts.
  • Check Dual line spacing with Arabic ascenders.

Don't

  • Mirror the line itself.
  • Translate labels that are numbers only.