Skip to main content

Divider

Provides a solid or dotted divider line.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Divider } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Display a Divider to separate content

Dotted​

Text​

Border Color​

Alert informationThese examples require Tailwind CSS

Refer to the getting started documentation to add styling

The full list of colour classes can be found in the brand colours docs.

Properties​

Name
Description
  • className
    stringtailwind class. color defined by brand tokens.
  • variant
    "solid" | "dotted"default variant is `solid` with available variant of `dotted` to style divider
  • children
    ReactNodetext to be rendered in the middle of the divider.

CSS Variables​