SlateUI
DocsComponentsGitHub
Install SlateUI Plugin
SlateUI
DocsComponentsGitHub
Install SlateUI Plugin

Components

  • installation
  • button
  • inputs
  • notification
  • progressbar
  • loading
  • proximity
  • router
Component

ButtonService

Adds hover, press, and release animations to any TextButton. Supports built-in theme presets and fully custom theme tables — no extra instances required.

Overview

ButtonService.Init() attaches all mouse event listeners to a TextButton and manages color and scale transitions via TweenService. It handles the edge case where the cursor leaves while the button is held — the button correctly resets on MouseLeave. AnchorPoint is automatically corrected to (0.5, 0.5) so the press-scale tween shrinks from the center.

Interactive Preview

Properties

Secondary theme
ButtonService.Init(script.Parent.MyButton, "primary")

Quick Use

Pass the TextButton instance, a theme name, and optional press/release callbacks. The service takes over from there — no return value is needed for basic usage.

Minimal setup — primary theme

luau
1
2
3
4
local ButtonService = require(game.ReplicatedStorage.SlateUI.ButtonService)
 
-- Attach to any TextButton
ButtonService.Init(script.Parent.MyButton, "primary")

With press and release callbacks

luau
1
2
3
4
5
6
7
8
ButtonService.Init(script.Parent.ConfirmButton, "primary",
function(btn) -- onPress
print("Button pressed:", btn.Name)
end,
function(btn) -- onRelease
print("Button released:", btn.Name)
end
)

Built-in Themes

Two presets are included: 'primary' uses the slate-600 palette (the default SlateUI accent), and 'secondary' uses a near-black palette for subtle ghost-style buttons. Both include separate DefaultColor, HoverColor, PressColor, DefaultStroke, and HoverStroke values.

Using the secondary theme

luau
1
ButtonService.Init(script.Parent.CancelButton, "secondary")

Custom Themes

Pass a table directly as the second argument instead of a string. Your table must include the five color keys: DefaultColor, HoverColor, PressColor, DefaultStroke, and HoverStroke — all Color3 values.

Fully custom theme — red destructive button

luau
1
2
3
4
5
6
7
8
9
10
11
local dangerTheme = {
DefaultColor = Color3.fromRGB(185, 28, 28),
HoverColor = Color3.fromRGB(220, 38, 38),
PressColor = Color3.fromRGB(153, 27, 27),
DefaultStroke = Color3.fromRGB(127, 29, 29),
HoverStroke = Color3.fromRGB(185, 28, 28),
}
 
ButtonService.Init(script.Parent.DeleteButton, dangerTheme,
function() print("Deleting...") end
)

API — ButtonService.Init

PropTypeDefaultDescription
buttonTextButton—The TextButton instance to attach behavior to.
theme"primary" | "secondary" | table"primary"Theme preset name or a custom table with five Color3 fields. Falls back to "primary" if unrecognized.
onPress(button: TextButton) -> ()?nilOptional callback fired on MouseButton1Down.
onRelease(button: TextButton) -> ()?nilOptional callback fired on MouseButton1Up or MouseLeave-while-pressed.

How It Works Internally

The service stores the button's original Size on init and computes a pressedScale at 95% of that size. A shared UserInputService.InputEnded listener ensures the button always resets even if the cursor teleports off-screen. The UIStroke child (if present) is tweened separately for the border color effect.