Divider

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.

Divider

Example

Field table

Layout behavior

Specific advice

Production checklist

Related