Separator

Introduction

A divider that separates two different sets of content.

Label
Left line
Right line

Examples

Default

A solid Separator without a label.

<Separator  />

<Separator  />

With label

A dashed Separator with label center-aligned.

<Separator label="Label" />

<Separator label="Label" />

Colors

<>
  <Separator variant="primary" className="u-marginBottomExtraSmall" />
  <Separator variant="positive" className="u-marginBottomExtraSmall" />
  <Separator variant="negative" className="u-marginBottomExtraSmall" />
  <Separator variant="gray" className="u-marginBottomExtraSmall" />
  <Separator variant="light" className="u-marginBottomExtraSmall" />
  <Separator variant="lighter" className="u-marginBottomExtraSmall" />
</>

<>
  <Separator variant="primary" className="u-marginBottomExtraSmall" />
  <Separator variant="positive" className="u-marginBottomExtraSmall" />
  <Separator variant="negative" className="u-marginBottomExtraSmall" />
  <Separator variant="gray" className="u-marginBottomExtraSmall" />
  <Separator variant="light" className="u-marginBottomExtraSmall" />
  <Separator variant="lighter" className="u-marginBottomExtraSmall" />
</>

Line styles

<>
  <Separator className="u-marginBottomExtraSmall" />
  <Separator lineType="dashed" className="u-marginBottomExtraSmall" />
</>

<>
  <Separator className="u-marginBottomExtraSmall" />
  <Separator lineType="dashed" className="u-marginBottomExtraSmall" />
</>

Design Reference

N/A

API

Separator

import { Separator } from '@ahaui/react'Copy import code for the Separator component

Name	Type	Default	Description
label	string		Custom label
variant	`'light'` \| `'lighter'` \| `'primary'` \| `'positive'` \| `'negative'` \| `'gray'`	`'light'`	The `Separator` visual variant
lineType	`'solid'` \| `'dashed'`	`'solid'`

Separator

Introduction#

Examples#

Default#

With label#

Colors#

Line styles#

Design Reference#

API#

Separator#

Introduction

Examples

Default

With label

Colors

Line styles

Design Reference

API

Separator