Divider

Quick start

Here's a quick start guide to get started with the divider component

Importing Component

import { Divider } from "@hover-design/react";

Code Snippets and Examples

Divider Default

<div className="App">
  <Divider />
</div>

Note: Horizontal Divider's width will depend on container's width

---

Divider Dashed

<div className="App">
  <Divider type="dashed" />
</div>

---

Divider Dotted

<div className="App">
  <Divider type="dotted" />
</div>

---

Divider with Label

<div className="App">
  <Divider label="label" />
</div>

---

label

Vertical Divider

<div
  style={{
    display: "flex",
    height: "30px",
    alignItems: "center",
    justifyContent: "center"
  }}
  className="App"
>
  <div>Label 1</div>
  <Divider orientation="vertical" style={{ margin: "0 10px" }} />
  <div>Label 2</div>
  <Divider orientation="vertical" style={{ margin: "0 10px" }} />
  <div>Label 3</div>
</div>

Note: Vertical Divider's height will depend on container's height

Label 1

---

Label 2

---

Label 3

Vertical Divider with Label

<div
  style={{ height: "100px", margin: "0 auto", width: "fit-content" }}
  className="App"
>
  <Divider orientation="vertical" label="label" />
</div>

---

label

Vertical Divider with Custom Label

<div className="App">
  <Divider
    label={
      <div
        style={{
          borderRadius: "5px",
          background: "hotpink",
          padding: "2px 6px",
          color: "white"
        }}
      >
        label
      </div>
    }
  />
</div>

---

label

Props Reference

Attributes	Values	Default Value	Optional ?
orientation	vertical | horizontal	horizontal	Yes
type	solid | dashed | dotted	solid	Yes
size	string	1px	Yes
label	String | JSX Element		Yes
color	string	grey	Yes
labelColor	string	black	Yes
labelBackground	string	white	Yes
labelPosition	start | center | end	center	Yes