Button · Ember · rbx.lol

The smallest button#

Two options:

Luau

main:Button({
    Text = "Rejoin server",
    Callback = function()
        game:GetService("TeleportService"):Teleport(game.PlaceId)
    end,
})

Text is the label on the left. Callback runs when the button is pressed. The button reads Run until you set ButtonText.

Preview

My Script

v1.0

Search…

Ember v1

Outlined

The house style, and the default.

Save configuration

Delete config

Building it up#

Add options one at a time.

Name the action. This replaces the default Run:

Luau

main:Button({
    Text = "Rejoin server",
    ButtonText = "Rejoin",
    Callback = rejoin,
})

Explain it. A second, quieter line:

Luau

main:Button({
    Text = "Rejoin server",
    Description = "Leaves and rejoins the same place.",
    ButtonText = "Rejoin",
    Callback = rejoin,
})

Add an icon. It sits inside the button, before its text:

Luau

main:Button({
    Text = "Rejoin server",
    ButtonText = "Rejoin",
    ButtonIcon = "refresh-cw",
    Callback = rejoin,
})

Mark it dangerous. For anything destructive:

Luau

main:Button({
    Text = "Delete config",
    ButtonText = "Delete",
    Danger = true,
    Callback = deleteConfig,
})

That covers most buttons. Everything below is optional.

Styles#

Preview

My Script

v1.0

Search…

Ember v1

Outlined

The house style, and the default.

Filled

Ghost

Soft

Danger

Luau

main:Button({ Text = "Outline", ButtonText = "Run" })                   -- default
main:Button({ Text = "Filled",  ButtonText = "Run", Style = "filled" })
main:Button({ Text = "Ghost",   ButtonText = "Run", Style = "ghost" })
main:Button({ Text = "Soft",    ButtonText = "Run", Style = "soft" })
main:Button({ Text = "Primary", ButtonText = "Go",  Primary = true })

Style	Looks like	Use it for
`outline`	A border, no fill	The default. Most buttons.
`filled`	Solid accent	The single most important action on a page
`ghost`	No border or fill until hovered	Low-priority actions, dense lists
`soft`	Translucent accent tint	A middle weight between outline and filled

One primary per section

If three buttons on a page are filled accent, none of them reads as the main action.

Ghost has no resting outline at all

It is bare coloured text until the pointer is over it. Next to an outline or Danger button it looks unstyled rather than quiet. Match the styles within a group, or use soft for a low-priority action that still needs to look like a button.

Hover and click animations#

Optional. Both Hover and Click take the same spec:

Luau

main:Button({
    Text = "Refresh data",
    ButtonText = "Refresh",
    ButtonIcon = "refresh-cw",
    Click = { Rotate = 360 },     -- the icon spins once on press
    Callback = refresh,
})

The spec keys are Rotate, Scale, Icon, Text and Hold, listed in full on Animations. The first three need a ButtonIcon to act on. Text works on a button without one.

A confirmation, with no extra state to manage:

Luau

main:Button({
    Text = "Save configuration",
    ButtonText = "Save",
    ButtonIcon = "save",
    Click = { Icon = "check", Text = "Saved", Hold = 1.4 },
    Callback = saveConfig,
})

The button shows a tick and Saved for 1.4 seconds, then goes back by itself.

Every option#

Option	Type	Default	What it does
`Text`req	`string`	`—`	The label on the left.
`Callback`	`function`	`—`	Called on press. Takes no arguments.
`ButtonText`	`string`	`"Run"`	The text inside the button.
`ButtonIcon`	`string`	`—`	An icon inside the button, before its text. Works alongside ButtonText.
`Description`	`string`	`—`	A quieter second line under the label.
`Icon`	`string`	`—`	An icon for the row itself, before the label.
`Style`	`string`	`"outline"`	outline, filled, ghost or soft.
`Primary`	`boolean`	`false`	Shorthand for the filled accent style. Style wins when both are set.
`Danger`	`boolean`	`false`	Paints it with the theme's 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. A theme role name works too.
`HoverFill`	`Color3 \| string`	`—`	The background colour on hover, or a theme role name.
`Tooltip`	`string`	`—`	Shown while the pointer is over the control.
`Disabled`	`boolean`	`false`	Refuses input and dims the control.
`DisabledReason`	`string`	`—`	Shown as a tooltip while it is disabled.

HoverColor and HoverFill are read by the outline style only. filled, ghost and soft each have their own hover built in.

Methods#

Method	What it does
`SetText(text)`	Replaces the text inside the button
`Show()` / `Hide()` / `SetVisible(bool)`	Shows or hides the row
`Destroy()`	Removes it from the page