Snippet. Vala. Create a Button with Image

Here is how to create a button with custom image displayed on the left of the button and label on the right:

  • Create a standard horizontal layout with GtkHBox.
  • Create a new image with GtkImage, pointing to the image file.
  • Pack the image in the hbox.
  • Create a new label with GtkLabel and pack it inside the hbox too.
  • Create a standard GtkButton.
  • Add the GtkHBox into the GtkButton
// 1. Create the horizontal layout
Gtk.HBox box = new Gtk.HBox(false, 0);
// 2. Create the image with the custom file
Gtk.Image image = new Gtk.Image();
// 3. Create a label for the button
Gtk.Label label = new Gtk.Label("Click me");
    label.set_markup("<span foreground=\"red\" size=\"32000\"><b>Click me</b></span>");

// 4. Pack the image and label into the box
box.pack_start(image, false, false, 20);
box.pack_start(label, false, false, 3);;;

// 5. Create the button and add the layout
Gtk.Button button = new Gtk.Button();

// 6. Connect the click signal


Updated on: 21 Jul 2024