# Divider

A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and text hierarchy to organize content in your layout.

## Behavior and states

- Block dividers span the width of their container and create strict distinctions between items.
- Inset dividers don’t extend to the edges of a container and imply closer relationships.
- If a divider only creates visual separation but not content separation, hide it from screen readers with aria-hidden.

## Default

Source: CoreAI.

Unlike Fluent's `Divider`, this `Divider` drops the `children` and
`alignContent` props entirely — there's no inline content/label slot, just
a plain line. Use it purely to visually separate two pieces of content, as
below. If you need a labelled divider, use the Fluent-compatible
`DividerLabeled` export instead.

[Download source](/coreai-design-system/source/examples/components-divider--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Text } from "@coreai-ds/react-components";
import { Divider } from "@coreai-ds/react-components";

export const Default = () => {
    const styles = /* css */ `
      .divider-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalM);
        max-width: 480px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="divider-example">
          <Text as="p" block>
            Q3 revenue grew 12% year-over-year, driven primarily by increased adoption in the
            enterprise segment.
          </Text>
          <Divider />
          <Text as="p" block>
            Looking ahead to Q4, the team is prioritizing platform stability and onboarding
            improvements for new customers.
          </Text>
        </div>
      </>);
};

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### Divider API

A divider visually separates two pieces of content. Renders a styled `<hr>`.

```ts
interface DividerProps {
  /**
   * A divider can have one of the preset appearances.
   * When not specified, the divider has its default appearance.
   * @default 'default'
   */
  appearance?: "strong" | "brand" | "subtle" | "default";

  /**
   * Render as a `div` instead of the default `hr`.
   */
  as?: "div";

  className?: string;

  /**
   * Adds padding to the beginning and end of the divider.
   * @default false
   */
  inset?: boolean;

  /**
   * Allows getting a ref to the component instance.
   * Once the component unmounts, React will set `ref.current` to `null`
   * (or call the ref with `null` if you passed a callback ref).
   */
  ref?: string | ((instance: HTMLHRElement | null) => void) | RefObject<HTMLHRElement> | null;

  style?: CSSProperties;

  /**
   * A divider can be horizontal (default) or vertical.
   * @default false
   */
  vertical?: boolean;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Appearance

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-divider--appearance.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Divider } from "@coreai-ds/react-components";

export const Appearance = () => {
    const styles = /* css */ `
    .divider-appearance-example {
      display: flex;
      flex-direction: column;
      row-gap: 5px;
    }

    .divider-appearance-example__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-items: center;
      min-height: 96px;
      background-color: var(--colorNeutralBackground1);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="divider-appearance-example">
        <div className="divider-appearance-example__item">
          <Divider />
        </div>
        <div className="divider-appearance-example__item">
          <Divider appearance="subtle"/>
        </div>
        <div className="divider-appearance-example__item">
          <Divider appearance="brand"/>
        </div>
        <div className="divider-appearance-example__item">
          <Divider appearance="strong"/>
        </div>
      </div>
    </>);
};

export default Appearance;
```

## Default Dev

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-divider--default-dev.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Divider } from "@coreai-ds/react-components";

export const DefaultDev = () => {
    const styles = /* css */ `
    .divider-default-dev-example {
      min-height: 96px;
      background-color: var(--colorNeutralBackground1);
    }
  `;
    return (<>
      <style>{styles}</style>
      <Divider className="divider-default-dev-example"/>
    </>);
};

export default DefaultDev;
```

## Inset

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-divider--inset.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Divider } from "@coreai-ds/react-components";

export const Inset = () => {
    const styles = /* css */ `
    .divider-inset-example {
      display: flex;
      flex-direction: column;
      row-gap: 5px;
    }

    .divider-inset-example__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-items: center;
      min-height: 96px;
      background-color: var(--colorNeutralBackground1);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="divider-inset-example">
        <div className="divider-inset-example__item">
          <Divider inset/>
        </div>
        <div className="divider-inset-example__item">
          <Divider inset vertical style={{ height: '100%' }}/>
        </div>
      </div>
    </>);
};

export default Inset;
```

## Vertical

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-divider--vertical.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Divider } from "@coreai-ds/react-components";

export const Vertical = () => {
    const styles = /* css */ `
    .divider-vertical-example {
      min-height: 96px;
      background-color: var(--colorNeutralBackground1);
    }
  `;
    return (<>
      <style>{styles}</style>
      <Divider className="divider-vertical-example" vertical style={{ height: '100%' }}/>
    </>);
};

export default Vertical;
```

## Resources

- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=320758-1170)
- [Fluent guidance](https://fluent2.microsoft.design/components/web/react/core/divider/usage)