Component SplitButton

SplitButton

A primary action button with a chevron that opens a dropdown of secondary actions. The chevron shares the primary button's look but routes to a DropdownMenu of items.

Import

use yororen_ui::headless::split_button::split_button;
use yororen_ui::headless::dropdown_menu::DropdownMenuItem;
use yororen_ui::headless::dropdown_menu::DropdownMenuState;

Minimal example

use yororen_ui::headless::split_button::split_button;
use yororen_ui::headless::dropdown_menu::DropdownMenuItem;
use gpui::Entity;

let menu_state: Entity<DropdownMenuState> = cx.new(|cx| DropdownMenuState::new(cx));

split_button(
    "run-action",
    |_event, _window, _cx| { /* primary action */ },
    cx,
)
    .caption("Run")
    .items(vec![
        DropdownMenuItem::new("run-debug", "Run with debugger"),
        DropdownMenuItem::new("run-profile", "Run with profiler"),
    ])
    .state(menu_state)
    .on_select({
        let entity = cx.entity();
        move |id: SharedString, _window, cx| {
            entity.update(cx, |s, _cx| s.last_action = id);
        }
    })
    .render(cx)

Props

Method	Purpose
disabled(v)	Disable both halves of the button.
caption(text)	Primary label (e.g. "Run").
items(v)	The Vec<DropdownItem> shown in the dropdown half.
on_select(closure)	Fn(SharedString, &mut Window, &mut App) + 'static + Send + Sync. The id of the picked item.
state(s)	An Entity<DropdownMenuState> the caller owns.

The primary click is supplied to the factory as the second argument: Fn(&ClickEvent, &mut Window, &mut App) + 'static + Send + Sync.

Notes

• Factory takes (id, primary, cx). The cx is needed for the focus handles (primary + chevron each get their own).
• The state: Entity<DropdownMenuState> is optional — without it, the chevron still opens a dropdown but the caller cannot programmatically toggle it. Pass one if you want to read the open state or close it from the outside.
• .render(cx) returns Stateful<Div>.

See also

Button, DropdownMenu, ToggleButton