Separator

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Mark a meaningful boundary in content, horizontally or vertically. The parent Stack or Inline sets the outer spacing. Between values on one line, such as a stat strip, variant='dot' sets a small dot with room on each side. Assistive technology and copied text get a comma in its place, so the values stay apart.

Don't repeat a line between every row. Use spacing instead. For purely decorative lines, use CSS or aria-hidden.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Separator(orientation, optional horizontal inset) | Separator variant='dot' (span holding a comma that shows as a dot)

Keyboard and accessibility

Separators are non-interactive and aren't in the Tab order. aria-orientation conveys the orientation.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Separator } from '@surflane/ui'

<Separator />
<Separator inset />
<Separator orientation='vertical' />
<Text>dgx-001<Separator variant='dot' />24 GiB free</Text>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens