IconButton · Ember

The smallest icon strip#

Luau

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

Preview

My Script

v1.0

Search…

Ember v1

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 },
    },
})

For one button, drop Buttons and put the entry's options on the control itself. The icon goes on the button, and the row keeps its label:

Luau

main:IconButton({
    Text = "Config",
    Icon = "trash-2",
    Danger = true,
    Callback = clearConfig,
})

Options#

Option	Type	Default	What it does
`Text`req	`string`	`—`	The label for the whole row.
`Buttons`	`table[]`	`—`	One entry per square button. Leave it out and the options table itself is the single button.
`Description`	`string`	`—`	A quieter second line.
`Icon`	`string`	`—`	An icon for the row's label. In the single-button form it goes on the button instead.
`Tooltip`	`string`	`—`	Shown while the pointer is over the row.
`Disabled`	`boolean`	`false`	Refuses input and dims the whole row.
`DisabledReason`	`string`	`—`	Shown as a tooltip while it is disabled.

Each entry in Buttons takes:

Option	Type	Default	What it does
`Icon`req	`string`	`—`	The glyph for this button.
`Callback`	`function`	`—`	Called when this button is pressed. Takes no arguments.
`Danger`	`boolean`	`false`	Paints this one with the danger colour.
`Hover`	`table`	`—`	Animation spec played while hovered.
`Click`	`table`	`—`	Animation spec played on press.
`HoverColor`	`Color3 \| string`	`—`	The border and glyph colour on hover, or a theme role name.
`HoverFill`	`Color3 \| string`	`—`	The background colour on hover, or a theme role name.

Tooltip, Disabled and DisabledReason are read on the row, not per entry. Disabling the row disables every button in it.

The handle carries Buttons, the array of TextButton instances in the order you declared them, alongside the usual Show, Hide and Destroy.

When to use it#

An icon strip is right when the actions are related and obvious, such as play and pause. 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", so use separate buttons with written labels for anything a first-time reader would have to guess at.