How do I make a Divider vertical?

Set the vertical prop and ensure the parent container has a defined height so the divider is visible.

Can a Divider have a label?

Yes. Pass children as the label and use alignContent ('start', 'center', 'end') to position it along the divider.

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>

Divider API

A brief explanation of the props that really need explaining. You can see the rest of the props here.

Appearance

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

View Code

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

Vertical

Align Content

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

View Code

Start Aligned Divider

Center Aligned Divider

End Aligned Divider

It also works combined with the `vertical` prop:

View Code

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

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 Props

Name	Type	Description
`as`	`string`	The HTML element to render the divider as. Possible values: `'div'`, `'hr'`, `'span'`.
`vertical`	`boolean`	Whether the divider is rendered vertically instead of horizontally.
`alignContent`	`string`	The alignment of the content within the divider. Possible values: `'start'`, `'center'`, `'end'`.
`appearance`	`string`	The appearance of the divider. Possible values: `'default'`, `'accent'`, `'standard'`, `'subtle'`.
`inset`	`boolean`	Whether the divider has inline padding applied.
`ref`	`HTMLDivElement` \| `HTMLHRElement` \| `HTMLSpanElement`	The DOM reference of the divider element, its type depends on the `as` prop.
`children`	`Snippet`	The content to render as a label within the divider.