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::core::ui::{Button, ButtonContentAlign, Text};
let node = Button {
width: Some(280.0),
content_align: ButtonContentAlign::Start,
child: Some(Box::new(Text::new("Open project").into_node())),
on_press: Some(open_project_action),
..Default::default()
}
.into_node();
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.
Related
Button, ButtonVariant, Align, and Row.