@fluentui/react-divider

@fluentui/react-divider

Divider components for Fluent UI

The Divider component represents a visual separator, that may contain content. A Divider can be vertical or horizontal.

Usage

To import Divider:

import { Divider } from '@fluentui/react-components';

Examples

<Divider />
<Divider>This is a divider</Divider>
<Divider alignContent="center">This is a divider</Divider>
<Divider appearance="subtle">This is a divider</Divider>
<Divider inset>This is a divider</Divider>
<Divider vertical>This is a divider</Divider>

See Fluent UI Storybook for more detailed usage examples.

Alternatively, run Storybook locally with:

1. yarn start
2. Select react-divider from the list.

Specification

See SPEC.md.

Migration Guide

If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest Divider implementation.