Separator

ui-separator draws a one pixel line in the border colour. It is horizontal by default and fills the width of its container. Set orientation="vertical" to divide items in a row. The element has the role separator and reports its orientation to assistive technology. It has no margin. The space around it comes from the gap of its container.

Preview

index.html

REALM UI

Native custom elements for every app.

Blog

Docs

Source

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Separator demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-narrow {
      width: min(100%, calc(var(--spacing) * 88));
    }
    .demo-stack {
      display: grid;
      gap: calc(var(--spacing) * 4);
    }
    .demo-stack-tight {
      display: grid;
      gap: calc(var(--spacing) * 2);
    }
    .demo-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(var(--spacing) * 4);
    }
    .demo-text {
      margin: 0;
      font-size: var(--text-sm);
    }
    .demo-muted {
      margin: 0;
      font-size: var(--text-sm);
      color: var(--muted-foreground);
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/separator.html"></import-element>

  <div class="demo-narrow demo-stack demo-text">
    <div class="demo-stack-tight">
      <strong>REALM UI</strong>
      <p class="demo-muted">Native custom elements for every app.</p>
    </div>
    <ui-separator></ui-separator>
    <div class="demo-row">
      <span>Blog</span>
      <ui-separator orientation="vertical"></ui-separator>
      <span>Docs</span>
      <ui-separator orientation="vertical"></ui-separator>
      <span>Source</span>
    </div>
  </div>
</body>
</html>

Examples

Vertical

A vertical separator stretches to the height of its flex row, which the tallest item sets.

Preview

index.html

Bold

Italic

Link

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Separator demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-row-tight {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(var(--spacing) * 2);
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/separator.html"></import-element>

  <div class="demo-row-tight">
    <ui-button variant="ghost" size="sm">Bold</ui-button>
    <ui-button variant="ghost" size="sm">Italic</ui-button>
    <ui-separator orientation="vertical"></ui-separator>
    <ui-button variant="ghost" size="sm">Link</ui-button>
  </div>
</body>
</html>

Between list items

Preview

index.html

Account

Billing

Notifications

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Separator demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-narrow {
      width: min(100%, calc(var(--spacing) * 88));
    }
    .demo-stack-tight {
      display: grid;
      gap: calc(var(--spacing) * 2);
    }
    .demo-text {
      margin: 0;
      font-size: var(--text-sm);
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/separator.html"></import-element>

  <div class="demo-narrow demo-stack-tight demo-text">
    <div>Account</div>
    <ui-separator></ui-separator>
    <div>Billing</div>
    <ui-separator></ui-separator>
    <div>Notifications</div>
  </div>
</body>
</html>

With a label

For a label between two lines, such as an "or" divider, use <ui-marker variant="separator"> instead of two separators.

Preview

index.html

Or continue with

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Separator demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-narrow {
      width: min(100%, calc(var(--spacing) * 88));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/marker.html"></import-element>

  <div class="demo-narrow">
    <ui-marker variant="separator">Or continue with</ui-marker>
  </div>
</body>
</html>

API

Parts

Part	Slot	Renders
`ui-separator`	(default)	A one pixel line in `var(--border)`, 100% wide when horizontal. It has no slot and takes no content.

Attributes

Attribute	Type	Default	Description
`orientation`	`"horizontal"` \| `"vertical"`	`"horizontal"`	Direction of the line. Also sets `aria-orientation`.

CSS parts

None. The separator renders no shadow content. Style the element itself.

Accessibility

The element has the role separator and aria-orientation set from orientation, both through ElementInternals. For a decorative line that should be skipped by screen readers, add role="none".

Edit this page on GitHub · View as Markdown