@gtkx/react / AdwSplitButton

Variable: AdwSplitButton

const AdwSplitButton: (props) => ReactNode

Defined in: packages/react/src/generated/compounds.ts:1195

A combined button and dropdown widget.

AdwSplitButton is typically used to present a set of actions in a menu, but allow access to one of them with a single click.

The API is very similar to Gtk.Button and Gtk.MenuButton, see their documentation for details.

CSS nodes

splitbutton[.image-button][.text-button]
├── button
│   ╰── <content>
├── separator
╰── menubutton
    ╰── button.toggle
        ╰── arrow

AdwSplitButton's CSS node is called splitbutton. It contains the css nodes: button, separator, menubutton. See Gtk.MenuButton documentation for the menubutton contents.

The main CSS node will contain the .image-button or .text-button style classes matching the button contents. The nested button nodes will never contain them.

Style classes

AdwSplitButton can use some of the same style classes as Gtk.Button:

• .suggested-action
• .destructive-action
• .flat
• .raised

Other style classes, like .pill, cannot be used.

Accessibility

AdwSplitButton uses the GTK_ACCESSIBLE_ROLE_GROUP role.

Parameters

Parameter	Type
props	AdwSplitButtonProps

Returns

ReactNode