JakeStanger/ironbar

Fork 0

mirror of https://github.com/JakeStanger/ironbar.git synced 2026-07-11 10:15:20 +01:00

[GH-ISSUE #207] [Custom] Image buttons #4311

New issue

Closed

opened 2026-05-23 00:52:36 +01:00 by JakeStanger · 7 comments

JakeStanger commented

2026-05-23 00:52:36 +01:00

Owner

Originally created by @preetamsad on GitHub (Jun 30, 2023).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/207

Would be cool if we can use image/icons as button labels.

One alternative can be using box and image widget and using the on_left_click module level option to make an image button, but then we will lose the ability to use popups (probably can be achieved by using by scripts/variables but fells hackish).

Instead like the image widget the button can have src and size attributes and we can have cool image buttons. :)

Originally created by @preetamsad on GitHub (Jun 30, 2023). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/207 Would be cool if we can use image/icons as button labels. One alternative can be using `box` and `image` widget and using the `on_left_click` module level option to make an image button, but then we will lose the ability to use `popups` (probably can be achieved by using by scripts/variables but fells hackish). Instead like the `image` widget the `button` can have `src` and `size` attributes and we can have cool image buttons. :)

JakeStanger

2026-05-23 00:52:36 +01:00

closed this issue
added the
good first issue
label

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@yavko commented on GitHub (Jul 1, 2023):

Support for popups being opened from IPC isn't supported yet, so this would have to be added lol.

@yavko commented on GitHub (Jul 1, 2023): Support for popups being opened from IPC isn't supported yet, so this would have to be added lol.

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@JakeStanger commented on GitHub (Jul 1, 2023):

Buttons allow a single child element, but that element can be a Box, so my thinking is to add a widgets property that works the same way as the box currently and then you can go wild composing whatever you want inside a button.

So something like

$custom = {
  type = "custom"
  bar = [
    { 
      type = "button" 
      widgets = [
        { type = "image" src = "..." }
        { type = "label" label = "..." }
      ]
    }
  ]
}

@JakeStanger commented on GitHub (Jul 1, 2023): Buttons allow a single child element, but that element can be a Box, so my thinking is to add a `widgets` property that works the same way as the box currently and then you can go wild composing whatever you want inside a button. So something like ```corn $custom = { type = "custom" bar = [ { type = "button" widgets = [ { type = "image" src = "..." } { type = "label" label = "..." } ] } ] } ```

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@yavko commented on GitHub (Jul 1, 2023):

Buttons allow a single child element, but that element can be a Box, so my thinking is to add a widgets property that works the same way as the box currently and then you can go wild composing whatever you want inside a button.

So something like
$custom = {
  type = "custom"
  bar = [
    { 
      type = "button" 
      widgets = [
        { type = "image" src = "..." }
        { type = "label" label = "..." }
      ]
    }
  ]
}

Wouldn't that also require there to be a orientation property

@yavko commented on GitHub (Jul 1, 2023): > Buttons allow a single child element, but that element can be a Box, so my thinking is to add a `widgets` property that works the same way as the box currently and then you can go wild composing whatever you want inside a button. > > So something like > > ```corn > $custom = { > type = "custom" > bar = [ > { > type = "button" > widgets = [ > { type = "image" src = "..." } > { type = "label" label = "..." } > ] > } > ] > } > ``` > Wouldn't that also require there to be a orientation property

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@JakeStanger commented on GitHub (Jul 1, 2023):

That wasn't a complete example above, just the min case. orientation is optional, so it'd probs be the same on the button.

@JakeStanger commented on GitHub (Jul 1, 2023): That wasn't a complete example above, just the min case. `orientation` is optional, so it'd probs be the same on the button.

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@daktras420 commented on GitHub (Nov 30, 2023):

sorry for the question i am trying to make sense of this. to use this to make a custom power button that launches for example wlogout and a start button that would use woffi or nwg-draw?


custom = {
  type = "custom"
  bar = [
    { 
      type = "button" 
      widgets = [
        { type = "image" src = "location of icon png" }
        { type = "label" label = "powerbtn" }
      on_click=: "wlogout"
      ]
    }
  ]
}

@daktras420 commented on GitHub (Nov 30, 2023): sorry for the question i am trying to make sense of this. to use this to make a custom power button that launches for example wlogout and a start button that would use woffi or nwg-draw? ```corn custom = { type = "custom" bar = [ { type = "button" widgets = [ { type = "image" src = "location of icon png" } { type = "label" label = "powerbtn" } on_click=: "wlogout" ] } ] } ```

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@JakeStanger commented on GitHub (Nov 30, 2023):

If I'm understanding correctly you're asking for an example for those scenarios? To be clear this isn't implemented yet, but I think you'd eventually want something like:

{
	custom = {
		type = "custom"
		bar = [
			{
				type = "button"
				widgets = [ 
					{ type = "image" src = "location of icon png" }
        				{ type = "label" label = "logout" }
				]
				on_click = "wlogout"
			}
			{
				type = "button"
				widgets = [ 
					{ type = "image" src = "location of icon png" }
        				{ type = "label" label = "wofi menu" }
				]
				on_click = "wofi"
			}

		]
	}
}

@JakeStanger commented on GitHub (Nov 30, 2023): If I'm understanding correctly you're asking for an example for those scenarios? To be clear this isn't implemented yet, but I think you'd eventually want something like: ```corn { custom = { type = "custom" bar = [ { type = "button" widgets = [ { type = "image" src = "location of icon png" } { type = "label" label = "logout" } ] on_click = "wlogout" } { type = "button" widgets = [ { type = "image" src = "location of icon png" } { type = "label" label = "wofi menu" } ] on_click = "wofi" } ] } } ```

JakeStanger commented

2026-05-23 00:52:37 +01:00

Author

Owner

@daktras420 commented on GitHub (Nov 30, 2023):

yes but then came up with a better idea. using launcher atleast i came over a new project atleast to me.
application launcher
https://github.com/pop-os/cosmic-launcher
better eye candy then wofi and basically all the same features i am still working on all this but you have basic drun but it can do wifi logout aka power menu and more
https://github.com/oknozor/onagre
both projects use
https://github.com/pop-os/launcher
you might wanna look at these for integration they are all rust code and can be install via crates
i compiled them my self and trying to integrate at lest cosmic launcher to the launcher module
below is my work in progress if you see any errors i hit some road blocks

config.jason

{
"icon_theme": "Windows-7",
"position": "bottom",
"height": 42,
"start": [
{
"type": "launcher",
"show_icons": true,
"show_names": false,
"favorites": [
"cosmic-launcher",
"pamac-manager",
"google-chrome-stable",
"steam",
"qterminal",
"pcmanfm-qt"
]
}
]
"center": [],
"end": [
{
"type": "upower",
"format": "{percentage}%"
},
{
"type": "clock",
"format": "%m/%d/%Y %I:%M%P"
},
{
"type": "tray"
}
]
}

style.ccs

@define-color color_bg #b5fff6;
@define-color color_bg_dark #a7c7cb;
@define-color color_border #424242;
@define-color color_border_active #6699cc;
@define-color color_text #ffffff;
@define-color color_urgent #8f0a0a;

/* -- base styles -- */

{
font-family: Microsoft Sans Serif, Noto Sans Nerd Font, sans-serif;
font-size: 16px;
border: none;
border-radius: 0;
}

box, menubar, button {
background-color: @color_bg;
background-image: /home/daniel/.themes/Windows-Vista-1.0/cinnamon/panel-assets/item-normal.png;
}

button, label {
color: @color_text;
}

button:hover {
background-color: @color_bg_dark;
}

#bar {
border-top: 1px solid @color_border;
}

.popup {
border: 1px solid @color_border;
padding: 1em;
}

/* -- clipboard -- */

.clipboard {
margin-left: 5px;
font-size: 1.1em;
}

.popup-clipboard .item {
padding-bottom: 0.3em;
border-bottom: 1px solid @color_border;
}

/* -- clock -- */

.clock {
font-weight: bold;
margin-left: 5px;
}

.popup-clock .calendar-clock {
color: @color_text;
font-size: 2.5em;
padding-bottom: 0.1em;
}

.popup-clock .calendar {
background-color: @color_bg;
color: @color_text;
}

.popup-clock .calendar .header {
padding-top: 1em;
border-top: 1px solid @color_border;
font-size: 1.5em;
}

.popup-clock .calendar:selected {
background-color: @color_border_active;
}

/* -- launcher -- */

.launcher .item {
margin-right: 4px;
}

.launcher .item:not(.focused):hover {
background-color: @color_bg_dark;
}

.launcher .open {
border-bottom: 1px solid @color_text;
}

.launcher .focused {
border-bottom: 2px solid @color_border_active;
}

.launcher .urgent {
border-bottom-color: @color_urgent;
}

.popup-launcher {
padding: 0;
}

.popup-launcher .popup-item:not(:first-child) {
border-top: 1px solid @color_border;
}

/* -- music -- */

.music:hover * {
background-color: @color_bg_dark;
}

.popup-music .album-art {
margin-right: 1em;
}

.popup-music .icon-box {
margin-right: 0.4em;
}

.popup-music .title .icon, .popup-music .title .label {
font-size: 1.7em;
}

.popup-music .controls *:disabled {
color: @color_border;
}

.popup-music .volume .slider slider {
border-radius: 100%;
}

.popup-music .volume .icon {
margin-left: 4px;
}

.popup-music .progress .slider slider {
border-radius: 100%;
}

/* -- script -- */

.script {
padding-left: 10px;
}

/* -- sys_info -- */

.sysinfo {
margin-left: 10px;
}

.sysinfo .item {
margin-left: 5px;
}

/* -- tray -- */

.tray {
margin-left: 10px;
}

/* -- workspaces -- */

.workspaces .item.focused {
box-shadow: inset 0 -3px;
background-color: @color_bg_dark;
}

.workspaces .item:hover {
box-shadow: inset 0 -3px;
}

/* -- custom: power menu -- */

.popup-power-menu #header {
font-size: 1.4em;
padding-bottom: 0.4em;
margin-bottom: 0.6em;
border-bottom: 1px solid @color_border;
}

.popup-power-menu .power-btn {
border: 1px solid @color_border;
padding: 0.6em 1em;
}

.popup-power-menu #buttons > *:nth-child(1) .power-btn {
margin-right: 1em;
}

to those whom hate aero vista and glass please refaine from comments on my prefernces sill a work in progres trying to make the bar have a aero glass effect

@daktras420 commented on GitHub (Nov 30, 2023): yes but then came up with a better idea. using launcher atleast i came over a new project atleast to me. application launcher https://github.com/pop-os/cosmic-launcher better eye candy then wofi and basically all the same features i am still working on all this but you have basic drun but it can do wifi logout aka power menu and more https://github.com/oknozor/onagre both projects use https://github.com/pop-os/launcher you might wanna look at these for integration they are all rust code and can be install via crates i compiled them my self and trying to integrate at lest cosmic launcher to the launcher module below is my work in progress if you see any errors i hit some road blocks config.jason { "icon_theme": "Windows-7", "position": "bottom", "height": 42, "start": [ { "type": "launcher", "show_icons": true, "show_names": false, "favorites": [ "cosmic-launcher", "pamac-manager", "google-chrome-stable", "steam", "qterminal", "pcmanfm-qt" ] } ] "center": [], "end": [ { "type": "upower", "format": "{percentage}%" }, { "type": "clock", "format": "%m/%d/%Y %I:%M%P" }, { "type": "tray" } ] } style.ccs @define-color color_bg #b5fff6; @define-color color_bg_dark #a7c7cb; @define-color color_border #424242; @define-color color_border_active #6699cc; @define-color color_text #ffffff; @define-color color_urgent #8f0a0a; /* -- base styles -- */ * { font-family: Microsoft Sans Serif, Noto Sans Nerd Font, sans-serif; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: /home/daniel/.themes/Windows-Vista-1.0/cinnamon/panel-assets/item-normal.png; } button, label { color: @color_text; } button:hover { background-color: @color_bg_dark; } #bar { border-top: 1px solid @color_border; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { margin-left: 5px; font-size: 1.1em; } .popup-clipboard .item { padding-bottom: 0.3em; border-bottom: 1px solid @color_border; } /* -- clock -- */ .clock { font-weight: bold; margin-left: 5px; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 4px; } .launcher .item:not(.focused):hover { background-color: @color_bg_dark; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 2px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_dark; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { margin-left: 10px; } /* -- workspaces -- */ .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @color_bg_dark; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: power menu -- */ .popup-power-menu #header { font-size: 1.4em; padding-bottom: 0.4em; margin-bottom: 0.6em; border-bottom: 1px solid @color_border; } .popup-power-menu .power-btn { border: 1px solid @color_border; padding: 0.6em 1em; } .popup-power-menu #buttons > *:nth-child(1) .power-btn { margin-right: 1em; } to those whom hate aero vista and glass please refaine from comments on my prefernces sill a work in progres trying to make the bar have a aero glass effect