Separator

Visually or semantically separates content.

Qwik Primitives

An open-source UI component library.

Blog

Docs

Source

import { component$, useStyles$ } from '@builder.io/qwik';
import { Separator } from 'qwik-primitives';
import styles from './styles.css?inline';

export const SeparatorDemo = component$(() => {
  useStyles$(styles);

  return (
    <div class="wrapper">
      <h2 class="heading">Qwik Primitives</h2>
      <p class="text">An open-source UI component library.</p>
      <Separator.Root class="separator-root" />
      <div class="group">
        <span class="text">Blog</span>
        <Separator.Root orientation="vertical" class="separator-root" />
        <span class="text">Docs</span>
        <Separator.Root orientation="vertical" class="separator-root" />
        <span class="text">Source</span>
      </div>
    </div>
  );
});

.wrapper {
  width: 100%;
  max-width: 18.75rem;
  padding: 1rem;
  background-color: #ffffff;
  border: 0.0625rem solid #00073527;
  border-radius: 0.5rem;
}

.heading {
  all: unset;
  font-weight: 500;
  text-wrap: balance;
  font-weight: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: 0em;
  color: #1e1f24;
}

.text {
  all: unset;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0em;
  color: #1e1f24;
}

.group {
  display: flex;
  align-items: center;
}

.separator-root {
  background-color: #00073527;
}

.separator-root[data-orientation='vertical'] {
  margin: 0 0.75rem;
  height: 0.875rem;
  width: 0.0625rem;
}

.separator-root[data-orientation='horizontal'] {
  margin: 0.75rem 0;
  height: 0.0625rem;
  width: 100%;
}

Features

Supports horizontal and vertical orientations.

Import

import { Separator } from 'qwik-primitives';

Anatomy

Import the component.

import { component$ } from '@builder.io/qwik';
import { Separator } from 'qwik-primitives';

const SeparatorDemo = component$(() => {
  return <Separator.Root />;
});

API Reference

Root

Prop	Default	Type
`as`	No default value	`FunctionComponent` Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.
`style`	No default value	`CSSProperties` The inline style for the element.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the separator.
`decorative`	No default value	`boolean` When `true`, signifies that it is purely visual, carries no semantic meaning and ensures it is not present in the accessibility tree.

Data attribute	Values
`[data-scope]`	`"separator"`
`[data-part]`	`"root"`
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

Vertical orientation

Use the orientation prop to create a vertical separator.

import { component$ } from '@builder.io/qwik';
import { Separator } from 'qwik-primitives';

const SeparatorDemo = component$(() => {
  return (
    <div style={{ height: '1rem', display: 'flex', alignItems: 'center' }}>
      <span>Blog</span>
      <Separator.Root orientation="vertical" style={{ margin: '0 1rem', height: '100%', width: '0.0625rem', backgroundColor: '#000000' }} />
      <span>Docs</span>
      <Separator.Root orientation="vertical" style={{ margin: '0 1rem', height: '100%', width: '0.0625rem', backgroundColor: '#000000' }} />
      <span>Source</span>
    </div>
  );
});

Accessibility

Adheres to the separator role requirements.