Divider

import { Divider } from 'rost/components/divider/Divider'

<Divider />

import type { HTMLAttributes } from 'react'
import './divider.css'

/**
 * A 1px line, as wide as its container. Built from
 * contracts/divider.contract.yaml.
 */
export function Divider({ className, ...rest }: HTMLAttributes<HTMLHRElement>) {
  return <hr className={['rost-divider', className].filter(Boolean).join(' ')} {...rest} />
}

When to use

• Between groups in a list or a menu, when space alone doesn't separate them.

When not to use

• Between every item. Space does that better.
• Holding up a layout. If the line goes, the layout should still read.

Behaviour

One 1px line in non-interactive/foreground/quinary, as wide as its container. Figma only has the horizontal one.

Accessibility

• Element: an <hr>, so screen readers hear a break. Pass aria-hidden="true" when it's only decoration.

Content

None. It's a line.