Divider

Used to display line separator between elements.

import { Divider } from '@fidely-ui/react/divider'

export const DividerBasic = () => {
  return <Divider color={'gray'} />
}

Usage

import { Divider } from '@fidely-ui/react'

<Divider />

Examples

Horinnzontal

Use the orientation prop horinzontal to change the Divider.

import { Divider } from '@fidely-ui/react/divider'

export const DividerHorizontal = () => {
  return <Divider color={'gray'} orientation={'horizontal'} />
}

Vertical

Use the orientation prop vertical to change the Divider.

import { Divider } from '@fidely-ui/react/divider'

export const DividerVertical = () => {
  return <Divider color={'gray'} orientation={'vertical'} h="100px" />
}

Color and Thickness

Use the color or thickness prop to change the Divider.

import { Divider } from '@fidely-ui/react/divider'

export const DividerColor = () => {
  return (
    <Divider orientation={'horizontal'} color={'orange.9'} thickness={'3px'} />
  )
}

Props

Divider

Prop	Type	Default	Description
`color`	`sting`	-	he color of the divider.
`thickness`	`string`	-	The thickness of the divider..
`orientation`	`"horinzontal" \| "vertical"`	`"horinzontal"`	The orientation of the divider.