rbx.lol

IconButton

A row of small square buttons, each with its own icon and action.

The smallest icon strip#

Luau
main:IconButton({
    Text = "Playback",
    Buttons = {
        { Icon = "play",  Callback = play },
        { Icon = "pause", Callback = pause },
    },
})
Live preview

My Script

v1.0

Icon strip

Each entry carries its own behaviour.

Building it up#

Each entry in Buttons is its own control, with its own icon, action and colour:

Luau
main:IconButton({
    Text = "Playback",
    Description = "Each entry carries its own behaviour.",
    Buttons = {
        { Icon = "play",       Callback = play },
        { Icon = "pause",      Callback = pause },
        { Icon = "refresh-cw", Callback = restart, Click = { Rotate = 360 } },
        { Icon = "trash-2",    Callback = clear,   Danger = true },
    },
})

Options#

OptionTypeDefaultWhat it does
Textreqstring—The label for the whole row.
Buttonsreqtable[]—One entry per square button.
Descriptionstring—A quieter second line.
Iconstring—An icon for the row's label.

Each entry in Buttons takes:

OptionTypeDefaultWhat it does
Iconreqstring—The glyph for this button.
Callbackfunction—Called when this button is pressed.
DangerbooleanfalsePaints this one with the danger colour.
Hovertable—Animation spec played while hovered.
Clicktable—Animation spec played on press.
Tooltipstring—Describes what the button does.

When to use it#

An icon strip is right when the actions are related and obvious: play, pause, reset. Four glyphs in a row take one line where four Button rows take four.

It is wrong when the actions need explaining — an icon alone cannot say "regenerate the config from the server". Use separate buttons with real labels for anything a first-time reader would have to guess at.