Back to Fluentui

@fluentui/react-divider

packages/react-components/react-divider/library/README.md

4.40.2-hotfix2984 B
Original Source

@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:

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

Examples

jsx
<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.