Biofarma | Bind UI

Divider

Dividers enhance clarity in a layout by grouping and separating content that is in close proximity. They can also establish rhythm and hierarchy.

import { Divider } from 'bio-bind-ui';

<Divider
  direction='horizontal'
  mode='light'
  style={{}}
  thickness='thin'
  type='solid'
/>

Set the type prop to solid or dashed for different style.

Set the thickness prop to thin, normal, or thicker for different thick.

Use the direction prop to horizontal or vertical.

Use mode to use dark or light

Props	Required	Default	Type	description
direction	false	`horizontal`	`horizontal` `vertical`	Provide direction of divider (`horizontal` or `vertical`) .
style	false	-	`CSSProperties`	Custom styles for the divider component.
mode	false	`light`	`light` `dark`	The theme mode of the divider (`light` or `dark`).
thickness	false	`thin`	`thin` `normal` `thicker`	The thickness width of the divider.
type	false	`solid`	`solid` `dashed`	The visual style of the divider (`solid` or `dashed`).