awesome-buttons

Button widget library for Awesome Window Manager

Customizations

Text button

Name	Default	Description
type	basic	Button type, could be 'outline', 'flat' or 'basic'
text	''	Button text
color	#D8DEE9	Button color
text_size	10	Size of the text
onclick	function() end	Function which is called when button is clicked

Icon button

Name	Default	Description
type	basic	Button type, could be 'outline', 'flat' or 'basic'
color	#D8DEE9	Button color
icon	help-circle	Icon name from feathericons, or path to the icon, read below for more details
icon_size	20	Size of the icon
icon_margin	4	Margins around the icon
shape	circle	Shape of the button, could be 'circle', 'rounded_rect' or 'rectangle'
onclick	function() end	Function which is called when button is clicked

Icon with text button

Name	Default	Description
type	basic	Button type, could be 'outline', 'flat' or 'basic'
icon	help-circle	Icon name from feathericons, or path to the icon, read below for more details
text	''	Button text
text_size	10	Size of the text
onclick	function() end	Function which is called when button is clicked

Buttons come with preinstalled icons (taken from https://feathericons.com/). So you can either specify the name of the icon to use (to check available icons check the https://feathericons.com/ or under the icons folder):

awesomebuttons.with_icon{ icon = 'moon', color = '#f88' }

or provide a path to the icon:

awesomebuttons.with_icon{ icon = '/home/something/something.svg', color = '#f88' }

Demo

To check buttons in action, simply add the section below to your rc.lua. It will create a wibox with buttons (same as in screenshot.)

local awesomebuttons = require("awesome-buttons.awesome-buttons")

local buttons_example = wibox {
    visible = true,
    bg = '#2E3440',
    max_widget_size = 500,
    ontop = true,
    height = 200,
    width = 500,
    shape = function(cr, width, height)
        gears.shape.rounded_rect(cr, width, height, 3)
    end
}

buttons_example:setup {
    {
        {
            {
                markup = '<span size="20000" color="white">Awesome Buttons Demo</span>',
                align = 'center',
                widget = wibox.widget.textbox
            },
            {
                wibox.widget.textbox('Only text:'),
                awesomebuttons.with_text{ text = 'Hello', color = '#ff8' },
                awesomebuttons.with_text{ type = 'outline', text = 'Bonjour', color = '#8ff', text_size = 8 },
                awesomebuttons.with_text{ type = 'flat', text = 'Ola', color = '#f8f', text_size = 12 },
                spacing = 8,
                layout = wibox.layout.fixed.horizontal
            },
            {
                wibox.widget.textbox('Only icon:'),
                awesomebuttons.with_icon{ icon = 'moon', color = '#f88' },
                awesomebuttons.with_icon{ icon = 'meh', color = '#a38', shape = 'circle' },
                awesomebuttons.with_icon{ icon = 'map', color = '#f8c', shape = 'rounded_rect' },
                awesomebuttons.with_icon{ type = 'outline', icon = 'sun', color = '#218' },
                awesomebuttons.with_icon{ type = 'outline', icon = 'shield', color = '#188', shape = 'circle' },
                awesomebuttons.with_icon{ type = 'outline', icon = 'zoom-in', color = '#f8f', shape = 'rounded_rect' },
                awesomebuttons.with_icon{ type = 'flat', icon = 'truck', color = '#fc8' },
                awesomebuttons.with_icon{ type = 'flat', icon = 'wifi', color = '#488', shape = 'circle' },
                awesomebuttons.with_icon{ type = 'flat', icon = 'watch', color = '#788', shape = 'rounded_rect' },
                spacing = 8,
                layout = wibox.layout.fixed.horizontal
            },
            {
                wibox.widget.textbox('Icon and text:'),
                awesomebuttons.with_icon_and_text{ icon = 'check-circle', text = 'With Icon!', color = '#f48' },
                awesomebuttons.with_icon_and_text{ type = 'outline', icon = 'battery-charging', text = 'Charging', color = '#8d1' },
                awesomebuttons.with_icon_and_text{ type = 'flat', icon = 'star', text = 'Awesome!!!', color = '#EBCB8B' },
                spacing = 8,
                layout = wibox.layout.fixed.horizontal
            },
            spacing = 16,
            layout = wibox.layout.fixed.vertical,
        },
        shape_border_width = 1,
        valigh = 'center',
        layout = wibox.container.place
    },
    margins = 16,
    widget = wibox.container.margin
}

awful.placement.top(buttons_example, { margins = {top = 40}, parent = awful.screen.focused()})