Layout

Separator

View in Figma

A thin rule that divides content, running horizontally or vertically.

Overview

A thin rule that divides content, running horizontally or vertically.

Variant
Horizontal

The horizontal variant.

Anatomy

Separator
  1. 1Separator  required  A single stroked line at stroke.md thickness in color.border.primary.

Measurements

Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Line
Line thickness
strokeMd
1pt
Line color
colorBorderPrimary
#E5E5E8

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
orientationvarianthorizontal, vertical

Accessibility

A separator is decorative. Mark it as such (a separator role, or hidden from assistive technology) so screen readers skip it instead of announcing an empty element.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.