Divider

Place a horizontal or vertical divider between content areas.

<sy-divider>Installation guide Basic usage

Live preview

Interact with the component to see results here.

DirectionThicknessColor

End spacing

View code

HTML

<div style="display:grid;gap:16px;width:100%"><span>Project information</span>
  <sy-divider
    type="horizontal"
    thickness="1"
    color=""
  ></sy-divider><span>Members and permissions</span>
</div>

Usage guide

Use when content with different meanings needs a clear separation. Extra dividers are unnecessary when spacing is sufficient.

Horizontal division: The default direction separates content above and below.
Vertical division: Use type="vertical" and provide enough height in the parent area.
Line extent and thickness: Set end spacing with inset and thickness in pixels with thickness. color accepts a CSS color and defaults to the theme.

Examples

Separate content

Separate two content areas with a horizontal line in the default theme.

View code

HTML

<div style="display:grid;gap:16px;width:100%"><span>Basic settings</span>
  <sy-divider></sy-divider><span>Advanced settings</span>
</div>

Separate actions

Separate actions on the same line. The parent has an explicit height.

View code

HTML

<div style="display:flex;align-items:center;height:64px">
  <sy-button variant="borderless">Edit</sy-button>
  <sy-divider type="vertical"></sy-divider>
  <sy-button variant="borderless">Delete</sy-button>
</div>

Padding

Inset both ends of the divider from the content edges.

View code

HTML

<div style="display:grid;gap:16px;width:100%"><span>Top section</span>
  <sy-divider inset></sy-divider><span>Bottom section</span>
</div>

Color and thickness

Set a custom color and thickness only when additional emphasis is needed.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-divider thickness="2" color="#6750a4"></sy-divider>
  <sy-divider thickness="4" color="#8d7ab8"></sy-divider>
</div>

Feature examples

Choose a feature from 2 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Type

See how settings change appearance and behavior.

View code

HTML

Loading the example.

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-divider>`

Properties

Type	Default	Description
`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal or vertical divider.
`boolean`	`false`	Add space at both ends of the divider.
`number`	`1`	Divider thickness in pixels.
`string`	`''`	Color applied to the component. Check the type for supported values.