Divider

Fission

Product

▾

Setup

›

›

Divider is the simplest grouping aid in the widget set.

Use it when content belongs to one surface but still needs visible separation between sections, rows, or tool groups. A divider is lighter than putting every piece of content in its own card.

Example

use fission::prelude::*;

let widget: Widget = VStack {
    spacing: Some(0.0),
    children: vec![
        Text::new("General").into(),
        Divider::default().into(),
        Text::new("Security").into(),
    ],
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
orientation	Orientation	Whether the line runs horizontally or vertically.	Defaults to Orientation::Horizontal.

Layout behavior

A horizontal divider grows to fill available width and uses a fixed height of one point. A vertical divider grows to fill available height and uses a fixed width of one point. This makes it a good structural separator inside rows, columns, and menus.

Specific advice

Use dividers to clarify grouping, not to draw a line between every single thing on screen. If every row gets a divider plus a card plus extra borders, the interface usually becomes noisier instead of clearer.

Production checklist

For Divider, review the fields that change behavior before treating the widget as finished: orientation. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Divider setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Card, Alert, Row, and Column.