Divider

BETA

Component demo

Interactive example

Coffee options

Web component

React

<ic-divider></ic-divider>
<ic-dividerborder-style="dashed"></ic-divider>
<ic-dividerlabel="Coffee options"label-placement="center"></ic-divider>

<IcDivider/>
<IcDividerborderStyle="dashed"/>
<IcDividerlabel="Coffee options"labelPlacement="center"/>

Divider details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property borderStyle Attribute border-style	The line style of the divider. type: IcDividerStyles - "dashed" \| "solid"	"solid"
Property label Attribute label	The label for the divider. The label placement will need to be set for the label to be displayed correctly. type: string
Property labelPlacement Attribute label-placement	The position the label is placed on the divider.`Left` and`right` placement is only applicable when orientation is set to`horizontal` .`Top` and`bottom` placement is only applicable when orientation is set to`vertical` .`Center` placement is applicable for both orientations. type: IcDividerLabelPlacement - "bottom" \| "center" \| "left" \| "right" \| "top"	"center"
Property monochrome Attribute monochrome	If`true` , the divider will be displayed in a grey colour. type: boolean	false
Property orientation Attribute orientation	The orientation of the divider. type: IcOrientation - "horizontal" \| "vertical"	"horizontal"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode \| IcThemeForeground - "dark" \| "default" \| "inherit" \| "light"	"inherit"
Property weight Attribute weight	The thickness of the divider. type: IcDividerWeights - "medium" \| "thick" \| "thin" \| "very-thick"	"thin"

Property

borderStyle

Attribute

border-style

The line style of the divider.

type: IcDividerStyles - "dashed" | "solid"

Default: "solid"

Property

label

Attribute

label

The label for the divider. The label placement will need to be set for the label to be displayed correctly.

type: string

Property

labelPlacement

Attribute

label-placement

The position the label is placed on the divider.Left andright placement is only applicable when orientation is set tohorizontal .Top andbottom placement is only applicable when orientation is set tovertical .Center placement is applicable for both orientations.

type: IcDividerLabelPlacement - "bottom" | "center" | "left" | "right" | "top"

Default: "center"

Property

monochrome

Attribute

monochrome

Iftrue , the divider will be displayed in a grey colour.

type: boolean

Default: false

Property

orientation

Attribute

orientation

The orientation of the divider.

type: IcOrientation - "horizontal" | "vertical"

Default: "horizontal"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode | IcThemeForeground - "dark" | "default" | "inherit" | "light"

Default: "inherit"

Property

weight

Attribute

weight

The thickness of the divider.

type: IcDividerWeights - "medium" | "thick" | "thin" | "very-thick"

Default: "thin"

CSS Custom Properties

Name	Description
--ic-divider-horizontal-width	The width of a horizontal divider. The default value is `inherit`.
--ic-divider-label-width	The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.
--ic-divider-vertical-height	The height of a vertical divider. The default value is `inherit`.

--ic-divider-horizontal-width The width of a horizontal divider. The default value is `inherit`.

--ic-divider-label-width The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.

--ic-divider-vertical-height The height of a vertical divider. The default value is `inherit`.

Variants

Weight

Interactive example

Coffee options

Web component

React

<ic-dividerweight="thin"></ic-divider>
<ic-dividerweight="medium"></ic-divider>
<ic-dividerweight="thick"></ic-divider>
<ic-dividerweight="very-thick"></ic-divider>
<ic-divider
weight="medium"
label="Coffee options"
label-placement="center"
></ic-divider>
<ic-divider
weight="thick"
label="Coffee options"
label-placement="center"
></ic-divider>

<IcDividerweight="thin"/>
<IcDividerweight="medium"/>
<IcDividerweight="thick"/>
<IcDividerweight="very-thick"/>
<IcDivider
weight="medium"
label="Coffee options"
labelPlacement="center"
/>
<IcDivider
weight="thick"
label="Coffee options"
labelPlacement="center"
/>

Border style

Interactive example

Web component

React

<ic-dividerborder-style="solid"></ic-divider>
<ic-dividerborder-style="dashed"></ic-divider>

<IcDividerborderStyle="solid"/>
<IcDividerborderStyle="dashed"/>

Vertical

Interactive example

Web component

React

<ic-dividerorientation="vertical"></ic-divider>
<ic-dividerorientation="vertical"border-style="dashed"></ic-divider>
<ic-dividerorientation="vertical"weight="thick"></ic-divider>
<ic-divider
orientation="vertical"
border-style="dashed"
weight="thick"
></ic-divider>

<IcDividerorientation="vertical"/>
<IcDividerorientation="vertical"borderStyle="dashed"/>
<IcDividerorientation="vertical"weight="thick"/>
<IcDivider
orientation="vertical"
borderStyle="dashed"
weight="thick"
/>

Label placement (horizontal)

Interactive example

Coffee options

Web component

React

<ic-dividerlabel="Coffee options"label-placement="left"></ic-divider>
<ic-dividerlabel="Coffee options"label-placement="center"></ic-divider>
<ic-dividerlabel="Coffee options"label-placement="right"></ic-divider>

<IcDividerlabel="Coffee options"labelPlacement="left"/>
<IcDividerlabel="Coffee options"labelPlacement="center"/>
<IcDividerlabel="Coffee options"labelPlacement="right"/>

Label placement (vertical)

Interactive example

Coffee options

Web component

React

<ic-divider
label="Coffee options"
orientation="vertical"
label-placement="top"
></ic-divider>
<ic-divider
label="Coffee options"
orientation="vertical"
label-placement="center"
></ic-divider>
<ic-divider
label="Coffee options"
orientation="vertical"
label-placement="bottom"
></ic-divider>

<IcDivider
label="Coffee options"
orientation="vertical"
labelPlacement="top"
/>
<IcDivider
label="Coffee options"
orientation="vertical"
labelPlacement="center"
/>
<IcDivider
label="Coffee options"
orientation="vertical"
labelPlacement="bottom"
/>

Slotted label

Interactive example

Coffee options

Web component

React

<ic-dividerlabel-placement="center">
<ic-typographystyle="width: max-content;"variant="label"slot="label">
<span>Coffee options</span>
</ic-typography>
</ic-divider>

<IcDividerlabelPlacement="center">
<IcTypographystyle={{ width:"max-content"}}variant="label"slot="label">
<span>Coffee options</span>
</IcTypography>
</IcDivider>

Theme

Interactive example

Coffee options

Web component

React

<ic-dividertheme="light"></ic-divider>
<ic-divider
theme="light"
label="Coffee options"
label-placement="center"
></ic-divider>
<ic-dividertheme="dark"></ic-divider>
<ic-divider
theme="dark"
label="Coffee options"
label-placement="center"
></ic-divider>

<IcDividertheme="light"/>
<IcDivider
theme="light"
label="Coffee options"
labelPlacement="center"
/>
<IcDividertheme="dark"/>
<IcDivider
theme="dark"
label="Coffee options"
labelPlacement="center"
/>

Monochrome

Interactive example

Coffee options

Web component

React

<ic-dividertheme="light"monochrome="true"></ic-divider>
<ic-divider
theme="light"
monochrome="true"
label="Coffee options"
label-placement="center"
></ic-divider>
<ic-dividertheme="dark"monochrome="true"></ic-divider>
<ic-divider
theme="dark"
monochrome="true"
label="Coffee options"
label-placement="center"
></ic-divider>

<IcDividertheme="light"monochrome/>
<IcDivider
theme="light"
monochrome
label="Coffee options"
labelPlacement="center"
/>
<IcDividertheme="dark"monochrome/>
<IcDivider
theme="dark"
monochrome
label="Coffee options"
labelPlacement="center"
/>

Last reviewed 2 December 2024 .