GtkModelButton is a button class that can use a Action as its model.

In contrast to ToggleButton or RadioButton, which can also be backed by a Action via the action_name property, GtkModelButton will adapt its appearance according to the kind of action it is backed by, and appear either as a plain, check or radio button.

Model buttons are used when popovers from a menu model with Popover.from_model; they can also be used manually in a PopoverMenu.

When the action is specified via the action_name and action_target properties, the role of the button (i.e. whether it is a plain, check or radio button) is determined by the type of the action and doesn't have to be explicitly specified with the role property.

The content of the button is specified by the text and icon properties.

The appearance of model buttons can be influenced with the centered and iconic properties.

Model buttons have built-in support for submenus in PopoverMenu. To make a GtkModelButton that opens a submenu when activated, set the menu_name property. To make a button that goes back to the parent menu, you should set the inverted property to place the submenu indicator at the opposite side.

Example

<object class="GtkPopoverMenu">
  <child>
    <object class="GtkBox">
      <property name="visible">True</property>
      <property name="margin">10</property>
      <child>
        <object class="GtkModelButton">
          <property name="visible">True</property>
          <property name="action-name">view.cut</property>
          <property name="text" translatable="yes">Cut</property>
        </object>
      </child>
      <child>
        <object class="GtkModelButton">
          <property name="visible">True</property>
          <property name="action-name">view.copy</property>
          <property name="text" translatable="yes">Copy</property>
        </object>
      </child>
      <child>
        <object class="GtkModelButton">
          <property name="visible">True</property>
          <property name="action-name">view.paste</property>
          <property name="text" translatable="yes">Paste</property>
        </object>
      </child>
    </object>
  </child>
</object>

CSS nodes

modelbutton
├── <child>
╰── check

guage="plain" --> modelbutton ├── <child> ╰── radio ]|

modelbutton
├── <child>
╰── arrow

tton has a main CSS node with name modelbutton, and a subnode, which will have the name check, radio or arrow, depending on the role of the button and whether it has a menu name set.

The subnode is positioned before or after the content nodes and gets the .left or .right style class, depending on where it is located.

button.model
├── <child>
╰── check

el buttons (see iconic) change the name of their main node to button and add a .model style class to it. The indicator subnode is invisible in this case.