Divider

Live Demo

Open the demo in a separate tab.

A Divider is a visual separation primitive, similar to the HTML <hr> element.

It creates a visible line between pieces of content and can be oriented horizontally or vertically.

Unlike using a border on another component, a Divider is its own component. That makes its position, size, styling, and animation explicit and independently controllable.

A border decorates a component. A Divider creates a separation.

Basic Usage

Create a horizontal Divider with divider():

#![allow(unused)]
fn main() {
divider()
}

Horizontal is the default orientation.

A vertical Divider can be created explicitly:

#![allow(unused)]
fn main() {
divider()
    .vertical()
}

The orientation can therefore be read directly from the code.

Horizontal and Vertical

Horizontal Dividers are useful for separating content vertically:

#![allow(unused)]
fn main() {
column()
    .children([
        text("Profile"),
        divider(),
        text("Settings"),
    ])
}

Vertical Dividers are useful for separating content horizontally:

#![allow(unused)]
fn main() {
row()
    .children([
        text("Navigation"),
        divider().vertical(),
        text("Content"),
    ])
}

The Divider itself does not care what it separates.

The layout determines where the Divider goes. The Divider determines how the separation is presented.

Children

A Divider is intentionally a simple primitive and normally does not contain children.

Its purpose is to create visual separation, not to become a container.

#![allow(unused)]
fn main() {
divider()
}

If content needs to appear alongside a Divider, compose the Divider with the surrounding layout:

#![allow(unused)]
fn main() {
row()
    .children([
        text("Left"),
        divider().vertical(),
        text("Right"),
    ])
}

This keeps the responsibilities clear.

Styling

A Divider can be configured using the same fluent styling model as other Beverly components.

#![allow(unused)]
fn main() {
divider()
    .width(200)
}

A vertical Divider can be sized along its horizontal axis:

#![allow(unused)]
fn main() {
divider()
    .vertical()
    .height(200)
}

Other presentation properties can be configured directly:

#![allow(unused)]
fn main() {
divider()
    .width(200)
    .thickness(1)
}

The exact dimensions remain part of the component rather than being hidden inside a border on an unrelated component.

Placement

One of the advantages of a Divider as its own primitive is that it can be placed wherever the layout requires it.

#![allow(unused)]
fn main() {
card()
    .children([
        text("Account"),
        divider(),
        text("Preferences"),
        divider(),
        text("Security"),
    ])
}

A vertical Divider can be placed between controls:

#![allow(unused)]
fn main() {
row()
    .children([
        button().text(localize("editor.undo")),

        divider().vertical(),

        button().text(localize("editor.redo")),
    ])
}

The Divider does not need to belong to either neighboring component.

It is a component in the layout, not a property of the components around it.

Animation

Because the Divider is an independent component, it can be animated directly.

For example, its size can become part of a transition:

#![allow(unused)]
fn main() {
divider()
    .width(200)
    .animate()
}

Or a Divider can be used as part of a state-driven presentation:

#![allow(unused)]
fn main() {
divider()
    .width(200)
    .error(|errors| text(errors.join("\n")))
}

The important distinction is architectural: the Divider has its own geometry and presentation, so animation does not require modifying a border belonging to another component.

This makes Dividers useful for more than static separation.

They can become part of transitions, expanding panels, loading states, visual timelines, and other interface effects.

A Divider can move, grow, shrink, fade, and animate because it is an object in the layout.

Data-Driven Dividers

A Divider can also be generated by ordinary Rust when the layout is data-driven.

#![allow(unused)]
fn main() {
fn section_divider() -> impl Component {
    divider()
        .thickness(1)
}
}

Use it like any other component:

#![allow(unused)]
fn main() {
section_divider()
}

There is no special Divider extension system.

Higher-level components are ordinary Rust functions that return lower-level components.

Accessibility

A purely decorative Divider generally does not need to communicate additional information to assistive technology.

Its purpose is visual separation.

When a Divider represents a meaningful semantic boundary rather than merely a visual line, the surrounding structure should communicate that meaning rather than relying on the line itself.

This keeps the visual primitive simple while allowing the application to provide semantic structure where appropriate.

Not every visual element needs to become an interactive or semantic control.

What Divider Does Not Do

Divider does not:

• own application state
• manage layout state
• contain application data
• define navigation
• emit application Commands
• replace a layout container
• require a separate styling system

It is simply a visual separation primitive.

Divider vs Border

A border is generally part of another component’s presentation:

#![allow(unused)]
fn main() {
card()
    .border_width(1)
}

A Divider is its own component:

#![allow(unused)]
fn main() {
divider()
}

Use a border when the boundary belongs to the component itself.

Use a Divider when the separation is an independent element in the layout.

This distinction becomes especially useful when the separation needs its own size, position, animation, or lifecycle.

Design Principle

The Divider deliberately does one thing well:

Create visual separation as an independent component.

It supports horizontal and vertical orientation, can be positioned anywhere in the layout, and can be styled or animated independently.

There is no need for a larger abstraction.

If a border is enough, use a border. If the separation is part of the layout, use a Divider.

Create. Configure. Compose. Animate when needed.