Quill docs

Divider

A separator rule. A semantic divider renders as role=separator (announced as a structural break); a decorative one is a hidden hr. Its axes are orientation (horizontal or vertical) and the spacing scale around the line.

Preview#

A separator rule — horizontal and vertical, across the spacing scale. A semantic divider is role=separator; a decorative one is a hidden hr.

horizontal

vertical

Left

Right

Playground#

Change the controls — the preview and the snippet update live.

Orientation

Spacing

Rule

Divider::new()
    .size(Size::Md)
    // .vertical() for a vertical hairline
    .render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Divider::new().size(Size::Md).render()
    )

Code#

Construct the component with its builder:

Divider::new().size(Size::Md).render()
// A decorative, screen-reader-silent rule:
Divider::decorative().render()
// A vertical hairline (needs a flex row context):
Divider::new().vertical().render()