Divider

It's a line.

import { Divider } from '@thoody-consulting/components'

function Example() {
    return <Divider />
}

Component API

Dividerextends the JSX <hr> element
softfalseWhether the divider should use a softer color.

Examples

Basic example

Use the Divider component to add a horizontal rule between items:

import { Divider } from '@thoody-consulting/components'

function Example({ user }) {
    return <Divider />
}

With reduced contrast

Use the soft prop for secondary dividers:

import { Divider } from '@thoody-consulting/components'

function Example({ user }) {
    return <Divider soft />
}

With spacing

Use utility classes like my-* to control the vertical spacing around a divider:

import { Divider } from '@thoody-consulting/components'

function Example({ user }) {
    return <Divider className="my-6" />
}