Divider

A divider line separates different content.

Import: import { Divider } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

Divide sections of article.

Divide inline text and links such as the operation column of table.

Basic Usage

<Group spacing="xl">
  <Divider style={{ width:'100%' }}/>
</Group>

1
<Group spacing="xl">
2
  <Divider style={{ width:'100%' }}/>
3
</Group>
4

Style

Use variants to set the display form of the dividing line, the default is solid (solid line), dotted (dotted line), dashed (dotted line)

<Group spacing="xl">
  <Divider style={{ width:'100%'}}/>
  <Divider variant="dotted" margins={20} style={{ width:'100%' }} />
  <Divider variant="dashed" margins={20} style={{ width:'100%' }} />
</Group>

1
<Group spacing="xl">
2
  <Divider style={{ width:'100%'}}/>
3
  <Divider variant="dotted" margins={20} style={{ width:'100%' }} />
4
  <Divider variant="dashed" margins={20} style={{ width:'100%' }} />
5
</Group>
6

Direction

<Group spacing="xl">
  <Button>1</Button>
  <Divider direction="vertical" margins="sm" />
  <Button>2</Button>
  <Divider direction="vertical" margins="sm" />
  <Button>3</Button>
</Group>

1
<Group spacing="xl">
2
  <Button>1</Button>
3
  <Divider direction="vertical" margins="sm" />
4
  <Button>2</Button>
5
  <Divider direction="vertical" margins="sm" />
6
  <Button>3</Button>
7
</Group>
8

Label

<Group spacing="xl">
   <Divider style={{ width:'100%' }}/>
   <Divider variant="dotted" margins={20} label="label name" style={{ width:'100%' }}/>
   <Divider margins={20} label="label name" labelPosition="right" style={{ width:'100%' }}/>
</Group>

1
<Group spacing="xl">
2
   <Divider style={{ width:'100%' }}/>
3
   <Divider variant="dotted" margins={20} label="label name" style={{ width:'100%' }}/>
4
   <Divider margins={20} label="label name" labelPosition="right" style={{ width:'100%' }}/>
5
</Group>
6