Divider

The Divider component is used to visually separate content within a layout. It can be oriented horizontally or vertically.

Divider

Usage

<script>
  import { Divider } from 'fluentui-svelte';
</script>

<Divider>Divider</Divider>

Appearance

Controls the color of the divider. Possible values: `'standard'`, `'accent'`, `'subtle'`.

View Code

<Divider appearance="standard">Standard Divider</Divider>
<Divider appearance="accent">Accent Divider</Divider>
<Divider appearance="subtle">Subtle Divider</Divider>

Standard Divider

Accent Divider

Subtle Divider

Vertical

When `vertical` is set, the divider renders on the vertical axis instead of the horizontal one. Make sure the parent container has a defined height so the divider is visible.

View Code

<div style="height: 8rem;">
  <Divider vertical>Vertical</Divider>
</div>

Vertical

Align Content

The `alignContent` prop controls where the label content (children) is positioned along the divider. Possible values: `'start'`, `'center'`, `'end'`.

View Code

<Divider alignContent="start">Start Aligned Divider</Divider>
<Divider alignContent="center">Center Aligned Divider</Divider>
<Divider alignContent="end">End Aligned Divider</Divider>

Start Aligned Divider

Center Aligned Divider

End Aligned Divider

It also works combined with the `vertical` prop:

View Code

<Divider alignContent="start" vertical>Start</Divider>
<Divider alignContent="center" vertical>Center</Divider>
<Divider alignContent="end" vertical>End</Divider>

Start

Center

End

Inset

When `inset` is set, the divider gets some inline padding applied, useful when it's placed inside a container that has content touching its edges.

View Code

<Divider inset>Inset Divider</Divider>

Inset Divider

Custom element

The `as` prop lets you change the underlying HTML element rendered by the divider. Possible values: `'div'`, `'hr'`, `'span'`.

View Code

<Divider as="hr" />

Divider Props

Name	Type	Default	Description
`as`	`'div'` \| `'hr'` \| `'span'`	`'div'`	The HTML element to render the divider as.
`ref` bindable	`HTMLDivElement` \| `HTMLHRElement` \| `HTMLSpanElement`		The DOM reference of the divider element.
`vertical`	`boolean`		Renders the divider vertically instead of horizontally.
`alignContent`	`'start'` \| `'center'` \| `'end'`	`'center'`	Where the content of the divider sits along the line.
`inset`	`boolean`		Removes the padding around the divider line.
`appearance`	`'accent'` \| `'standard'` \| `'subtle'` \| `'default'`	`'default'`	The divider line can be styled for greater emphasis or to be subtle.
HTML Attributes