Component ButtonGroup

ButtonGroup

A layout helper for grouping buttons.

This is a purely visual/layout component: it arranges children in a row and optionally makes them look like a connected “segmented” group.

Example

use gpui::px;
use yororen_ui::component::{button, button_group};

let view = button_group()
    .gap(px(8.).into())
    .child(button().child("Cancel"))
    .child(button().child("Save"));

When to use

• Group related actions in toolbars or dialog action rows
• Build segmented controls (often together with ToggleButton)

API

• button_group(): constructor
• gap(DefiniteLength): spacing between children (only when not connected)
• radius(AbsoluteLength): corner radius when connected(true)
• connected(bool):
  • false (default): children are separate, gap(...) applies
  • true: children become one connected shape (overflow clipped)

Defaults

• Layout: horizontal row (flex) and center aligned
• connected(false)

Example: Connected group

use gpui::px;
use yororen_ui::component::{button, button_group};

let view = button_group()
    .connected(true)
    .radius(px(10.).into())
    .child(button().child("Day"))
    .child(button().child("Week"))
    .child(button().child("Month"));

Notes

• Use .connected(true) when you want a single connected shape.