ButtonContentAlign

ButtonContentAlign is the alignment setting you pass to Button when the button's child should not stay centered.

You usually encounter it when a button is wider than its content. A centered label works well for ordinary call-to-action buttons, but a full-width row button, toolbar button, or list-style menu button often reads better when its content starts at the left edge or ends at the right edge.

Example

use fission::prelude::*;
let widget: Widget = Button {
width: Some(280.0),
content_align: ButtonContentAlign::Start,
child: Some(Text::new("Open project").into()),
on_press: Some(open_project_action),
..Default::default()
}
.into();

In this example the button is intentionally wider than its label, so Start makes the text read like a list row instead of a centered badge.

Choice table

Choice	Type	Meaning	Notes / default behavior
Center	ButtonContentAlign	Centers the child inside the button content box.	Default. Best for standard action buttons.
Start	ButtonContentAlign	Places the child at the leading edge of the button content box.	Useful for full-width buttons, menu-like rows, and text-plus-icon actions that should read from left to right.
End	ButtonContentAlign	Places the child at the trailing edge of the button content box.	Useful for trailing utility actions, but uncommon for primary actions.

When to use it

Use this setting when the content alignment inside the button is part of the interaction design. A full-width settings row with a label and icon often wants Start. A compact toolbar button might still want Center.

Do not use ButtonContentAlign to solve outer layout problems. If the whole button needs to move left, right, or fill available width, change the parent layout with Row, Align, or a width setting on the button itself.

Specific advice

If your button child is already a layout widget such as an HStack with its own spacer, keep the two layers of alignment straight. ButtonContentAlign controls where that whole child sits inside the button. The child widget still controls spacing inside itself.

Production checklist

For ButtonContentAlign, review the fields that change behavior before treating the widget as finished: Center, Start, End. 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 ButtonContentAlign 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.

Button, ButtonVariant, Align, and Row.