Divider

<bh-divider> | BharatDivider

The Divider component visually separates content using horizontal or vertical lines. It is highly customizable using width, height, color, and margin properties.

Open in

Basic Usage

Preview

Open in

Above divider

Below divider

HTML

<bh-divider></bh-divider>

React

import React from 'react';
import { BharatDivider } from 'bharat-ui/react/components/divider'
function App() {
return (
  <BharatDivider />
);
}
export default App;

Variants

Use the variant attribute to set the orientation.

Preview

Open in

Vertical Divider

Horizontal Divider

HTML

<bh-divider variant="horizontal"></bh-divider>
<bh-divider variant="vertical" height="60px"></bh-divider>

React

import React from 'react';
import { BharatDivider } from 'bharat-ui/react/components/divider'
function App() {
return (
  <>
   <BharatDivider variant="horizontal" />
   <BharatDivider variant="vertical" height="60px" />
  </>
);
}
export default App;

Variant	Description
horizontal	Default horizontal divider
vertical	Vertical divider (set height!)

Custom Styling

You can control the appearance of the divider using width, height, background color, and margins.

Preview

Open in

HTML

<bh-divider
  width="200px"
  height="4px"
  backgroundColor="#00ff00"
  marginTop="20px"
  marginBottom="20px"
/>

React

import React from 'react';
import { BharatDivider } from 'bharat-ui/react/components/divider'
function App() {
return (
   <BharatDivider     width="200px"
      height="4px"
      backgroundColor="#00ff00"
      marginTop="20px"
      marginBottom="20px"/>
);
}
export default App;

Properties

Property	Type	Description
variant	string	"horizontal" (default) or "vertical"
width	string	Width of the divider (applies to vertical height)
height	string	Height of the divider (applies to vertical width)
backgroundColor	string	Background color of the divider
marginTop	string	Top margin
marginBottom	string	Bottom margin
marginLeft	string	Left margin
marginRight	string	Right margin