Skip to content

← All components

Foundation and layout

Separator

Horizontal or vertical divider for grouping related content.

Live example

Account settings
Notification settings
LightDark

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Separator } from "@cofob/design-system-react";

/**
 * Complete Separator parameter reference.
 * @param orientation
 *   type: "horizontal" | "vertical"
 *   default: "horizontal"
 *   example: "horizontal"
 * @param decorative
 *   type: boolean
 *   default: false
 *   example: {decorative}
 * @param separator attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SeparatorExample() {
  return (
    <Separator decorative />
  );
}

Svelte

svelte
<script lang="ts">
  import { Separator } from "@cofob/design-system-svelte";

  // Complete Separator parameter reference.
  // orientation
  //   type: "horizontal" | "vertical"
  //   default: "horizontal"
  //   example: "horizontal"
  // decorative
  //   type: boolean
  //   default: false
  //   example: {decorative}
  // separator attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Separator decorative />

HTML

html
<!--
  Complete Separator parameter reference.
  orientation
    type: "horizontal" | "vertical"
    default: "horizontal"
    example: "horizontal"
  decorative
    type: boolean
    default: false
    example: {decorative}
  separator attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<hr class="cf-separator" />

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
orientation"horizontal" | "vertical""horizontal"React · Svelte · HTML"horizontal"Sets layout and the matching keyboard navigation axis or ARIA orientation.
decorativebooleanfalseReact · Svelte · HTML{decorative}Removes separator semantics when the line is purely visual.
separator attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.