Getting Started

Let's create a button with an event. X and Y coordinates are 10 and 10 by default, width and height fit the text:

require "gooi"
function love.load()
    gooi.newButton({text = "Exit"}):onRelease(function()
        love.event.quit()
    end)
end

function love.draw()
    gooi.draw()
end

function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

Result:

Adding more:

require "gooi"
function love.load()
    gooi.newButton({
        text = "Exit",
        x = 100,
        y = 100,
        w = 150,
        h = 35,
        icon = "imgs/exit.png"
    }):onRelease(function()
        gooi.confirm({
            text = "Are you sure?",
            ok = function()
                love.event.quit()
            end
        })
    end)
    :warning()

end

function love.draw()
    gooi.draw()
end

function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

Result:

Channeling a value:

(Note how update operations are needed here)

require "gooi"
function love.load()
    btn = gooi.newButton({
        text = "Exit",
        x = 100,
        y = 100,
        w = 150,
        h = 35,
        icon = "imgs/exit.png"
    }):onRelease(function()
        gooi.confirm({
            text = "Are you sure?",
            ok = function()
                love.event.quit()
            end
        })
    end)
    :warning()

    slider = gooi.newSlider()
end

function love.update(dt)
    gooi.update(dt)
    btn.style.bgColor[2] = slider:getValue()
end

function love.draw()
    gooi.draw()
end

function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end