UI Elements

Important

Always provide a key parameter if you want the element's value to be saved and loaded between sessions. Without a key, the element will reset to its default value when reloading the UI.

Adding Icons to Text

You can use Aurora.texture() to add spell icons or custom textures to your text:

-- Using spell ID (automatically gets spell icon)
local fireballIcon = Aurora.texture(133) -- Fireball spell ID

-- Using custom texture path
local customIcon = Aurora.texture("Interface\\Icons\\Ability_Warrior_Charge")

-- Specify custom size (default is 14)
local largeIcon = Aurora.texture(133, 20)

-- Use in UI elements
gui:Header({
    text = fireballIcon .. " Fire Spells"
})

gui:Button({
    text = customIcon .. " Charge Settings"
})

Button

gui:Button({
    text = "Click Me",
    width = 120,      -- Optional
    height = 25,      -- Optional
    tooltip = "Click this button to do something", -- Optional tooltip
    onClick = function() 
        print("clicked") 
    end
})

Checkbox

gui:Checkbox({
    text = "Enable Feature",
    key = "feature.enabled",  -- Config key for saving
    default = false,          -- Default value
    tooltip = "Enable this feature to do something cool", -- Optional tooltip
    onChange = function(self, checked)
        print("Checkbox changed:", checked)
    end
})

Slider

gui:Slider({
    text = "Speed",
    key = "speed.value",
    min = 0,
    max = 100,
    step = 1,
    default = 50,
    tooltip = "Adjust the speed of the animation", -- Optional tooltip
    onChange = function(self, value)
        print("Speed changed:", value)
    end
})

Dropdown

gui:Dropdown({
    text = "Quality",
    key = "graphics.quality",
    options = {
        { text = "Low", value = "low" },
        { text = "Medium", value = "medium" },
        { text = "High", value = "high" }
    },
    default = "medium",
    multi = false,           -- Set to true for multi-select
    width = 200,            -- Optional
    tooltip = "Select quality level",
    onChange = function(self, value)
        print("Quality changed:", value)
    end
})

Header

gui:Header({
    text = "Section Title"
})

Half Label

gui:HalfLabel({
    text = "Left Side"
})

Spacer

gui:Spacer()  -- Adds empty space 

ColorPicker

gui:ColorPicker({
    text = "Text Color",
    key = "ui.textColor",    -- Config key for saving
    default = {r = 1, g = 0, b = 0, a = 1},  -- Default to red
    width = 200,             -- Optional
    height = 20,             -- Optional
    tooltip = "Choose the color for UI text",
    onChange = function(self, color)
        print("Color changed:", color.r, color.g, color.b, color.a)
        -- Example: Apply the color
        -- MyAddonFrame.text:SetTextColor(color.r, color.g, color.b, color.a)
    end
})

DoubleSlider

gui:DoubleSlider({
    text1 = "Min Health",    -- Label for first slider
    text2 = "Max Health",    -- Label for second slider
    key = "healing.range",   -- Base key for saving (will append .value1 and .value2)
    min1 = 0,                -- Minimum value for first slider
    max1 = 100,              -- Maximum value for first slider
    min2 = 0,                -- Minimum value for second slider
    max2 = 100,              -- Maximum value for second slider
    default1 = 30,           -- Default value for first slider
    default2 = 80,           -- Default value for second slider
    step = 1,                -- Default step size for both sliders
    step1 = 5,               -- Optional: Custom step for first slider
    step2 = 5,               -- Optional: Custom step for second slider
    tooltip = "Set the health percentage range for healing spells",
    onChange = function(self, value1, value2)
        print("Range changed:", value1, "to", value2)
    end
})

This creates two sliders that can be used to set a minimum and maximum value, perfect for defining ranges like health thresholds, distance limits, or time intervals.

Sliders with Different Units

You can use the DoubleSlider when you need to set two related values that may use different units or scales:

gui:DoubleSlider({
    text1 = "Distance",
    text2 = "Time Limit",
    key = "movement.parameters",
    min1 = 0,
    max1 = 40,  -- Distance in yards
    min2 = 0,
    max2 = 10,  -- Time in seconds
    default1 = 20,
    default2 = 3,
    tooltip = "Configure distance and time limit for movement abilities"
})

Tooltips

Every UI element can have a tooltip that appears when hovering over it. Just add the tooltip parameter to any element:

gui:Button({
    text = "My Button",
    tooltip = "This tooltip explains what the button does"
})

Hotkey

gui:Hotkey({
    text = "Toggle",
    key = "toggleKey",    -- Config key for saving
    default = "F1",          -- Default key binding
    tooltip = "Click to set a key binding for toggling the bot",
})

The Hotkey element creates a button that captures keyboard input to define key bindings. Users can click the button to start binding mode, then press any key combination (including modifier keys like Shift, Alt, and Ctrl).

-- Load saved hotkey from config
local binding = Aurora.Config:Read("myAbilityHotkey")

-- Register it with the KeyBindingSystem
if binding and binding ~= "" then
    Aurora.KeyBindingSystem:RegisterWoWHotkey(binding, function(isPressed)
        if isPressed then
            print("My ability activated!")
            -- Your ability code here
        end
    end)
end

Text

gui:Text({
    text = "This is informational text",
    size = 14,               -- Optional font size (default: 12)
    color = "header",        -- Optional: "normal", "header", or {r = 1, g = 0, b = 0, a = 1}
    width = 300,             -- Optional width (default: 300)
    height = 20,             -- Optional height (default: 20)
    inherit = "GameFontNormalLarge" -- Optional font inheritance
})

The Text widget displays static text.

Color Options

The Text widget supports multiple color formats:

• Predefined: "normal", "header" (uses Aurora color themes)
• Custom RGBA: {r = 1, g = 0, b = 0, a = 1} (values from 0 to 1)

-- Using predefined colors
gui:Text({
    text = "Header styled text",
    color = "header"
})

-- Using custom colors
gui:Text({
    text = "Custom red text",
    color = {r = 1, g = 0, b = 0, a = 1}
})