Separator

Ported

A 1 px line between groups of content or controls. Screen readers announce it as a separator.

Run 1,284

Passed

Bench A-03

Oct 14

import { Separator } from "@etched/monet/separator";

export function Preview() {
  return (
    <div style={{ display: "grid", gap: "var(--et-space-3)", inlineSize: "14rem" }}>
      <span>Run 1,284</span>
      <Separator />
      <div className="row">
        <span>Passed</span>
        <Separator orientation="vertical" />
        <span>Bench A-03</span>
        <Separator orientation="vertical" />
        <span>Oct 14</span>
      </div>
    </div>
  );
}

Installation

import { Separator } from "@etched/monet/separator";

Examples

Horizontal

Between blocks of content. Set the space around it with a class or the parent's gap.

Thermal soak

Holds the board at 85 °C for four hours.

Power cycle

Turns the board off and on 500 times.

import { Text } from "@etched/monet/text";
import { Separator } from "@etched/monet/separator";

export function Horizontal() {
  return (
    <div style={{ display: "grid", gap: "var(--et-space-4)", maxInlineSize: "26rem" }}>
      <div>
        <Text bold>Thermal soak</Text>
        <Text variant="secondary">Holds the board at 85 °C for four hours.</Text>
      </div>
      <Separator />
      <div>
        <Text bold>Power cycle</Text>
        <Text variant="secondary">Turns the board off and on 500 times.</Text>
      </div>
    </div>
  );
}

Vertical

Between items in a row. It is as high as the row.

Owner: Sam Lee

Site: Cupertino

Started Oct 14

import { Separator } from "@etched/monet/separator";

export function Vertical() {
  return (
    <div className="row">
      <span>Owner: Sam Lee</span>
      <Separator orientation="vertical" />
      <span>Site: Cupertino</span>
      <Separator orientation="vertical" />
      <span>Started Oct 14</span>
    </div>
  );
}

Accessibility

A separator with aria-orientation from orientation. It takes no focus and has no name.
Screen readers announce each one. For a line that is only decoration, use a CSS border.

API reference

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	`vertical` stands between items in a row and takes the row's height.
className	string	–	Class for layout, such as margins.