Divider | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

// 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;

Resources

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.

API referenceGenerated CoreAI prop and type summaries

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

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.

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

Appearance

Loading interactive example. Full source is available below.

Download source

// 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

Loading interactive example. Full source is available below.

Download source

// 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

Loading interactive example. Full source is available below.

Download source

// 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

Loading interactive example. Full source is available below.

Download source

// 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;