Separator

New

A visual divider component based on DaisyUI's .divider utility. Supports horizontal and vertical orientations with optional center text content and semantic colour variants.

API Reference

Attribute	Description	Type	Default
`orientation`	Layout direction of the separator	string	`horizontal`
`color`	Semantic colour applied to the divider line	string	`""`
`slot`	Optional text content displayed at the centre of the divider	slot	—

orientation

horizontal vertical

color

neutral primary secondary accent info success warning error

Semantic role: <div> — purely presentational. If the separator conveys a meaningful section boundary, consider adding role="separator" or using an <hr> element wrapped inside.

Colour alone: colour variants are supplemental. Always ensure the section boundaries they represent are also conveyed through headings or other structural markup.

Examples

Usage


<c-separator />

Horizontal (default)

Content above

Content below

<p>Content above</p>
<c-separator />
<p>Content below</p>

With Center Text

Section one

Section two

<c-separator>OR</c-separator>

Vertical Orientation

Left

Right

<c-separator orientation="vertical" class="h-16" />

Colour Variants

Primary

Secondary

Accent

Success

Warning

Error

<c-separator color="primary">Primary</c-separator>
<c-separator color="success">Success</c-separator>
<c-separator color="error">Error</c-separator>