Divider

Dividers are horizontal lines used to separate content on a web page.

---

---

---

---

---

---

---

import React from 'react';
import { Divider } from 'chic-ui';

<>
  <Divider />
  <Divider type="danger" />
  <Divider type="info" />
  <Divider type="light" />
  <Divider type="primary" />
  <Divider type="success" />
  <Divider type="warning" />
</>;

Dashed Divider

---

---

---

---

---

---

---

import React from 'react';
import { Divider } from 'chic-ui';

<>
  <Divider dashed />
  <Divider type="danger" dashed />
  <Divider type="info" dashed />
  <Divider type="light" dashed />
  <Divider type="secondary" dashed />
  <Divider type="success" dashed />
  <Divider type="warning" dashed />
</>;

Custom Thickness

---

---

import React from 'react';
import { Divider } from 'chic-ui';

<>
  <Divider type="danger" dashed thickness={2} />
  <Divider type="info" thickness={2} />
</>;

API

import { Divider } from 'chic-ui';

Name	Type	Default	Description
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'secondary'	Type of Divider
dashed	boolean	false	Get dashed style dividers
thickness	number	0.5	Sets thickness of divider
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component