PRIMITIVES

Ornament

Decorative section break: two horizontal gradient hairlines flanking a centred glyph. Use between thematic groups inside a page where a plain Separator would feel too clinical.

Import

import { Ornament } from 'damo-ui'

Default

<Ornament />

Custom glyph

Pass a child node to replace the default diamond — emojis, icons, or short text accents work well.

1<Ornament>
2  <span aria-hidden>✦</span>
3</Ornament>

Props

Ornament props
PropTypeDefaultDescription
childrenReactNode—Optional glyph rendered between the two gradient hairlines. Defaults to a Memphis diamond.
classNamestring—Tailwind classes are merged on top of the wrapper.

Accessibility

The wrapper carries aria-hidden="true", which removes Ornament from the accessibility tree entirely — assistive technology skips it. The DOM role="separator" attribute is present for styling consistency but has no AT effect because of the surrounding aria-hidden. For semantic section breaks that should be announced, use Separator with decorative=false.

← SeparatorFormField →