",
Height = 420,
RefreshTime = 3,
MaxMessageLength = 240,
SendCooldown = 2,
ReportCooldown = 30,
Rules = "Be respectful. Do not share private information.",
})
```
The service endpoint is built into XLQP, so Global Chat needs no endpoint configuration. Never place private credentials in a Roblox client script.
## Discord card [#discord-card]
```luau
Section:AddDiscordImg({
Name = "Join the community",
Content = "Updates, support, and previews.",
Invite = "your-invite-code",
OpenMode = "browser",
RememberOpenMode = true,
})
```
## XLQP Gen1 AI [#xlqp-gen1-ai]
```luau
local Assistant = Section:AddXLQPGen1AI({
Name = "Assistant",
Height = 420,
CompanionEnabled = true,
CompanionName = "XLQP",
ChatPromptsOnly = true,
ThemeToolsEnabled = true,
WorldToolsEnabled = false,
})
Assistant:Show()
```
Available behavior options include bubble responses, follow distance, following, walking speed, player animations, theme tools, world tools, and `UltraAI`.
## Studio tool [#studio-tool]
```luau
Section:AddStudioTool({
Name = "Part builder",
Content = "Configure and create a part.",
PartType = "Block",
PartSize = Vector3.new(4, 1, 4),
Color = Color3.fromRGB(139, 92, 246),
Anchored = true,
CanCollide = true,
Grid = 1,
ParentPath = "workspace",
Callback = function(settings)
print(settings)
end,
})
```
## Soccer [#soccer]
```luau
local Scores = Section:AddSoccer({
Name = "Live matches",
League = "Premier League",
Height = 360,
AutoRefresh = true,
RefreshTime = 60,
ShowLogos = true,
})
Scores:Refresh()
```
The controller can change league/date, toggle automatic refresh, return matches/source, and destroy the element.
## Dependency boxes [#dependency-boxes]
Use `AddDependencyBox` or `CreateDependencyBox` to show content only when another control matches a condition.
```luau
Section:AddDependencyBox({
Name = "Advanced settings",
Dependency = Toggle,
Equals = true,
Invert = false,
})
```
Dependency controllers can refresh, replace dependencies, change the condition, set visibility, and destroy the box.
---
# Content elements
> Present text, status, guides, badges, notices, timelines, cards, and structured content.
Source: /docs/elements/content
# Content elements [#content-elements]
Content elements explain state without requiring input. Use them for onboarding, warnings, summaries, status, and grouped information.
## Labels and paragraphs [#labels-and-paragraphs]
```luau
local Label = Section:AddLabel({
Text = "Session ready",
Icon = "circle-check",
DoesWrap = true,
})
Label:SetText("Connected")
Label:SetColor(Color3.fromRGB(52, 211, 153))
```
```luau
Section:AddParagraph({
Name = "Welcome",
Content = "Choose a tab to configure your experience.",
DoesWrap = true,
RichText = false,
})
```
Labels can also control `Visible`, `Font`, `TextSize`, alignment, `RichText`, images, and background transparency.
## Banner [#banner]
```luau
local Banner = Section:AddBanner({
Name = "New release",
Content = "XLQP Gen1 is ready.",
Icon = "sparkles",
Height = 130,
Actions = {
{
Name = "View changes",
Callback = function()
print("Open changelog")
end,
},
},
})
```
The controller can `SetImage`, `SetTitle`, `SetContent`, and `AddAction`.
## Status and notices [#status-and-notices]
```luau
local Status = Section:AddStatusBox({
Title = "Service",
Content = "All systems operational",
Variant = "success",
})
Status:SetStatus("warning")
Status:SetContent("Connection is unstable")
```
```luau
Section:AddStatusDot({
Name = "API",
Content = "Online",
Color = Color3.fromRGB(52, 211, 153),
})
```
```luau
Section:AddNotice({
Name = "Reminder",
Content = "Settings save automatically.",
Color = Color3.fromRGB(139, 92, 246),
})
```
## Cards and values [#cards-and-values]
| Method | Best for | Important options |
| ----------------- | ----------------------- | ------------------------------------------------- |
| `AddInfoCard` | Highlighted explanation | `Name`, `Content`, `Description`, `Icon`, `Color` |
| `AddStatCard` | Single metric | `Name`, `Value`, `Description` |
| `AddBadge` | Small state label | `Name`, `Text`, `Color` |
| `AddKeyValueList` | Property summary | `Name`, `Items` |
| `AddPillList` | Compact tags | `Name`, `Items`/`Tags`, `Height`, `Width` |
| `AddTagCloud` | Flexible tag collection | `Name`, `Tags`, `Height`, `TagWidth` |
```luau
Section:AddKeyValueList({
Name = "Session",
Items = {
{ Key = "Place", Value = game.PlaceId },
{ Key = "Players", Value = #game.Players:GetPlayers() },
},
})
```
## Timeline, changelog, and checklist [#timeline-changelog-and-checklist]
```luau
local Timeline = Section:AddTimeline({
Name = "Startup",
Items = {
{ Title = "Library loaded", Content = "XLQP initialized" },
{ Title = "Config restored", Content = "Saved values applied" },
},
})
Timeline:Add({ Title = "Ready", Content = "Interface mounted" })
```
`AddChangelog` accepts `Content`, `Logs`/`Items`, and `Height`. `AddChecklist` accepts `Items` and `Callback`. Their controllers can update their lists after creation.
## Notifications [#notifications]
```luau
local Notify = Section:AddNotify({
Name = "Saved",
Content = "Your configuration was updated.",
Pos = "TopRight",
Time = 4,
})
Notify:Fire()
```
Use `AddToastAction` for a notification with one action. `AddNotify` supports `Buttons`, icons/images, position, duration, and callbacks.
## Supporting layout [#supporting-layout]
| Method | Purpose |
| ------------------------ | ------------------------------ |
| `AddDivider` | Visual separator |
| `AddSpacer` / `AddSpace` | Fixed vertical space |
| `AddBoxSection` | Collapsible content group |
| `AddShortcutHint` | Keyboard shortcut explanation |
| `AddCopyBox` | Copyable text or identifier |
| `AddCode` | Display source/code content |
| `AddFilterList` | Search and run items |
| `CreateFAQ` | Expandable question collection |
| `CreateScrollHint` | Animated scroll guidance |
| `CreateCursorTag` | Label that follows the cursor |
```luau
Section:AddCopyBox({
Name = "Place ID",
Content = tostring(game.PlaceId),
})
Section:AddShortcutHint({
Name = "Toggle interface",
Key = "RightShift",
Content = "Show or hide XLQP",
})
```
---
# Data and charts
> Tables, charts, progress, live metrics, revenue cards, and structured data views.
Source: /docs/elements/data
# Data and charts [#data-and-charts]
XLQP includes elements for presenting tables, time-series data, progress, and live session metrics.
## Interface previews [#interface-previews]
## Data table [#data-table]
```luau
local PlayersTable = Section:AddDataTable({
Name = "Players",
Height = 280,
Searchable = true,
SearchPlaceholder = "Search players…",
Columns = {
{ Key = "name", Name = "Player" },
{ Key = "team", Name = "Team" },
{ Key = "distance", Name = "Distance" },
},
Rows = {
{ id = 1, name = "Alex", team = "Blue", distance = 24 },
{ id = 2, name = "Sam", team = "Red", distance = 51 },
},
Callback = function(row)
print("Selected:", row.name)
end,
})
```
```luau
PlayersTable:AddRow({ id = 3, name = "Taylor", team = "Blue", distance = 12 })
PlayersTable:UpdateRow(3, { distance = 9 })
PlayersTable:RemoveRow(2)
PlayersTable:SetFilter("Blue")
PlayersTable:SortBy("distance")
```
The controller also supports `SetRows`, `Clear`, and `GetSelected`.
## Charts [#charts]
```luau
local Chart = Section:CreateChart({
Name = "Frame rate",
Height = 220,
Points = { 60, 58, 61, 60 },
MaxPoints = 30,
Color = Color3.fromRGB(139, 92, 246),
Smooth = true,
Filled = true,
Suffix = " FPS",
})
Chart:Push(59)
```
```luau
local Chart = Section:CreateBarChart({
Name = "Players by team",
Points = {
{ Label = "Blue", Value = 12 },
{ Label = "Red", Value = 9 },
},
})
Chart:Push({ Label = "Green", Value = 5 })
```
```luau
local Chart = Section:CreateStackedChart({
Name = "Requests",
Series = { "Success", "Failed" },
Rows = {
{ Label = "10:00", Values = { 42, 3 } },
{ Label = "10:05", Values = { 51, 2 } },
},
})
```
Chart controllers can replay their animation; line and bar charts can also push new values.
## Progress [#progress]
```luau
local Progress = Section:AddProgressBar({
Name = "Initialization",
Description = "Preparing modules…",
Min = 0,
Max = 100,
Value = 30,
})
Progress:Set(75)
```
Factory alternatives include `CreateProgress`, `CreateProgressBar`, and `CreateDownloadProgress`. Download progress provides `Download`, `Pause`, `Resume`, and `Cancel`.
## Runtime monitoring [#runtime-monitoring]
```luau
local Monitor = Section:AddRuntimeMonitor({
Name = "Runtime",
Interval = 1,
AutoStart = true,
Metrics = {
{ Key = "fps", Name = "FPS" },
{ Key = "memory", Name = "Memory" },
},
})
Monitor:SetMetric("fps", 60)
Monitor:Refresh()
```
Use `Start` and `Stop` to control polling.
## Revenue and statistics [#revenue-and-statistics]
```luau
local Revenue = Section:AddRevenueCard({
Name = "Session earnings",
Value = 1200,
Prefix = "$",
Change = 8.4,
Color = Color3.fromRGB(52, 211, 153),
Duration = 0.6,
})
Revenue:Add(250)
Revenue:SetChange(12.5)
```
`AddRevenueCard` also supports suffixes, decimals, icons, mini-stats, and chart binding. Use `CreateStat` or `AddStatCard` for smaller values.
## Other data views [#other-data-views]
| Method | Purpose | Main options |
| --------------------- | --------------------------- | --------------------------------------------------- |
| `AddTableContents` | Structured rows and columns | `Columns`, `Rows`, `Height`, `Description` |
| `AddMeterGroup` | Multiple named meters | `Items`, `Color` |
| `AddPlayerCount` | Live player count | `Name`, `Description` |
| `AddClock` | Live formatted time | `Name`, `Description`, `Format` |
| `AddPlayerVisualizer` | Player/world visualization | `Player`, `Height`, `Boxes`, `LiveColor`, callbacks |
| `AddKeybindList` | Active bind display | `Title`, `Width`, `Height`, `Detached`, `Pin` |
Keep data refresh work lightweight and update only the controller whose value changed.
---
# Input elements
> Buttons, toggles, sliders, dropdowns, binds, text fields, color pickers, and other controls.
Source: /docs/elements/inputs
# Input elements [#input-elements]
Input elements collect user choices and call your `Callback`. Add them to a section, tab-box tab, panel group, or any compatible XLQP container.
## Interface previews [#interface-previews]
## Toggle [#toggle]
```luau
local Toggle = Section:AddToggle({
Name = "Auto collect",
Default = false,
Callback = function(value)
print("Auto collect:", value)
end,
})
```
```luau
local Toggle = Section:AddToggle({
Name = "Auto collect",
Description = "Saves between sessions.",
Default = false,
Flag = "auto_collect",
Save = true,
Color = Color3.fromRGB(139, 92, 246),
Callback = function(value)
print(value)
end,
})
```
```luau
local Toggle = Section:AddSmoothToggle({
Name = "Live accent",
Description = "Uses an animated accent color.",
Default = true,
LiveColor = true,
LiveColorSpeed = 1,
Callback = function(value)
print(value)
end,
})
```
`AddToggle` supports `Name`, `Description`/`Content`, `Default`, `Flag`, `Save`, `Color`, `Locked`, `Checkbox`, `Binded`, `DefaultBind`, `Settings`, icons, and `Callback`. Its controller can `Set`, `SetName`, `SetBind`, and open settings. It can also attach action rows, dropdowns, mini-buttons, or sliders.
## Button [#button]
```luau
local Button = Section:AddButton({
Name = "Run action",
Icon = "play",
Callback = function()
print("Action started")
end,
})
Button:Press()
Button:SetLocked(false)
```
Use `AddCooldownButton` when an action must wait before it can be triggered again.
```luau
local Cooldown = Section:AddCooldownButton({
Name = "Redeem reward",
Description = "Available every 30 seconds.",
ButtonText = "Redeem",
CooldownText = "Wait…",
Duration = 30,
Callback = function()
print("Redeemed")
end,
})
```
Its controller provides `Start`, `Cancel`, `SetDuration`, `IsCoolingDown`, and `Trigger`.
## Slider [#slider]
```luau
local Speed = Section:AddSlider({
Name = "Walk speed",
Description = "Choose a value from 16 to 100.",
Min = 16,
Max = 100,
Default = 16,
Increment = 1,
ValueName = " studs/s",
Smooth = true,
Flag = "walk_speed",
Save = true,
Callback = function(value)
print(value)
end,
})
Speed:Set(32)
```
Optional formatting hooks include `FormatValue`, `ParseValue`, and `DisplayFormattedInput`. Use `Color` and `Color2` for the track gradient.
## Dropdown [#dropdown]
```luau
local Mode = Section:AddDropdown({
Name = "Target mode",
Options = { "Closest", "Lowest health", "Random" },
Default = "Closest",
Search = true,
MultiSelect = false,
Flag = "target_mode",
Save = true,
Callback = function(value)
print("Selected:", value)
end,
})
```
Useful options include `Options`, `Default`, `MultiSelect`, `Search`, `Players`, `Whitelist`, `Advanced`, `Fill`, `FillColor`, `Outline`, `OutlineColor`, `Locked`, `Flag`, and `Save`.
```luau
Mode:SelectAll()
Mode:Invert()
Mode:Clear()
Mode:Refresh({ "Closest", "Farthest" })
```
## Textbox and text area [#textbox-and-text-area]
```luau
Section:AddTextbox({
Name = "Display name",
Placeholder = "Type a name…",
Default = "Player",
Flag = "display_name",
Save = true,
Callback = function(text)
print(text)
end,
})
```
```luau
local Notes = Section:AddTextArea({
Name = "Notes",
Placeholder = "Write something…",
Default = "",
Height = 140,
Callback = function(text)
print(text)
end,
})
print(Notes:Get())
```
```luau
Section:AddCommandBar({
Name = "Command",
Placeholder = "Enter a command…",
ButtonText = "Run",
Callback = function(text)
print("Running:", text)
end,
})
```
## Bind [#bind]
```luau
local Bind = Section:AddBind({
Name = "Open menu",
Default = Enum.KeyCode.RightShift,
Hold = false,
Flag = "menu_bind",
Save = true,
Callback = function(active)
print(active)
end,
})
Bind:Set(Enum.KeyCode.F4)
```
## Color picker [#color-picker]
```luau
local Accent = Section:AddColorpicker({
Name = "Accent color",
Default = Color3.fromRGB(139, 92, 246),
Transparency = 0,
Live = true,
Flag = "accent_color",
Save = true,
Callback = function(color, transparency)
print(color, transparency)
end,
})
Accent:Set(Color3.fromRGB(59, 130, 246))
Accent:SetTransparency(0.15)
```
## Compact controls [#compact-controls]
| Method | Purpose | Main options |
| -------------------- | ------------------------------ | ------------------------------------------------ |
| `AddStepper` | Increment/decrement a number | `Min`, `Max`, `Default`, `Increment`, `Callback` |
| `AddChecklist` | Toggle a list of items | `Items`, `Callback` |
| `AddQuickToggleRow` | Compact set of boolean options | `Options`, `Default`, `Callback` |
| `CreateCheckbox` | Standalone checkbox control | `CurrentValue`, `Flag`, `Save`, `Callback` |
| `AddActionRow` | Row of action buttons | `Buttons`, `Outline`, `OutlineColor` |
| `AddMiniButtons` | Small inline buttons | `Buttons` |
| `CreateFlipButton` | Two-sided action button | `Front`, `Back`, `Callback` |
| `CreateRippleButton` | Animated button | `Name`, `Description`, `Callback` |
See [Controllers](/docs/reference/controllers) for runtime update methods.
---
# Media and visuals
> Images, video, audio players, bytebeat, drawing grids, passthrough content, and 3D viewports.
Source: /docs/elements/media
# Media and visuals [#media-and-visuals]
Use XLQP media elements to place images, videos, audio, drawing surfaces, and 3D objects alongside normal controls.
## Interface previews [#interface-previews]
## Image and video [#image-and-video]
```luau
local Image = Section:AddImage({
Name = "Preview",
Image = "rbxassetid://0",
Height = 220,
Transparency = 0,
ScaleType = Enum.ScaleType.Crop,
})
Image:Set("rbxassetid://123456")
Image:SetHeight(260)
```
```luau
local Video = Section:AddVideo({
Name = "Trailer",
Video = "rbxassetid://0",
Height = 260,
Looped = true,
Volume = 0.5,
})
Video:Play()
Video:Pause()
```
## Media player [#media-player]
```luau
local Player = Section:CreateMediaPlayer({
Name = "Playlist",
Playlist = {
{ Name = "Track one", URL = "rbxassetid://0" },
{ Name = "Track two", URL = "rbxassetid://0" },
},
AutoPlay = false,
Loop = false,
Volume = 0.6,
Pitch = 1,
Visualizer = true,
VisualizerHeight = 80,
})
Player:PlayIndex(1)
Player:SetVolume(0.8)
Player:Next()
```
`AddMediaPlayer` exposes the same main options. Controllers support load/play/pause/stop, playlist changes, next/previous, volume, pitch, loop, autoplay, effects, visualizers, state access, and subscriptions.
## Disc player [#disc-player]
```luau
local Disc = Section:AddDiscPlayer({
Name = "Now playing",
Playlist = {
{ Name = "Track", URL = "rbxassetid://0" },
},
AutoPlay = false,
Loop = true,
Volume = 0.5,
SpinSpeed = 1,
})
Disc:Toggle()
```
## Bytebeat [#bytebeat]
```luau
local Beat = Section:CreateBytebeat({
Name = "Bytebeat",
Default = "t*(t>>5|t>>8)",
Hz = 8000,
Seconds = 12,
Pitch = 1,
Speed = 1,
Mode = "Bytebeat",
Visualizer = true,
VisualizerHeight = 90,
})
Beat:Generate()
Beat:SetHz(11025)
Beat:Stop()
```
`AddBytebeat` also supports presets, playlists, maximum duration/frequency, and visualizer bar settings.
## Drawing grid [#drawing-grid]
```luau
local Canvas = Section:AddDrawingGrid({
Name = "Canvas",
Rows = 16,
Columns = 16,
Height = 320,
BrushSize = 1,
Color = Color3.fromRGB(139, 92, 246),
Callback = function(data)
print("Canvas changed", data)
end,
})
Canvas:SetTool("paint")
Canvas:SetColor(Color3.fromRGB(255, 255, 255))
Canvas:Clear()
```
The controller can change grid/cell dimensions, replace boxes, and return drawing data with `GetData`.
## 3D viewport [#3d-viewport]
```luau
local Viewport = Section:AddViewport({
Name = "Character preview",
Object = game.Players.LocalPlayer.Character,
Height = 320,
Clone = true,
AutoFocus = true,
Interactive = true,
})
Viewport:Focus()
Viewport:SetInteractive(false)
```
## Passthrough content [#passthrough-content]
Use `AddPassthrough` or `AddUIPassthrough` to mount an existing Roblox UI instance inside a compatible container.
```luau
Section:AddPassthrough({
Name = "Custom widget",
Instance = ExistingFrame,
Height = 180,
})
```
Clone or transfer ownership deliberately: after mounting, your code and XLQP may both hold references to the same instance.
---
# All elements
> Complete at-a-glance inventory of XLQP Gen1 Add and Create methods with their main options.
Source: /docs/reference/all-elements
# All elements [#all-elements]
This index covers the public element constructors found in XLQP Gen1. “Main options” highlights the fields most useful when discovering an element. Open [Element options](/docs/reference/element-options) for the exhaustive field list for every constructor.
## Input and action [#input-and-action]
| Method | Purpose | Main options |
| ------------------------------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| [`AddCustomSlider`](/docs/elements/controls-reference/add-custom-slider) | Compact numeric or named-stop slider | All AddSlider fields, `Preset`, `Parameters`, `Style`, `Plugin` |
| `AddButton` | Standard action | `Name`, `Icon`, `Locked`, `Callback` |
| `AddCooldownButton` | Rate-limited action | `Name`, `Description`, `ButtonText`, `CooldownText`, `Duration`, `Color`, `Callback` |
| `AddToggle` | Boolean control | `Name`, `Description`, `Default`, `Flag`, `Save`, `Color`, `Checkbox`, `Binded`, `DefaultBind`, `Settings`, `Locked`, `Callback` |
| `AddSmoothToggle` | Animated boolean control | `Name`, `Description`, `Default`, `Flag`, `Save`, `Color`, `LiveColor`, `LiveColorSpeed`, `Callback` |
| `AddSlider` | Numeric range | `Name`, `Description`, `Min`, `Max`, `Default`, `Increment`, `ValueName`, `Smooth`, `Flag`, `Save`, `Color`, `Color2`, `Callback` |
| `AddDropdown` | Single or multiple selection | `Name`, `Options`, `Default`, `MultiSelect`, `Search`, `Players`, `Whitelist`, `Advanced`, `Flag`, `Save`, `Callback` |
| `AddBind` | Key binding | `Name`, `Default`, `Hold`, `UIBind`, `Flag`, `Save`, `Callback` |
| `AddKeyPicker` | Key picker with menu visibility | `Name`, `Default`, `Hold`, `MenuVisible`, `UIBind`, `Flag`, `Save`, `Callback` |
| `AddTextbox` | Single-line text | `Name`, `Placeholder`, `Default`, `Flag`, `Save`, `Locked`, `Callback` |
| `AddTextArea` | Multi-line text | `Name`, `Content`, `Placeholder`, `Default`, `Description`, `Height`, `Callback` |
| `AddColorpicker` | Color and transparency | `Name`, `Default`, `Transparency`, `Alpha`, `Live`, `LiveDelay`, `ThemePicker`, `Flag`, `Save`, `Callback` |
| `AddStepper` | Increment/decrement value | `Name`, `Min`, `Max`, `Default`, `Increment`, `Callback` |
| `AddChecklist` | Selectable checklist | `Name`, `Items`, `Callback` |
| `AddQuickToggleRow` | Compact toggle set | `Name`, `Options`, `Default`, `Callback` |
| `AddCommandBar` | Text command action | `Name`, `Placeholder`, `Default`, `ButtonText`, `Callback` |
| `AddActionRow` | Horizontal actions | `Name`, `Buttons`, `Outline`, `OutlineColor` |
| `AddMiniButtons` | Small inline actions | `Name`, `Buttons` |
| `CreateCheckbox` | Checkbox factory | `Name`, `Description`, `CurrentValue`, `Flag`, `Save`, `Callback` |
| `CreateCopyButton` | Copy action | `Name`, `Description`, `Icon`, `Value`, `Callback` |
| `CreateFlipButton` | Two-sided button | `Front`, `Back`, `Callback` |
| `CreateRippleButton` | Animated button | `Name`, `Description`, `Callback` |
## Text, status, and layout [#text-status-and-layout]
| Method | Purpose | Main options |
| ------------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| [`AddSubTabs`](/docs/elements/navigation-reference/add-sub-tabs) | Nested tab manager | `Name`, `Height`, `Fill`, `Gap`, `ButtonHeight`, `Color`, `Callback` |
| [`AddSubTab`](/docs/elements/navigation-reference/add-sub-tab) | Automatic nested page | `Name`, `Icon`, `Width`, `TabAccent`, tab background fields |
| [`AddOptionGrid`](/docs/elements/navigation-reference/add-option-grid) | Selectable cards with embedded elements | `Options`, `Multi`, `Rows`, `Columns`, `CardWidth`, `CardHeight`, `Default`, `Save` |
| [`AddElementGrid`](/docs/elements/navigation-reference/add-element-grid) | Responsive grid of normal controls | `Elements`, `Columns`, `CellWidth`, `CellHeight`, `AutoHeight`, `MinHeight`, `MaxHeight` |
| `AddSection` | Element group | `Name`, `Title` |
| `AddBoxSection` | Collapsible group | `Name`, `Title`, `Content`, `Description`, `DefaultOpen` |
| `AddLabel` | Flexible text label | `Name`, `Text`, `Content`, `Icon`, `Image`, `RichText`, `DoesWrap`, `Font`, `TextSize`, alignment, `Visible` |
| `AddParagraph` | Heading and body copy | `Name`, `Content`, `DoesWrap`, `RichText`, `Color`, image/profile options |
| `AddLog` | Log line | `Text`, `Size`, `DoesWrap`, `RichText` |
| `AddCode` | Code/source display | `Name`/`Text`, `Content`, `Language`, `Description`, `src` |
| `AddBadge` | Small status badge | `Name`, `Text`, `Content`, `Color` |
| `AddInfoCard` | Highlighted content card | `Name`, `Content`, `Description`, `Icon`, `Image`, `Color` |
| `AddStatCard` | Compact metric | `Name`, `Value`, `Description` |
| `AddNotice` | Inline notice | `Name`, `Content`, `Text`, `Color` |
| `AddStatusDot` | Labeled state indicator | `Name`, `Content`, `Description`, `Color` |
| `AddStatusBox` | Detailed status message | `Name`, `Title`, `Content`, `Text`, `Variant`, `Status`, `Icon`, `Height` |
| `AddBanner` | Large feature callout | `Name`, `Title`, `Content`, `Description`, `Image`, `Icon`, `Height`, `Actions` |
| `AddCopyBox` | Copyable text | `Name`, `Content`, `Text`, `Callback` |
| `AddShortcutHint` | Keyboard hint | `Name`, `Content`, `Description`, `Key`, `Bind` |
| `AddKeyValueList` | Key/value summary | `Name`, `Items` |
| `AddTimeline` | Ordered events | `Name`, `Items`, `Logs`, `Color` |
| `AddChangelog` | Release list | `Name`, `Content`, `Items`, `Logs`, `Height` |
| `AddFilterList` | Filterable action list | `Name`, `Items`, `Placeholder`, `Height`, `Callback` |
| `AddTagCloud` | Flexible tags | `Name`, `Tags`, `Items`, `Height`, `TagWidth` |
| `AddPillList` | Compact pills | `Name`, `Items`, `Tags`, `Height`, `Width` |
| `AddToastAction` | Toast with an action | `Name`, `Content`, `Description`, `ButtonText`, `Time`, `Callback` |
| `AddNotify` | Notification trigger | `Name`, `Content`, `Description`, `Buttons`, `Pos`, `Time`, `Callback` |
| `AddDivider` | Visual divider | `Name` |
| `AddSpacer` / `AddSpace` | Fixed spacing | `Height`, `Size` |
| `CreateFAQ` | Expandable FAQ | `Name`, `Items`, `Exclusive`, `Callback` |
| `CreateScrollHint` | Scroll instruction | `Text`, `Icon`, `AutoStart`, `AutoScroll`, `ScrollAmount`, `Callback` |
| `CreateCursorTag` | Cursor-following label | `Text`, `Hint`, `Height`, `Callback` |
| `CreatePinnedList` | Pinned item collection | `Title`, `PinnedTitle`, `Items`, `Callback` |
| `AddDraggableLabel` | Floating draggable label | `Text`, `fps` |
## Data and monitoring [#data-and-monitoring]
| Method | Purpose | Main options |
| ------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `AddDataTable` | Searchable structured data | `Name`, `Columns`, `Rows`, `Height`, `RowHeight`, `Searchable`, `SearchPlaceholder`, `EmptyText`, `Callback` |
| `AddTableContents` | Rows and columns | `Name`, `Title`, `Description`, `Columns`, `Rows`, `Height`, `RowHeight` |
| `AddProgressBar` | Linear progress | `Name`, `Description`, `Min`, `Max`, `Value`, `Default`, `Color` |
| `AddRuntimeMonitor` | Live metric monitor | `Name`, `Metrics`, `Interval`, `AutoStart` |
| `AddMeterGroup` | Multiple meters | `Name`, `Items`, `Color` |
| `AddLoadoutGroup` | Selectable loadout and equip action | `Name`, `Items`, `Color`, `ButtonText`, `OnSelect`, `Callback` |
| `AddRevenueCard` | Animated revenue/stat card | `Name`, `Value`, `Prefix`, `Suffix`, `Decimals`, `Change`, `Trend`, `Color`, `MiniStats`, `Duration` |
| `AddPlayerCount` | Live player total | `Name`, `Description` |
| `AddClock` | Live time | `Name`, `Description`, `Format` |
| `AddPlayerVisualizer` | Player data visualization | `Name`, `Player`, `Height`, `Boxes`, `LiveColor`, `LiveColorSpeed`, callbacks |
| `AddKeybindList` | Active bindings | `Title`, `Icon`, `Width`, `Height`, `DockHeight`, `Detached`, `Pin`, `Popout` |
| `CreateChart` | Line/area chart | `Name`, `Points`, `MaxPoints`, `Height`, `Color`, `Smooth`, `Filled`, `Dots`, `Prefix`, `Suffix`, `Callback` |
| `CreateBarChart` | Bar chart | `Name`, `Points`, `Icon`, `Callback` |
| `CreateStackedChart` | Stacked series chart | `Name`, `Rows`, `Series`, `Prefix`, `Icon`, `Callback` |
| `CreateStat` | Animated statistic | `Name`, `Value`, `Delta`, `Duration`, `Icon`, `Callback` |
| `CreateProgress` | Progress factory | `Name`, `Description`, `CurrentValue`, `Min`, `Max`, `Suffix`, `Flag`, `Save`, `Callback` |
| `CreateProgressBar` | Progress bar factory | `Name`, `Description`, `CurrentValue`, `Min`, `Max`, `Suffix`, `ValueText`, `Callback` |
| `CreateDownloadProgress` | Download progress | `Name`, `Description`, `CurrentValue`, `Duration`, `Completed`, `Callback` |
## Media and visual tools [#media-and-visual-tools]
| Method | Purpose | Main options |
| ------------------------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `AddImage` | Roblox image | `Name`, `Image`/`Asset`, `Height`, `Transparency`, `Color`, `ScaleType` |
| `AddVideo` | Roblox video | `Name`, `Video`/`Asset`, `Height`, `Looped`, `Volume` |
| `AddMediaPlayer` | Audio playlist | `Name`, `Default`, `Playlist`, `AutoPlay`, `Loop`, `Pitch`, visualizer options, `Callback` |
| `CreateMediaPlayer` | Media player factory | `Name`, `Default`, `Playlist`, `Preset`, `AutoPlay`, `Loop`, `Volume`, `Pitch`, visualizer options, `Callback` |
| `AddDiscPlayer` | Disc-style audio player | `Name`, `Playlist`, `AutoPlay`, `Loop`, `Volume`, `Position`, `SpinSpeed` |
| `AddBytebeat` | Bytebeat generator | `Name`, `Default`, `Mode`, `Hz`, `Seconds`, `Pitch`, `Speed`, presets/playlists, visualizer options |
| `CreateBytebeat` | Bytebeat factory | `Name`, `Default`, `Mode`, `Hz`, `Seconds`, `Pitch`, `Speed`, `Playlist`, visualizer options, `Callback` |
| `AddDrawingGrid` | Pixel/cell drawing surface | `Name`, `Rows`, `Columns`, `Height`, `BrushSize`, `Color`, cell/box dimensions, `Callback` |
| `AddViewport` | 3D object preview | `Name`, `Object`/`Model`/`Instance`, `Height`, `Clone`, `AutoFocus`, `Interactive`, `Camera`, `Visible` |
| `AddPassthrough` / `AddUIPassthrough` | Mount an existing UI instance | `Name`, `Instance`, `Height` |
## Navigation and containers [#navigation-and-containers]
| Method | Purpose | Main options |
| ------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------------- |
| `MakeTab` | Main window tab | `Name`, `Icon` |
| `AddTopTab` / `MakeTopTab` / `CreateTopTab` | Alternate top tab | `Name`, `Icon` and tab-specific options |
| `AddSideTab` / `AddTab` / `CreateTab` | Tab creation aliases | `Name`, `Icon` and tab-specific options |
| `newmaketabtop` | Legacy alternate top tab | project-specific tab options |
| `AddLeftGroupbox` | Left-column group | title, icon |
| `AddRightGroupbox` | Right-column group | title, icon |
| `AddTabbox` | Nested tab container | `Name`, `TabSize`, `IconOnly` |
| `AddLeftTabbox` | Left-aligned tab container | `Name`, `TabSize` |
| `AddRightTabbox` | Right-aligned tab container | `Name`, `TabSize` |
| `AddLeftSidebarMenu` | Left side menu | `Name`, `Icon`, dimensions, `Resizable`, `Detached`, `DimBackground`, `CloseOnOutside` |
| `AddRightSidebarMenu` | Right side menu | `Name`, `Icon`, dimensions, `Resizable`, `Detached`, `DimBackground`, `CloseOnOutside` |
| `AddDropdownPanel` | Expandable panel | `Name`, `Title`, `Open` |
| `CreatePopup` | Modal prompt | `Title`, `Description`, `Options` |
## Advanced and integrations [#advanced-and-integrations]
| Method | Purpose | Main options |
| --------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| `AddDependencyBox` | Conditional content | `Name`, `Dependencies`, `Dependency`, `Equals`, `Value`, `Operator`, `Invert`, `Predicate` |
| `CreateDependencyBox` | Dependency factory | `Name`, `Dependency`, `Value` |
| `AddDebugConsole` | Typed and capturable runtime console | `Name`, `Height`, `MaxLines`, `TextSize`, `AutoScroll`, `CaptureOutput`, `Default`, `Callback` |
| `AddGameSession` | Server/session tools | `Name`, `Height`, `Games`, `SupportedGameIds`, `IdType`, history, auto-execute, source/queue URLs, lifecycle callbacks |
| `AddPlugins` | Plugin manager | `Name`, `Folder`, `AutoLoad`, `AllowInline`, `AllowRemote`, `RemotePlugins`, `URLs` |
| `AddExecutor` | Luau editor/executor surface | `Name`, `Default`, `Height`, text sizes |
| `AddScriptHub` | Browsable script catalog | `Name`, `Description`, `Icon`, `SortBy`, `Order`, `MaxResults`, `Strict`, `Collapsed`, cache folder |
| `AddGlobalChat` | Networked chat | `Name`, API URL, bot/app IDs, `Height`, limits, cooldowns, rules, disclaimer |
| `AddDiscordImg` | Discord invitation card | `Name`, `Content`, `Invite`, `InviteCode`, `OpenMode`, `RememberOpenMode` |
| `AddXLQPGen1AI` | Assistant interface | `Name`, `Height`, companion settings, prompt mode, follow settings, theme/world tools, `UltraAI` |
| `AddStudioTool` | Roblox object builder | `Name`, `Content`, `PartType`, `PartSize`, `Color`, `Anchored`, `CanCollide`, `Grid`, mesh/texture IDs, parent/target paths, `Callback` |
| `AddSoccer` | Match/scores viewer | `Name`, `League`, `Leagues`, `LeagueOrder`, `Height`, `AutoRefresh`, `RefreshTime`, `ShowLogos`, `Callback` |
| `AddFriends` | Friends display | `Name` |
| `AddNametags` | Nametag preview/settings | `Name`, `Content`, `PreviewName`, `Default`, `Health`, `ShowHealth`, `ShowDistance`, `ShowDecimal`, `Callback` |
## Library-level UI utilities [#library-level-ui-utilities]
These methods live on the library rather than a normal section. They create floating UI, shared overlays, notifications, or helper managers.
| Method | Purpose |
| ----------------------------------------------------------------- | ------------------------------------------------------------ |
| `AddDraggableButton` | Floating draggable action button |
| `AddDraggableMenu` | Floating draggable menu container |
| `AddDraggableLabel` / `AddLabelGui` | Floating draggable text label |
| `CreateAudioVisualizer` | Reusable audio visualizer mounted into a parent instance |
| `CreateConfigCloudExportCode` | Generates export code for a config-cloud item |
| `CreateControlPanel` / `CreateKeybindList` / `CreateKeybindPanel` | Detached keybind/control panel |
| `CreateGroupBox` | Creates the library theme group box on a compatible tab |
| `CreateLoading` / `MakeLoading` | Standalone loading view |
| `MakeNotification` | Global notification |
| `CreatePanel` / `MakePanel` | Detached configurable panel |
| `CreatePopup` / `MakePopup` | Global modal popup |
| `MakeToast` | Global toast notification |
| `CreatePluginFromSource` | Creates a plugin from trusted source code |
| `CreateThemeManager` | Theme manager mounted in a group box |
| `RegisterEditableContainer` | Registers a container for editable/moveable elements |
| `RegisterPopupGui` | Registers a popup GUI with XLQP lifecycle handling |
| `AddWidget` | Adds a floating widget card to the window dashboard |
| `AddDialog` | Creates a dialog with inputs, toggles, and footer buttons |
| `MakeAdminTab` | Creates a password-gated tab with optional remembered access |
| `CreatePrivateTab` / `CreatePrivateMiniTab` | Creates editable private navigation surfaces |
`RegisterEditableContainer` and `RegisterPopupGui` are low-level integration hooks. Normal projects usually receive their behavior automatically through higher-level constructors.
## Compatibility aliases [#compatibility-aliases]
XLQP keeps several alternate names for backwards compatibility. They call the canonical element listed on the right, so use the canonical name in new projects unless you are maintaining existing code.
| Alias | Canonical method |
| ----------------------------------------------------------------- | ----------------------------------- |
| `AddCheckbox`, `AddCheckBox`, `CreateCheckBox` | `CreateCheckbox` |
| `AddProgress`, `CreateProgressBar` | `CreateProgress` |
| `AddDownloadProgress`, `CreateDownload`, `AddDownload` | `CreateDownloadProgress` |
| `AddCopyButton`, `CreateCopy`, `AddCopy` | `CreateCopyButton` |
| `AddFlipButton`, `CreateFlip`, `AddFlip` | `CreateFlipButton` |
| `AddRippleButton`, `CreateRipple`, `AddRipple` | `CreateRippleButton` |
| `AddProgressBar`, `CreateReadOnlyProgress`, `AddReadOnlyProgress` | `CreateProgressBar` factory variant |
| `AddScrollHint`, `CreateScrollIndicator`, `AddScrollIndicator` | `CreateScrollHint` |
| `AddPinnedList` | `CreatePinnedList` |
| `AddCursorTag`, `CreateHoverTag`, `AddHoverTag` | `CreateCursorTag` |
| `CreateGameSession`, `AddSupportedGames`, `CreateSupportedGames` | `AddGameSession` |
| `AddScriptBlox`, `CreateScriptHub`, `CreateScriptBlox` | `AddScriptHub` |
| `CreateSection` | `AddSection` |
| `AddBoxsection` | `AddBoxSection` |
| `CreateLabel` | `AddLabel` |
| `CreateDependencyBox` | `AddDependencyBox` |
| `AddRevenue`, `AddSmoothNumber`, `AddNumberCard` | `AddRevenueCard` |
| `AddLineChart`, `AddChart`, `CreateLineChart`, `CreateAreaChart` | `CreateChart` |
| `AddStat`, `CreateNumber`, `AddNumber`, `CreateMetric` | `CreateStat` |
| `AddBarChart` | `CreateBarChart` |
| `AddStackedChart` | `CreateStackedChart` |
| `AddFAQ`, `CreateAccordion`, `AddAccordion` | `CreateFAQ` |
| `AddStatus`, `AddStatusTextbox`, `AddStatusTextBox` | `AddStatusBox` |
| `AddKeybindPanel`, `AddControlPanel` | `AddKeybindList` |
| `CreateDataTable` | `AddDataTable` |
| `CreateCooldownButton` | `AddCooldownButton` |
| `CreateRuntimeMonitor` | `AddRuntimeMonitor` |
| `AddChangelogs` | `AddChangelog` |
| `AddDiscordImage`, `AddDiscord` | `AddDiscordImg` |
| `CreateBanner` | `AddBanner` |
| `CreatePlayerVisualizer`, `AddPlayerCard` | `AddPlayerVisualizer` |
| `CreateSmoothToggle` | `AddSmoothToggle` |
| `AddTextarea` | `AddTextArea` |
| `AddTable`, `CreateTable` | `AddTableContents` |
| `AddGlobalChatDM`, `AddChat` | `AddGlobalChat` |
| `AddStudioToolThing`, `AddRobloxStudioTool`, `AddStudioMeshTool` | `AddStudioTool` |
| `AddPluginManager`, `AddCommandPlugins` | `AddPlugins` |
| `AddExecuter`, `CreateExecutor` | `AddExecutor` |
| `AddInteractiveDropdown`, `AddElementDropdown` | `AddDropdownPanel` |
| `AddVinylPlayer`, `AddMusicDisc` | `AddDiscPlayer` |
| `CreateWindow` | `MakeWindow` |
| `KeyPicker` | `AddKeyPicker` |
| `CreateDebugConsole`, `AddConsole`, `CreateConsole` | `AddDebugConsole` |
| `AddLoadout`, `CreateLoadout` | `AddLoadoutGroup` |
| `AddAdminTab`, `CreateAdminTab` | `MakeAdminTab` |
| `AddTheme`, `CreateTheme`, `CreateCustomTheme` | `RegisterTheme` |
## Where to go next [#where-to-go-next]
* Read [Input elements](/docs/elements/inputs) for control examples.
* Read [Data and charts](/docs/elements/data) for live updates.
* Read [Controllers](/docs/reference/controllers) for runtime methods.
* Open [Examples](/docs/examples) for copy-ready compositions.
---
# Controllers
> Runtime methods returned by XLQP windows and elements.
Source: /docs/reference/controllers
# Controllers [#controllers]
Most constructors return a controller. Store it when you plan to change, refresh, open, close, play, or destroy that element later.
## Window and navigation [#window-and-navigation]
| Controller | Methods |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Window | `MakeTab`, `newmaketabtop`, `MakeAdminTab`, `AddDialog`, `CreatePrivateTab`, `AddPrivateGroupbox`, `CreatePrivateMiniTab`, `OpenPrivateTabEditor`, `SelectPrivateTab`, `AddWidget`, `GetWidget`, `RemoveWidget`, `OpenWidgets`, `CloseWidgets`, `ToggleWidgets`, `SetWidgetsEnabled`, `SetTabButtonsStyle`, `GetTabButtonsStyle`, `GetTabButtonsStyleParameters`, `CreatePopup`, `SetSidebarCollapsed`, `SetGifBackground`, `RemoveGifBackground`, `IsGifBackgroundSupported` |
| Widget | `SetTitle`, `SetImage`, `SetVisible`, `Toggle`, `SetPosition`, `SetSize`, `SetCornerRadius`, `AddElement`, `Clear`, `Destroy` |
| Dialog | `AddInput`, `AddTextbox`, `AddToggle`, `Dismiss` |
| Admin tab | Normal tab element methods plus `Lock` |
| Box section | `SetOpen`, `Toggle`, `SetTitle` |
| Sidebar menu | `Open`, `Close` |
| Dropdown panel | `SetOpen`, `Toggle`, `Set`, `AddGroupbox`, `AddTabbox`, `SetTitle`, `SetIcon`, `SetVisible`, `SetPinned`, `SetCollapsed`, `SetSize`, `Refresh`, `Destroy`, `SetDetached`, `TogglePopout`, `RefreshControls`, `Select` |
## Inputs [#inputs]
| Controller | Methods |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Button | `Set`, `Press`, `SetLocked` |
| Smooth toggle | `Set`, `Toggle`, `SetName`, `SetDescription`, `SetLiveColor` |
| Toggle | `Set`, `SetName`, `SetBind`, `SetSettingsOpen`, `AddActionRow`, `AddDropdown`, `AddMiniButtons`, `AddSlider`, `SendStatsToWebhook` |
| Slider | `Set`, `SetColor`, `GetColors` |
| Dropdown | `GetSelected`, `Set`, `Clear`, `SelectAll`, `Invert`, `Refresh`, `RefreshPlayers`, `UpdateAppearance` |
| Bind / key picker | `Set`, `SetMenuVisibility`, `GetMenuVisibility` |
| Text area | `Set`, `Get` |
| Textbox | `Set` where supported |
| Color picker | `Set`, `SetTransparency`, `Reset` |
| Stepper | `Set` |
| Cooldown button | `Start`, `Cancel`, `SetDuration`, `IsCoolingDown`, `Trigger` |
## Content [#content]
| Controller | Methods |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Label | `SetText`, `GetText`, `SetVisible`, `IsVisible`, `Show`, `Hide`, `SetRichText`, `SetFont`, `SetIcon`, `SetColor`, `Destroy` |
| Badge / stat card / notice / shortcut | `Set` |
| Progress bar | `Set`, `SetColor` |
| Key-value list | `Set`, `Clear`, `AddItem` |
| Divider / spacer | `Set` |
| Action row | `AddButton`, `SetTitle` |
| Checklist | `Add`, `Set`, `Refresh`, `SetTitle` |
| Timeline | `Add`, `Clear`, `Refresh`, `SetTitle` |
| Filter list | `Add`, `Clear`, `Refresh`, `SetItems`, `Run`, `SetTitle` |
| Notify | `Fire` |
| Tag cloud / pill list | `Add`, `Clear` |
| Status box | `SetStatus`, `SetTitle`, `SetText`, `SetContent`, `Set`, `Destroy` |
| Changelog | `Add`, `SetTitle` |
| Banner | `SetImage`, `SetTitle`, `SetContent`, `AddAction` |
## Data and charts [#data-and-charts]
| Controller | Methods |
| ----------------- | -------------------------------------------------------------------------------------------- |
| Data table | `SetRows`, `AddRow`, `UpdateRow`, `RemoveRow`, `Clear`, `SetFilter`, `SortBy`, `GetSelected` |
| Runtime monitor | `SetMetric`, `Refresh`, `Start`, `Stop` |
| Meter group | `Set`, `Add` |
| Loadout group | `AddItem`, `SetItems`, `SetSelected`, `GetSelected`, `SetTitle`, `SetButtonText`, `Equip` |
| Table contents | `SetRows`, `Set`, `AddRow`, `RemoveRow`, `Clear` |
| Revenue card | `Add`, `BindChart`, `Reset`, `SetChange`, `SetMiniStat` |
| Line/bar chart | `Push`, `Replay`; line chart also supports `Set` |
| Stacked chart | `Replay` |
| Stat | `Replay`, `Set` |
| Progress | `Increment`, `Replay` where supported |
| Download progress | `Download`, `Pause`, `Resume`, `Cancel` |
## Media [#media]
| Controller | Methods |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image | `Set`, `SetHeight` |
| Video | `Set`, `Play`, `Pause` |
| Drawing grid | `Clear`, `SetColor`, `SetTool`, `SetBoxes`, `SetGridSize`, `SetCellSize`, `GetData` |
| Viewport | `SetObject`, `SetHeight`, `Focus`, `SetInteractive`, `SetVisible`, `SetName` |
| Media player | `Load`, `Play`, `Pause`, `Stop`, `TogglePlay`, `PlayIndex`, `Next`, `Previous`, `SetURL`, `SetVolume`, `SetPitch`, `SetLoop`, `SetAutoPlay`, `SetEffect`, `SetVisualizer`, `AddToPlaylist`, `ClearPlaylist`, `GetState`, `GetPlaylist`, `Subscribe` |
| Bytebeat | `Generate`, `Stop`, `Set`, `Get`, `SetHz`, `GetHz`, `SetDuration`, `GetDuration`, `ApplyPreset`, `SelectPreset`, `AddPreset`, `SetVisualizer`, `SetMediaPreset` |
## Advanced [#advanced]
| Controller | Methods |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Game session | `Refresh`, `Join`, `Rejoin`, `ServerHop`, `Leave`, `SetGames`, `SetAutoExecute`, `IsAutoExecuteEnabled`, `QueueAutoExecute` |
| Dependency box | `Refresh`, `SetDependencies`, `SetDependency`, `SetCondition`, `SetVisible`, `IsVisible`, `Destroy` |
| Plugins | `Scan`, `GetNames`, `Find`, `Read`, `SaveCode`, `AddCode`, `InstallURL`, `ExecuteSource`, `Load`, `RunCode`, `RunCommand`, `Unload`, `Delete`, `Refresh` |
| Soccer | `SetLeague`, `SetDate`, `Refresh`, `SetAutoRefresh`, `GetMatches`, `GetSource`, `Destroy` |
| XLQP Gen1 AI / AI textbox | `Send`, `GetLastResponse`, `GetTools`, `CallTool`, `SetPermissionMode`, `SetEffort`, `SetMultiline`, `SetAgentPlanner`, `GetCurrentTask`, `AskQuestion`; mounted AddXLQPGen1AI also adds `Show` and `Hide` |
| Executor | `SetScript` |
| Debug console | `Log`, `Info`, `Warn`, `Error`, `Success`, `Code`, `Clear`, `GetText`, `Copy`, `SetHeight`, `SetCapture` |
## New grid, tab, and slider controllers [#new-grid-tab-and-slider-controllers]
| Controller | Methods |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Subtabs | `AddTab`, `Select`, `GetSelected`, `SetHeight`, `SetFill`, `Refresh` |
| Option grid | `AddOption`, `RemoveOption`, `UpdateOption`, `Clear`, `Set`, `Get`, `GetSelected`, `SetMulti`, `SetRows`, `SetCardSize`, `SetSpacing`, `SetColumns`, `SetCustom`, `Resize`, `SetIcon`, `SetSettingsIcon`, `SetSettingsOpen`, `ToggleSettings`, `AddElement` |
| Element grid | `AddElement`, `Remove`, `Clear`, `SetRows`, `SetColumns`, `SetCellSize`, `SetSpacing`, `SetAutoHeight`, `Resize`, `SetCustom` |
| Named slider / custom slider | `SetParameter`, `GetParameter`, `GetParameters`, `SetDotsVisible`, `SetColor`, `GetColors`, `UsePlugin`, `ApplyStyle` |
See [Current API additions](/docs/reference/october-update), [AI agent](/docs/ai-agent), and the linked element guides for signatures.
## Parameter discovery [#parameter-discovery]
Every registered `Add*` controller exposes `.Parameters`, `.ParameterInfo`, and `GetParameters()`. Registered styled surfaces may also expose `SetStyle(newStyle)`. At the library level, use `GetElementParameters`, `GetAllElementParameters`, `GetElementParameterNames`, `FormatElementParameters`, and `GetNewAPIParameters`.
## Safe update pattern [#safe-update-pattern]
```luau
local Status = Section:AddStatusBox({
Title = "Task",
Content = "Waiting",
Variant = "neutral",
})
local function setTaskState(state, message)
if not Status then
return
end
Status:SetStatus(state)
Status:SetContent(message)
end
```
Avoid updating a controller after its element or parent window has been destroyed.
---
# Element options
> Exhaustive constructor option reference for XLQP Gen1 elements and factory methods.
Source: /docs/reference/element-options
# Element options [#element-options]
This page lists the accepted configuration fields for every canonical XLQP Gen1 element constructor. All fields are optional unless your use case requires them. Field names are case-sensitive; compatibility aliases may exist, but the names below match the current UI source and full example.
Find the method, choose only the fields you need, and pass them in one table. Use the [full example](/docs/examples) to see the fields combined in a real script.
```luau
local Control = Section:AddToggle({
Name = "Enabled",
Default = false,
Flag = "enabled",
Save = true,
Callback = function(value)
print(value)
end,
})
```
## Input and action [#input-and-action]
| Method | Accepted configuration fields |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddButton` | `Callback`, `Icon`, `Image`, `Locked`, `Moveable`, `Name`, `Premium` |
| `AddSmoothToggle` | `Callback`, `Color`, `Content`, `Default`, `Description`, `Flag`, `LiveColor`, `LiveColorSpeed`, `LiveColorTheme`, `LiveColors`, `Name`, `Save` |
| `AddToggle` | `Binded`, `Callback`, `Checkbox`, `Color`, `ConfigCloud`, `ConfigCloudAutoSend`, `ConfigCloudKey`, `Content`, `Default`, `DefaultBind`, `Description`, `Flag`, `Icon`, `IconSize`, `Locked`, `Moveable`, `Name`, `Premium`, `Save`, `Settings` |
| `AddSlider` | `Callback`, `Color`, `Color2`, `Content`, `Default`, `Description`, `DisplayFormattedInput`, `Flag`, `FormatValue`, `Increment`, `Input`, `Locked`, `Max`, `Min`, `Moveable`, `Name`, `ParseValue`, `Premium`, `Save`, `Smooth`, `TextBox`, `ValueName` |
| `AddDropdown` | `Advanced`, `AdvancedDrop`, `Callback`, `Default`, `Fill`, `FillColor`, `FillTransparency`, `Flag`, `Image`, `Locked`, `MaxElements`, `Moveable`, `MultiSelect`, `Name`, `Options`, `Outline`, `OutlineColor`, `Players`, `Premium`, `PVP`, `Save`, `Search`, `Whitelist` |
| `AddBind` | `Callback`, `Default`, `Flag`, `Hold`, `Image`, `Locked`, `Name`, `Save`, `UIBind` |
| `AddKeyPicker` | `Callback`, `Default`, `Flag`, `Hold`, `Image`, `Locked`, `MenuVisible`, `Name`, `Save`, `UIBind` |
| `AddTextbox` | `Ai`, `Callback`, `Default`, `Flag`, `Gui`, `Locked`, `Moveable`, `Name`, `Placeholder`, `Save` |
| `AddTextArea` | `Callback`, `Content`, `Default`, `Description`, `Height`, `Moveable`, `Name`, `Placeholder` |
| `AddColorpicker` | `Alpha`, `Callback`, `Default`, `Flag`, `Image`, `Live`, `LiveDelay`, `Locked`, `Name`, `Save`, `ThemePicker`, `Transparency` |
| `AddCooldownButton` | `ActionText`, `ButtonText`, `Callback`, `Color`, `Cooldown`, `CooldownText`, `Desc`, `Description`, `Duration`, `Name` |
| `AddStepper` | `Callback`, `Default`, `Increment`, `Max`, `Min`, `Name` |
| `AddChecklist` | `Callback`, `Items`, `Name` |
| `AddQuickToggleRow` | `Callback`, `Default`, `Items`, `Name`, `Options` |
| `AddCommandBar` | `ButtonText`, `Callback`, `Default`, `Name`, `Placeholder` |
| `AddActionRow` | `Buttons`, `Moveable`, `Name`, `Outline`, `OutlineColor` |
| `AddMiniButtons` | `Buttons`, `Name` |
## Text, status, and layout [#text-status-and-layout]
| Method | Accepted configuration fields |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddSection` | `Name`, `Title` |
| `AddBoxSection` | `Content`, `DefaultOpen`, `Description`, `Name`, `Title` |
| `AddLabel` | `BackgroundTransparency`, `Content`, `DoesWrap`, `Font`, `Icon`, `Image`, `IsRich`, `Name`, `RichText`, `Size`, `Text`, `TextSize`, `TextXAlignment`, `TextYAlignment`, `Visible`, `Wrap` |
| `AddParagraph` | `Color`, `Content`, `DoesWrap`, `DontAskAgain`, `ImageSize`, `Locked`, `Name`, `Premium`, `RichText`, `UserProfile`, `discordpar`, `image`, `opena` |
| `AddCode` | `Content`, `Description`, `Language`, `Name`, `response`, `src` |
| `AddDependencyBox` | `BackgroundTransparency`, `Dependencies`, `Dependency`, `Element`, `Equals`, `Invert`, `Mode`, `Name`, `Operator`, `Predicate`, `Value` |
| `AddLog` | `DoesWrap`, `IsRich`, `RichText`, `Size`, `Text` |
| `AddBadge` | `Color`, `Content`, `Name`, `Text` |
| `AddInfoCard` | `Color`, `Content`, `Description`, `Icon`, `Image`, `Name` |
| `AddStatCard` | `Desc`, `Description`, `Name`, `Value` |
| `AddNotice` | `Color`, `Content`, `Name`, `Text` |
| `AddStatusDot` | `Color`, `Content`, `Description`, `Name` |
| `AddStatusBox` | `Content`, `Description`, `Height`, `Icon`, `Kind`, `Message`, `Name`, `Status`, `Text`, `Title`, `Type`, `Variant` |
| `AddBanner` | `ActionCallback`, `Actions`, `BackgroundImage`, `Callback`, `Content`, `Description`, `Height`, `Icon`, `Image`, `ImageTransparency`, `Name`, `ShadeTransparency`, `Title` |
| `AddCopyBox` | `Callback`, `Content`, `Name`, `Text` |
| `AddShortcutHint` | `Bind`, `Content`, `Description`, `Key`, `Name` |
| `AddKeyValueList` | `Items`, `Name` |
| `AddTimeline` | `Color`, `Items`, `Logs`, `Name` |
| `AddChangelog` | `Content`, `Height`, `Items`, `Logs`, `Name` |
| `AddFilterList` | `Callback`, `Height`, `Items`, `Name`, `Placeholder` |
| `AddTagCloud` | `Height`, `Items`, `Name`, `Tags`, `TagWidth` |
| `AddPillList` | `Height`, `Items`, `Name`, `Tags`, `Width` |
| `AddToastAction` | `ButtonText`, `Callback`, `Content`, `Description`, `Image`, `Name`, `Notification`, `NotifyText`, `Time` |
| `AddNotify` | `ButtonText`, `Buttons`, `Callback`, `Content`, `Description`, `Icon`, `Image`, `Name`, `NotifyContent`, `NotifyName`, `Pos`, `Seconds`, `Time` |
| `AddDivider` | `Name` |
| `AddSpacer / AddSpace` | `Height`, `Size` |
## Data and monitoring [#data-and-monitoring]
| Method | Accepted configuration fields |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddDataTable` | `Callback`, `Columns`, `EmptyText`, `Height`, `Name`, `RowHeight`, `Rows`, `SearchPlaceholder`, `Searchable` |
| `AddTableContents` | `Columns`, `ConfigCloud`, `ConfigCloudKey`, `Content`, `Description`, `Height`, `Name`, `RowHeight`, `Rows`, `Title` |
| `AddProgressBar` | `Color`, `Default`, `Desc`, `Description`, `Max`, `Min`, `Name`, `Value` |
| `AddRuntimeMonitor` | `AutoStart`, `Interval`, `Metrics`, `Name` |
| `AddMeterGroup` | `Color`, `Items`, `Name` |
| `AddLoadoutGroup` | `ButtonText`, `Callback`, `Color`, `EquipCallback`, `Font`, `Icons`, `Items`, `Name`, `OnEquip`, `OnSelect`, `Title` |
| `AddRevenueCard` | `Callback`, `Change`, `Color`, `Decimals`, `Duration`, `Icon`, `Image`, `Items`, `MiniStats`, `Name`, `Prefix`, `StartValue`, `Stats`, `Suffix`, `Trend`, `Value` |
| `AddPlayerCount` | `Description`, `Name` |
| `AddClock` | `Description`, `Format`, `Name` |
| `AddPlayerVisualizer` | `BoxCallback`, `Boxes`, `Callback`, `Height`, `LiveColor`, `LiveColorSpeed`, `Name`, `Player` |
| `AddKeybindList` | `Detached`, `DockHeight`, `Height`, `Icon`, `Pin`, `Popout`, `PopoutPosition`, `Title`, `Width` |
## Media and visual tools [#media-and-visual-tools]
| Method | Accepted configuration fields |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddImage` | `Asset`, `BackgroundTransparency`, `Color`, `Height`, `Image`, `Name`, `ScaleType`, `Transparency` |
| `AddVideo` | `Asset`, `Height`, `Looped`, `Name`, `Video`, `Volume` |
| `AddMediaPlayer` | `AutoPlay`, `Callback`, `Default`, `Loop`, `Name`, `NotifySupport`, `Pitch`, `Playlist`, `Visualizer`, `VisualizerBars`, `VisualizerHeight`, `Volume` |
| `AddDiscPlayer` | `AutoPlay`, `Loop`, `MediaPlayer`, `Name`, `Playlist`, `Position`, `SpinSpeed`, `Volume` |
| `AddBytebeat` | `Default`, `DefaultPreset`, `Duration`, `Hz`, `HzIncrement`, `MaxDuration`, `MaxHz`, `MaxSeconds`, `Mode`, `Name`, `Pitch`, `Playlist`, `Seconds`, `Speed`, `Visualizer`, `VisualizerBars`, `VisualizerHeight` |
| `AddDrawingGrid` | `BoxHeight`, `BoxWidth`, `Boxes`, `BrushSize`, `Callback`, `CellHeight`, `CellWidth`, `Color`, `Columns`, `Height`, `Name`, `Rows` |
| `AddViewport` | `AutoFocus`, `BackgroundTransparency`, `Camera`, `Clone`, `Height`, `Instance`, `Interactive`, `Model`, `Name`, `Object`, `Visible` |
| `AddPassthrough / AddUIPassthrough` | `Height`, `Instance`, `Name` |
## Navigation and containers [#navigation-and-containers]
| Method | Accepted configuration fields |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `MakeTab` | `AutoHome`, `Changelog`, `DiscordInvite`, `FeedbackWebhook`, `Group`, `GroupIcon`, `Icon`, `Name` |
| `newmaketabtop / AddTopTab` | `Effects`, `flames`, `MultiTab`, `Name` |
| `AddTabbox` | `IconOnly`, `Name`, `TabSize` |
| `AddLeftTabbox / AddRightTabbox` | `Name`, `TabSize` |
| `AddLeftGroupbox / AddRightGroupbox` | `title`, `icon` |
| `AddLeftSidebarMenu / AddRightSidebarMenu` | `CloseOnOutside`, `Detached`, `DimBackground`, `Gap`, `Height`, `Icon`, `MaxHeight`, `MaxWidth`, `MinHeight`, `MinWidth`, `Name`, `Resizable`, `Width` |
| `AddDropdownPanel` | `Name`, `Open`, `Title` |
## Advanced and integrations [#advanced-and-integrations]
| Method | Accepted configuration fields |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `AddDebugConsole` | `AutoScroll`, `Callback`, `CaptureOutput`, `CaptureRoblox`, `Default`, `Height`, `Lines`, `MaxLines`, `Messages`, `Name`, `OnLog`, `TextSize`, `Title` |
| `AddGameSession` | `AutoExecFile`, `AutoExecFolder`, `AutoExecName`, `AutoExecute`, `AutoExecuteFile`, `AutoExecuteSource`, `AutoExecuteUrl`, `AutoReExecute`, `GameIds`, `Games`, `Height`, `HistoryFile`, `HistoryLimit`, `IdType`, `Name`, `OnJoin`, `OnLeave`, `OnRejoin`, `OnServerHop`, `QueueSource`, `ReExecuteSource`, `ReExecuteUrl`, `SourceUrl`, `SupportedGameIds` |
| `AddScriptHub` | `Collapsed`, `Description`, `Icon`, `ImageCacheFolder`, `MaxResults`, `Name`, `Order`, `SortBy`, `Strict` |
| `AddGlobalChat` | `AppId`, `BotID`, `BotId`, `ConversationFile`, `DisclaimerFile`, `DisclaimerText`, `Height`, `Limit`, `MaxMessageLength`, `MessageLength`, `Name`, `NotifyPos`, `PVP`, `Pos`, `RefreshTime`, `ReportCooldown`, `Rules`, `SendCooldown`, `SystemId` |
| `AddDiscordImg` | `Content`, `DontAskAgain`, `Invite`, `InviteCode`, `Name`, `OpenMode`, `RememberOpenMode`, `discordpar` |
| `AddStudioTool` | `Anchored`, `ButtonColor`, `Callback`, `CanCollide`, `Color`, `Content`, `Default`, `Description`, `Grid`, `MeshId`, `Name`, `ParentPath`, `PartSize`, `PartType`, `Path`, `TargetPath`, `TextureId` |
| `AddSoccer` | `AutoRefresh`, `Callback`, `Height`, `League`, `LeagueOrder`, `Leagues`, `Moveable`, `Name`, `RefreshTime`, `ShowLogos` |
| `AddPlugins` | `AllowInline`, `AllowRemote`, `AutoLoad`, `Folder`, `Name`, `RemotePlugins`, `SaveInline`, `URLs` |
| `AddXLQPGen1AI` | `Ai`, `BubbleResponses`, `ChatPromptsOnly`, `CompanionEnabled`, `CompanionName`, `Default`, `FollowDistance`, `FollowEnabled`, `Gui`, `Height`, `LayoutOrder`, `Moveable`, `Name`, `ThemeToolsEnabled`, `UltraAI`, `UsePlayerAnimations`, `WalkSpeed`, `WorldToolsEnabled` |
| `AddExecutor` | `Default`, `Height`, `MetaTextSize`, `Name`, `TextSize`, `TitleTextSize` |
| `AddNametags` | `Callback`, `Content`, `Default`, `Health`, `Name`, `PreviewName`, `ShowDecimal`, `ShowDistance`, `ShowHealth` |
| `AddFriends` | `Name` |
## Factory methods [#factory-methods]
| Method | Accepted configuration fields |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `CreateCheckbox` | `Callback`, `CurrentValue`, `Description`, `Flag`, `Name`, `Save` |
| `CreateProgress` | `Callback`, `CurrentValue`, `Description`, `Flag`, `Icon`, `Max`, `Min`, `Name`, `Save`, `Suffix` |
| `CreateProgressBar` | `Callback`, `CurrentValue`, `Description`, `Max`, `Min`, `Name`, `Suffix`, `ValueText` |
| `CreateDownloadProgress` | `Callback`, `Completed`, `CurrentValue`, `Description`, `Duration`, `Name` |
| `CreateCopyButton` | `Callback`, `Description`, `Icon`, `Name`, `Value` |
| `CreateFlipButton` | `Back`, `Callback`, `Front` |
| `CreateRippleButton` | `Callback`, `Description`, `Name` |
| `CreateScrollHint` | `AutoScroll`, `AutoStart`, `Callback`, `Icon`, `ScrollAmount`, `Text` |
| `CreatePinnedList` | `Callback`, `Items`, `PinnedTitle`, `Title` |
| `CreateCursorTag` | `Callback`, `Height`, `Hint`, `Text` |
| `CreateChart` | `Callback`, `Color`, `Dots`, `Filled`, `Height`, `Icon`, `MaxPoints`, `Name`, `Points`, `Prefix`, `Smooth`, `Suffix` |
| `CreateBarChart` | `Callback`, `Icon`, `Name`, `Points` |
| `CreateStackedChart` | `Callback`, `Icon`, `Name`, `Prefix`, `Rows`, `Series` |
| `CreateStat` | `Callback`, `Delta`, `Duration`, `Icon`, `Name`, `Value` |
| `CreateFAQ` | `Callback`, `Exclusive`, `Items`, `Name` |
| `CreateMediaPlayer` | `AutoPlay`, `Callback`, `Default`, `Loop`, `Name`, `NotifySupport`, `Pitch`, `Playlist`, `Preset`, `Visualizer`, `VisualizerHeight`, `Volume` |
| `CreateBytebeat` | `Callback`, `Default`, `Hz`, `MaxSeconds`, `Mode`, `Name`, `Pitch`, `Playlist`, `Seconds`, `Speed`, `Visualizer`, `VisualizerHeight` |
| `CreatePopup` | `Description`, `Options`, `Title` |
## Shared conventions [#shared-conventions]
In addition to the constructor-specific fields above, registered elements can use `TextColor`, `Style`, and `LockedTo`. Supported interactive surfaces may also use `CursorGlow`, `CursorGlowColor`, `CursorGlowSize`, and `CursorGlowStrength`. See [New window and runtime APIs](/docs/reference/new-apis) for examples and parameter-introspection helpers.
| Field | Meaning |
| ------------------------- | ------------------------------------------------------- |
| `Name` | Visible title or identifier |
| `Description` / `Content` | Supporting copy |
| `Default` | Initial value |
| `Callback` | Function called after user interaction |
| `Flag` | Stable key used by configuration saving |
| `Save` | Saves a supported element when window config is enabled |
| `Locked` | Prevents interaction |
| `Moveable` | Allows movement when editable elements are enabled |
| `Premium` | Applies premium/locked presentation where supported |
| `Icon` / `Image` | Icon name, asset ID, or supported image value |
| `Height` / `Width` | Explicit dimensions |
| `Color` | Accent or content color |
See [All elements](/docs/reference/all-elements) for descriptions and compatibility aliases, and [Controllers](/docs/reference/controllers) for returned runtime methods.
## October 2026 additions [#october-2026-additions]
The following fields supplement the earlier constructor tables. See [Current API additions](/docs/reference/october-update), [AI agent](/docs/ai-agent), and [Key system](/docs/key-system) for examples, types, defaults, nested fields, and controllers.
| Constructor | New or expanded accepted fields |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddSubTabs` | `Name`, `Title`, `Height`, `Fill`, `Gap`, `ButtonHeight`, `Color`, `Accent`, `Callback` |
| `AddSubTab` / `SubTabs:AddTab` | `Name`, `Title`, `Icon`, `Image`, `Width`, `Selected`, `Default`, `TabAccent`, `Color`, `Accent`, `BackgroundColor`, `ButtonColor`, `BaseColor`, `BackgroundImage`, `TabImage`, `CardImage`, `ButtonImage`, `ImageColor`, `TabImageColor`, `BackgroundImageColor`, `ImageTransparency`, `TabImageTransparency`, `BackgroundImageTransparency`, `SelectedImageTransparency`, `ImageScaleType`, `ForceColumns`, `Columns`, `TwoColumn`; automatic-manager seed `Height` |
| `AddOptionGrid` | `Name`, `Title`, `Options`, `Default`, `Value`, `Multi`, `MultiSelect`, `Rows`, `Height`, `Width`, `Custom`, `CardWidth`, `CardHeight`, `Spacing`, `Columns`, `Icon`, `HeaderIcon`, `SettingsIcon`, `ShowHeaderIcon`, `ShowSettingsButton`, `ShowSettingsSummary`, `Flag`, `Save`, `Callback` |
| `AddElementGrid` / `AddWidgetGrid` | `Name`, `Title`, `Height`, `Width`, `Custom`, `Rows`, `Columns`, `CellWidth`, `CellHeight`, `Spacing`, `AutoHeight`, `MinHeight`, `MaxHeight`, `Elements` |
| `AddSlider` / `AddCustomSlider` | `Parameters`, `Points`, `Stops`, `Modes`, `ShowDots`, `ParameterArrow`, `ShowParameterDescription`, `DotSize`, `ActiveDotSize`, `KnobWidth`, `KnobHeight`, `Preset`, `StylePreset`, `AllowSmall`, `AllowMini`, `Style`, `CustomStyle`, `Plugin`, `CustomPlugin`, `SliderPlugin`, `FormatParameter` |
| AI `AddTextbox` / `AddXLQPGen1AI` | `Height`, `PermissionMode`, `Effort`, `AgentPlanner`, `WorkspaceTools`, `ShowContextDetails`, `MultilineInput`, `PromptTransform`, `OnResponse` |
| `AddBytebeat` | `Looped`, `Cache`, `FrameBudget`, `WriteBlock` |
The constructor implementations accept more aliases and nested values than the bundled parameter-example registry lists. When those differ, use the dedicated guide and the implementation, rather than treating registry example strings as guaranteed defaults.
---
# Library reference
> Understand constructors, configuration tables, callbacks, flags, and the XLQP object hierarchy.
Source: /docs/reference/library
# Library reference [#library-reference]
XLQP uses a small set of repeatable conventions. Once you understand constructors, configuration tables, and controllers, every element behaves predictably.
## Object hierarchy [#object-hierarchy]
| Object | Created with | Contains |
| ------- | --------------------------------- | --------------------------------------------- |
| Library | Loader result | Windows and shared library behavior |
| Window | `Library:MakeWindow(config)` | Tabs, navigation, popups, sidebar state |
| Tab | `Window:MakeTab(config)` | Sections, tab boxes, panels, elements |
| Section | `Tab:AddSection(config)` | Interactive and display elements |
| Element | `Section:AddToggle(config)`, etc. | State, visuals, callbacks, controller methods |
## Constructor pattern [#constructor-pattern]
```luau
local Controller = Container:AddElement({
Name = "Visible label",
Default = false,
Callback = function(value)
print(value)
end,
})
```
* The method name selects the element.
* The table configures initial appearance and behavior.
* `Callback` receives user interaction.
* The returned controller changes the element after creation.
## Shared options [#shared-options]
Options differ by element, but these names are used throughout the library.
| Option | Meaning |
| ------------------------- | ---------------------------------------------------------------------------- |
| `Name` | Visible title or identifier |
| `Description` / `Content` | Supporting text |
| `Default` | Initial value |
| `Callback` | Function called when the value or action changes |
| `Flag` | Stable configuration key |
| `Save` | Persists a supported control when window config is enabled |
| `Locked` | Prevents interaction |
| `Icon` / `Image` | Optional icon or Roblox asset |
| `Color` | Element accent |
| `Height` / `Width` | Explicit dimensions where supported |
| `Moveable` | Enables element movement where supported |
| `Premium` | Marks a restricted/premium element where supported |
| `TextColor` | Overrides element text with a named color, hex value, RGB table, or `Color3` |
| `Style` | Overrides the element surface, stroke, radius, height, and text styling |
| `LockedTo` | Limits element visibility to selected user IDs or names |
## Callbacks [#callbacks]
Use callbacks for user-driven behavior. Keep them short; call a separate function for heavier work.
```luau
local function updateSpeed(value)
local character = game.Players.LocalPlayer.Character
local humanoid = character and character:FindFirstChildOfClass("Humanoid")
if humanoid then
humanoid.WalkSpeed = value
end
end
Section:AddSlider({
Name = "Walk speed",
Min = 16,
Max = 100,
Default = 16,
Increment = 1,
Callback = updateSpeed,
})
```
## Flags and saving [#flags-and-saving]
```luau
local Window = Library:MakeWindow({
Branding = { Name = "My Hub" },
Config = {
Enabled = true,
Folder = "MyHub",
},
})
Section:AddToggle({
Name = "Notifications",
Default = true,
Flag = "notifications_enabled",
Save = true,
})
```
Choose unique, stable flags. Renaming a visible `Name` is safe; changing a saved `Flag` creates a new saved value.
## Controller pattern [#controller-pattern]
```luau
local Status = Section:AddStatusBox({
Title = "Connection",
Content = "Connecting…",
Variant = "warning",
})
task.spawn(function()
local connected = connectToService()
if connected then
Status:SetStatus("success")
Status:SetContent("Connected")
else
Status:SetStatus("error")
Status:SetContent("Could not connect")
end
end)
```
Controller methods are element-specific. See [Controllers](/docs/reference/controllers) for a compact list.
## Parameter discovery [#parameter-discovery]
For the new key-system helpers, AI agent methods, macros, music-title helpers, and `GetRuntimeHealth()`, see [Current API additions](/docs/reference/october-update), [Key system](/docs/key-system), and [AI agent](/docs/ai-agent).
The current source can describe every registered constructor at runtime.
```luau
local Names = Library:GetElementParameterNames()
local ToggleInfo = Library:GetElementParameters("AddToggle")
local AllInfo = Library:GetAllElementParameters()
print(Library:FormatElementParameters("AddToggle"))
local Toggle = Section:AddToggle({ Name = "Enabled" })
print(Toggle.Parameters)
print(Toggle:GetParameters())
```
See [New window and runtime APIs](/docs/reference/new-apis) for widgets, dialogs, private tabs, admin tabs, media center, and dynamic-island notifications.
## Defensive usage [#defensive-usage]
```luau
local ok, result = pcall(function()
return Library:MakeWindow({
Branding = { Name = "My Hub" },
})
end)
if not ok then
warn("XLQP could not initialize:", result)
return
end
local Window = result
```
Validate remote data before passing it to tables, plugins, chat, or executable code elements. Keep privileged network operations server-side whenever possible.
---
# New window and runtime APIs
> Widgets, dialogs, admin and private tabs, dynamic-island notifications, media center, tab styling, and parameter introspection.
Source: /docs/reference/new-apis
# New window and runtime APIs [#new-window-and-runtime-apis]
The latest XLQP source adds window-level systems that are not normal section elements. This page shows their public entry points and the values returned by each API.
For the October update, see [AI agent](/docs/ai-agent), [Key system](/docs/key-system), and [Current API additions](/docs/reference/october-update) for grids, subtabs, named slider parameters, macros, music-title helpers, and runtime health.
## Widgets [#widgets]
Enable the dashboard in `MakeWindow` with the `Widgets` group, then create cards from the returned window.
```luau
local Window = Library:MakeWindow({
Widgets = {
Enabled = true,
BetaButton = true,
StartOpen = false,
ButtonText = "Widgets",
Icon = "layout-dashboard",
Width = 1020,
Height = 560,
ScreenPadding = 32,
CornerRadius = 18,
DimBackground = false,
BackgroundTransparency = 1,
HideMainWindow = true,
CloseOnOutside = false,
},
})
local Recent = Window:AddWidget({
Name = "Recent scripts",
Icon = "history",
Position = UDim2.new(0, 300, 0, 0),
Size = UDim2.fromOffset(300, 220),
})
Recent:AddButton({ Name = "Run", Callback = function() print("run") end })
```
Window widget methods: `AddWidget`, `GetWidget`, `RemoveWidget`, `ClearWidgets`, `OpenWidgets`, `CloseWidgets`, `ToggleWidgets`, `SetWidgetsEnabled`, `IsWidgetsOpen`, and `IsWidgetsEnabled`.
Widget controllers support `SetTitle`, `SetImage`, `SetVisible`, `Toggle`, `SetPosition`, `SetSize`, `SetCornerRadius`, `AddElement`, `Clear`, and `Destroy`. A widget can also forward normal `Add*` element methods.
## Tab button styling [#tab-button-styling]
```luau
Window:SetTabButtonsStyle({
Gap = 4,
Padding = 8,
CornerRadius = 6,
Indicator = true,
IndicatorWidth = 2,
IndicatorHeight = 20,
})
local CurrentStyle = Window:GetTabButtonsStyle()
local StyleFields = Window:GetTabButtonsStyleParameters()
```
The same table may be supplied as top-level `TabButtonsStyle` in `MakeWindow`.
## Admin tabs [#admin-tabs]
```luau
local Admin = Window:MakeAdminTab({
Name = "Admin",
Icon = "shield",
Password = "change-this-password",
PromptTitle = "Admin access",
PromptDescription = "Enter the password to continue.",
Remember = true,
RememberText = "Remember this admin tab",
RememberKey = "MyHubAdmin",
})
Admin:AddButton({ Name = "Lock now", Callback = function() Admin:Lock(false) end })
```
Aliases: `AddAdminTab` and `CreateAdminTab`. `Lock(true)` also forgets the remembered login.
## Dialogs and inputs [#dialogs-and-inputs]
```luau
local NameInput
local Dialog = Window:AddDialog("ProfileDialog", {
Title = "Edit profile",
Description = "Choose the name shown in this session.",
OutsideClickDismiss = false,
AutoDismiss = false,
FooterButtons = {
Cancel = { Title = "Cancel", Variant = "Ghost", Order = 1 },
Apply = {
Title = "Apply",
Variant = "Primary",
Order = 2,
Callback = function(currentDialog)
print(NameInput.Text)
currentDialog:Dismiss()
end,
},
},
})
NameInput = Dialog:AddInput("Name", {
Text = "Display name",
Default = "Player",
Placeholder = "Type a name",
})
Dialog:AddToggle("Remember", { Text = "Remember this value", Default = true })
```
Dialog controllers expose `Dismiss`, `AddInput` (`AddTextbox` alias), and `AddToggle`.
## Dynamic island and media center [#dynamic-island-and-media-center]
```luau
Library:SetDynamicIslandNotificationsEnabled(true)
Library:ShowDynamicIslandNotification({
Title = "Connected",
Content = "XLQP is ready",
Time = 4,
})
Library:OpenMediaCenter()
Library:ToggleMediaCenter()
```
Use `GetDynamicIslandNotificationsEnabled()` to read the saved notification setting, `PreviewDynamicIsland()` to display a preview, and `ShowDynamicIsland()` / `HideDynamicIsland()` for now-playing content.
## Private tabs [#private-tabs]
Enable the editor with the `PrivateTabs` `MakeWindow` group. It accepts `Enabled`, `Password`, `TopName`, `TopIcon`, `EditorName`, `EditorIcon`, `EditorTitle`, `EditorSubtitle`, `EditorWidth`, `EditorHeight`, and `DefaultName`.
```luau
local Private = Window:CreatePrivateTab({
Name = "Private Controls",
Kind = "Side Tab",
Icon = "lock-keyhole",
Group = "Private",
})
local Left = Window:AddPrivateGroupbox({
Tab = Private,
Name = "Private Features",
Side = "Left",
Ratio = 56,
Icon = "shield-check",
})
Left:AddToggle({ Name = "Private Toggle", Default = true })
Window:SelectPrivateTab("Private Controls")
Window:OpenPrivateTabEditor("Side Tab")
```
`CreatePrivateMiniTab` adds an editable mini-tab rail inside a private tab.
## Parameter introspection [#parameter-introspection]
```luau
local Names = Library:GetElementParameterNames()
local ToggleInfo = Library:GetElementParameters("AddToggle")
local AllInfo = Library:GetAllElementParameters()
local Text = Library:FormatElementParameters("AddToggle")
local NewAPI = Library:GetNewAPIParameters()
local Toggle = Section:AddToggle({ Name = "Enabled" })
print(Toggle.Parameters)
print(Toggle:GetParameters())
```
Every returned `Add*` controller receives `.Parameters`, `.ParameterInfo`, and `:GetParameters()` when parameter information is registered.
## Shared element properties [#shared-element-properties]
Every registered element can use the shared access and appearance properties below in addition to its constructor-specific fields.
| Property | Purpose |
| --------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `TextColor` | Named color, hex, RGB table, or `Color3` text override. |
| `Style` | Per-element surface, stroke, radius, height, title, and description styling. |
| `LockedTo` | User IDs or names allowed to see the element. |
| `CursorGlow` | Enables the optional pointer glow where supported. |
| `CursorGlowColor`, `CursorGlowSize`, `CursorGlowStrength` | Customizes that glow. |
Stored element controllers expose `SetStyle(newStyle)` when the shared style wrapper is active.
## Next steps [#next-steps]
* See [Window configuration](/docs/window) for every startup group.
* See [Element options](/docs/reference/element-options) for constructor fields.
* Use the [Full example](/docs/examples) to see these systems combined.
---
# October API additions
> Current slider parameters, AI agent fields, new grid and subtab aliases, bytebeat options, macro controls, and runtime health APIs.
Source: /docs/reference/october-update
# October API additions [#october-api-additions]
This page records the API changes verified against the October 17, 2026 source. The bundled parameter registry contains example values; those strings are not guaranteed constructor defaults. The guides below describe defaults read from the implementation.
## New elements [#new-elements]
| Constructor | Purpose | Documentation |
| ----------------- | ---------------------------------------- | ------------------------------------------------------------------------------- |
| `AddSubTabs` | Nested tab manager. | [Options and controllers](/docs/elements/navigation-reference/add-sub-tabs) |
| `AddSubTab` | Automatic shared nested-tab manager. | [Options and controllers](/docs/elements/navigation-reference/add-sub-tab) |
| `AddOptionGrid` | Selectable cards with embedded elements. | [Options and controllers](/docs/elements/navigation-reference/add-option-grid) |
| `AddElementGrid` | Responsive columns of ordinary elements. | [Options and controllers](/docs/elements/navigation-reference/add-element-grid) |
| `AddCustomSlider` | Compact preset wrapper around AddSlider. | [Custom sliders](/docs/elements/controls-reference/add-custom-slider) |
## Named slider stops [#named-slider-stops]
`AddSlider` now accepts `Parameters`, with `Points`, `Stops`, and `Modes` as alternatives. Each item may be a scalar or a table. Tables accept `Name` / `Label` / `Text` / `Title`, `Value` / `Id` / `Key`, `Description` / `Desc` / `Content`, `Color` / `Accent`, `Color2` / `Accent2`, and `Icon`.
```luau
local Mode = Section:AddSlider({
Name = "Effort",
Parameters = {
{Name = "Instant", Value = "Instant", Description = "Quick answers"},
{Name = "Balanced", Value = "Balanced", Description = "Normal planning"},
{Name = "Deep", Value = "Deep", Description = "More context"},
},
Default = "Balanced",
Preset = "Compact",
ShowDots = true,
ParameterArrow = true,
ShowParameterDescription = true,
DotSize = 5,
ActiveDotSize = 8,
KnobWidth = 30,
KnobHeight = 26,
FormatParameter = function(value, index, parameter)
return parameter.Name
end,
Callback = function(value, parameter, index)
print(value, parameter.Name, index)
end,
})
Mode:SetParameter("Deep")
local selected, index = Mode:GetParameter()
print(selected.Name, index)
```
The selected parameter value is passed to `Callback(value, parameter, index)`. `GetParameter()` returns the normalized parameter and index; `GetParameters()` returns the normalized list. Other controller additions are `SetParameter(value, instant, silent)`, `SetDotsVisible`, `SetColor`, `GetColors`, `UsePlugin`, and `ApplyStyle`.
## Slider appearance and plugins [#slider-appearance-and-plugins]
| Fields | Behavior |
| -------------------------------------------------------- | -------------------------------------------------------- |
| `Preset` / `StylePreset` | Compact, Thin, and ChatGPT select compact styling. |
| `AllowSmall` / `AllowMini` | Permits sizes below the compact preset's normal minimum. |
| `Style` / `CustomStyle` | Slider-specific appearance table. |
| `Plugin` / `CustomPlugin` / `SliderPlugin` | Function or event-hook table. |
| `FormatParameter(value, index, parameter)` | Formats the visible named-stop value. |
| `ShowDots`, `ParameterArrow`, `ShowParameterDescription` | Each defaults to true. |
| `DotSize`, `ActiveDotSize` | Defaults 5 and 8; clamped to valid sizes. |
| `KnobWidth`, `KnobHeight` | Defaults 30 and 26; Style values take precedence. |
The Style table accepts layout and appearance values used by the slider, including `Height`, `TrackHeight`, `TrackX`, `TrackY`, `TrackRight`, `FullWidth`, `ValuePosition`, `TrackColor`, `TrackTransparency`, `FillColor`, `FillTransparency`, `ShowFill`, `UseParameterColors`, `KnobColor`, `ShowKnob`, `KnobWidth`, `KnobHeight`, `KnobStrokeColor`, `KnobStrokeThickness`, `ShowKnobStroke`, `ShowTrackStroke`, `ShowFrameStroke`, `FrameTransparency`, `TitleSize`, `TitleFont`, `TitleColor`, `ValueSize`, `ValueFont`, and `ValueColor`.
A plugin table can provide `Build`, `Changed`, `DragStart`, and `DragEnd`, or corresponding `On*` names. `Render` is also accepted for Changed. Hooks receive the slider context followed by event values. A function plugin receives `(context, event, ...)`.
```luau
Mode:UsePlugin({
Changed = function(context, value, parameter, index)
print("Selected", value, index)
end,
})
Mode:ApplyStyle({KnobWidth = 32, KnobHeight = 30})
```
## AI fields [#ai-fields]
`AddTextbox({Ai = true})`, `CreateTextbox({Ai = true})`, and `AddXLQPGen1AI` expose `PermissionMode`, `Effort`, `AgentPlanner`, `WorkspaceTools`, `ShowContextDetails`, `MultilineInput`, `PromptTransform`, and `OnResponse`, plus the new tool and task controllers. Read the complete [AI agent guide](/docs/ai-agent).
## Key-system replacement [#key-system-replacement]
The new gate adds local function validators, case-sensitivity controls, provider adapters, get-key menus, themes, notification styles, and new persistence behavior. Read the [Key system guide](/docs/key-system) before migrating old configurations; the old raw-key/hash precedence, signed-record path, and skip-button descriptions no longer apply.
## Bytebeat render settings [#bytebeat-render-settings]
`AddBytebeat` accepts `Looped`, `Cache`, `FrameBudget`, and `WriteBlock`. Presets may also supply their own renderer settings. The optimized renderer clamps frame budget to 0.001–0.02 seconds and write blocks to 256–32768 samples; its defaults are 0.004 and 4096. Looping defaults to enabled when not overridden.
```luau
local Bytebeat = Section:AddBytebeat({
Name = "Bytebeat",
Mode = "Bytebeat",
Default = "t*(t>>5|t>>8)",
Looped = true,
Cache = true,
FrameBudget = 0.004,
WriteBlock = 4096,
})
```
## Macro helpers [#macro-helpers]
| Method | Behavior |
| --------------------------- | ---------------------------------------------------------------------------- |
| `StartMacroRecording(name)` | Creates a recording with a name, start time, and action list. |
| `StopMacroRecording(save)` | Stops recording; stores it in the runtime macro map unless save is false. |
| `GetMacroNames()` | Returns names sorted case-insensitively. |
| `DeleteMacro(name)` | Removes a recording from the runtime map. |
| `PlayMacro(name)` | Replays actions asynchronously; returns false if missing or already playing. |
These helpers use in-memory recordings. Do not assume they persist across sessions unless a separate persistence layer supplies that behavior.
## Runtime health and music titles [#runtime-health-and-music-titles]
`Library:GetRuntimeHealth()` returns `Running`, `Destroyed`, `Connections`, `Popups`, `Schema`, and `StabilityMode`.
`Library:GetSmartMusicTitle(url, rawTitle)` returns a cached or locally cleaned title and a cache-hit boolean. `QueueSmartMusicTitle(url, rawTitle, callback)` queues title cleanup, combines pending callbacks, and uses the title cache. A cached title is returned immediately.
`Library:BindPress(button, callback)` connects a button's Activated event and registers the connection for cleanup.
## Compatibility names [#compatibility-names]
| Alias group | Canonical target |
| ------------------------------------------------------------------------------------- | --------------------------------------- |
| `CreateSubTabs`, `SubTabs` | `AddSubTabs` |
| `CreateSubTab`, `SubTab` | `AddSubTab` |
| `CreateOptionGrid`, `OptionGrid` | `AddOptionGrid` |
| `CreateElementGrid`, `ElementGrid`, `AddWidgetGrid`, `CreateWidgetGrid`, `WidgetGrid` | `AddElementGrid` |
| `CreateCustomSlider`, `CustomSlider` | `AddCustomSlider` |
| `CreateToggle`, `Toggle`, `AddSwitch`, `CreateSwitch` | `AddToggle` |
| `CreateTextbox`, `Textbox`, `AddInput`, `CreateInput` | `AddTextbox` |
| `CreateSlider`, `Slider` | `AddSlider` |
| `CreateDropdown`, `Dropdown` | `AddDropdown` |
| `CreateButton`, `Button` | `AddButton` |
| `CreateWindow`, `Window` | `MakeWindow` compatibility entry points |
Use table configurations in new code. Some older positional aliases accept a different calling shape.
---
# AddDebugConsole
> Adds a live, syntax-aware debug console with copy, clear, capture, and typed logging controls.
Source: /docs/elements/advanced-reference/add-debug-console
# `AddDebugConsole` [#adddebugconsole]
## What it does [#what-it-does]
Adds an embedded console that can display normal, info, warning, error, success, and highlighted code entries. It can also capture Roblox `LogService` output.
`ElementFunction:AddDebugConsole(ConsoleConfig)`
```luau
local Console = Logs:AddDebugConsole({
Name = "Debug Console",
})
Console:Info("Interface ready")
Console:Warn("High ping detected")
```
```luau
local Console = Logs:AddDebugConsole({
Name = "Debug Console",
Height = 250,
MaxLines = 500,
TextSize = 14,
AutoScroll = true,
CaptureOutput = true,
Default = {
{ Level = "Log", Text = "Console initialized" },
{ Level = "Info", Text = "Modules loaded" },
},
Callback = function(name, text, level, entry)
print(name, level, text, entry.Time)
end,
})
Console:Log("Normal output")
Console:Info("Information")
Console:Warn("Warning")
Console:Error("Error")
Console:Success("Success")
Console:Code("local ready = true")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | What it controls |
| --------------------------------- | ------------ | -------------------------------------------------- |
| `Name` / `Title` | `string` | Console heading. |
| `Height` | `number` | Output height, clamped from `120` to `620`. |
| `MaxLines` | `number` | Stored entries, clamped from `25` to `2500`. |
| `TextSize` | `number` | Monospace output size, clamped from `11` to `20`. |
| `AutoScroll` | `boolean` | Scrolls to the newest line unless set to `false`. |
| `CaptureOutput` / `CaptureRoblox` | `boolean` | Captures Roblox `LogService.MessageOut`. |
| `Default` / `Lines` / `Messages` | `table` | Initial strings or `{ Level, Text }` rows. |
| `Callback` / `OnLog` | `function` | Receives the console name, text, level, and entry. |
## Controller methods [#controller-methods]
| Method | Result |
| ------------------------------------------ | --------------------------------------------------------------- |
| `Log(message, level?)` | Appends a line; `level` defaults to `Log`. |
| `Info`, `Warn`, `Error`, `Success`, `Code` | Appends a typed line. |
| `Clear()` | Removes all entries. |
| `GetText()` | Returns the visible console as plain text. |
| `Copy()` | Copies all text when the runtime provides a clipboard function. |
| `SetHeight(value)` | Resizes the output. |
| `SetCapture(enabled)` | Enables or disables active Roblox output capture. |
Compatibility aliases: `CreateDebugConsole`, `AddConsole`, and `CreateConsole`.
## Related reference [#related-reference]
* [New window and runtime APIs](/docs/reference/new-apis)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDiscordImg
> Adds a Discord invite image or prompt with remembered open behavior.
Source: /docs/elements/advanced-reference/add-discord-img
# `AddDiscordImg` [#adddiscordimg]
## What it does [#what-it-does]
Adds a Discord invite image or prompt with remembered open behavior.
### When to use it [#when-to-use-it]
Use it to present a community invite in a visual card while controlling how the invite is opened.
`ElementFunction:AddDiscordImg(DiscordConfig)`
```luau
RightGroup:AddDiscordImg({
Name = "Verbal Discord",
Invite = "QEW8ap3MuV",
Content = "Join for updates, changelogs, and support.",
OpenMode = "Browser",
RememberOpenMode = true
})
```
```luau
RightGroup:AddDiscordImg({
Name = "Verbal Discord",
Invite = "QEW8ap3MuV",
Content = "Join for updates, changelogs, and support.",
OpenMode = "Browser",
RememberOpenMode = true,
DontAskAgain = true, -- optional
InviteCode = "https://example.com", -- optional
discordpar = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | --------------- | -------- | ------------------------------------------------------ |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DontAskAgain` | boolean | Yes | Turns dont ask again behavior on or off. |
| `Invite` | string | Yes | Sets the invite. |
| `InviteCode` | string | Yes | Sets the invite code. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OpenMode` | varies | Yes | Optional open mode setting accepted by this method. |
| `RememberOpenMode` | boolean | Yes | Turns remember open mode behavior on or off. |
| `discordpar` | varies | Yes | Optional discordpar setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddFriends
> Adds a friends interface backed by the local player context.
Source: /docs/elements/advanced-reference/add-friends
# `AddFriends` [#addfriends]
## What it does [#what-it-does]
Adds a friends interface backed by the local player context.
### When to use it [#when-to-use-it]
Use it when a page needs to display or work with the user’s Roblox friends.
`ElementFunction:AddFriends(FriendsConfig)`
```luau
RightGroup:AddFriends({
Name = "Server Friends"
})
```
```luau
RightGroup:AddFriends({
Name = "Server Friends"
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------ | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddGameSession
> Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution.
Source: /docs/elements/advanced-reference/add-game-session
# `AddGameSession` [#addgamesession]
## What it does [#what-it-does]
Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution.
### When to use it [#when-to-use-it]
Use it for multi-place hubs or tools that must preserve their loader across teleports and track recent sessions.
`ElementFunction:AddGameSession(SessionConfig)`
```luau
local _GameSession = Server:AddGameSession({
Name = "Game Session",
IdType = "Place",
AutoExecute = true,
SourceUrl = XLQPSourceUrl,
AutoExecFile = true,
SupportedGameIds = {
game.PlaceId,
},
HistoryLimit = 8,
Height = 480
})
```
```luau
local _GameSession = Server:AddGameSession({
Name = "Game Session",
IdType = "Place",
AutoExecute = true,
SourceUrl = XLQPSourceUrl,
AutoExecFile = true,
SupportedGameIds = {
game.PlaceId,
},
HistoryLimit = 8,
Height = 480,
AutoExecFolder = true, -- optional
AutoExecName = true, -- optional
AutoExecuteFile = true, -- optional
AutoExecuteSource = true, -- optional
AutoExecuteUrl = true, -- optional
AutoReExecute = true, -- optional
GameIds = {}, -- optional
Games = {}, -- optional
HistoryFile = "XLQP/Example", -- optional
OnJoin = function(value) -- optional
print("OnJoin:", value)
end,
OnLeave = function(value) -- optional
print("OnLeave:", value)
end,
OnRejoin = function(value) -- optional
print("OnRejoin:", value)
end,
OnServerHop = function(value) -- optional
print("OnServerHop:", value)
end,
QueueSource = nil, -- optional
ReExecuteSource = nil, -- optional
ReExecuteUrl = "https://example.com", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `AutoExecFile` | boolean | Yes | Turns auto exec file behavior on or off. |
| `AutoExecFolder` | boolean | Yes | Turns auto exec folder behavior on or off. |
| `AutoExecName` | boolean | Yes | Turns auto exec name behavior on or off. |
| `AutoExecute` | boolean | Yes | Turns auto execute behavior on or off. |
| `AutoExecuteFile` | boolean | Yes | Turns auto execute file behavior on or off. |
| `AutoExecuteSource` | boolean | Yes | Turns auto execute source behavior on or off. |
| `AutoExecuteUrl` | boolean | Yes | Turns auto execute url behavior on or off. |
| `AutoReExecute` | boolean | Yes | Turns auto re execute behavior on or off. |
| `GameIds` | table | Yes | Supplies the game ids collection. |
| `Games` | table | Yes | Supplies the games collection. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `HistoryFile` | string | Yes | Sets the history file. |
| `HistoryLimit` | number | Yes | Controls the history limit value. |
| `IdType` | varies | Yes | Optional id type setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OnJoin` | function | Yes | Runs for the on join event or decision. |
| `OnLeave` | function | Yes | Runs for the on leave event or decision. |
| `OnRejoin` | function | Yes | Runs for the on rejoin event or decision. |
| `OnServerHop` | function | Yes | Runs for the on server hop event or decision. |
| `QueueSource` | varies | Yes | Optional queue source setting accepted by this method. |
| `ReExecuteSource` | varies | Yes | Optional re execute source setting accepted by this method. |
| `ReExecuteUrl` | string | Yes | Sets the re execute url. |
| `SourceUrl` | string | Yes | Source URL used for approved loading or re-execution. |
| `SupportedGameIds` | table | Yes | Supplies the supported game ids collection. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddGlobalChat
> Adds a remote global-chat panel with rules, cooldowns, reporting, and conversation persistence.
Source: /docs/elements/advanced-reference/add-global-chat
# `AddGlobalChat` [#addglobalchat]
## What it does [#what-it-does]
Adds a remote global-chat panel with rules, cooldowns, reporting, and conversation persistence.
### When to use it [#when-to-use-it]
Use it when your experience needs XLQP's built-in global chat, direct messages, moderation rules, and local conversation history.
Global Chat uses the service endpoint built into XLQP. You do not need to provide or configure an endpoint.
`ElementFunction:AddGlobalChat(ChatConfig)`
```luau
AITab:AddGlobalChat({
Name = "Global Chat",
Height = 430,
RefreshTime = 2,
Limit = 50,
MaxMessageLength = 350,
BotId = "1351947660151750759",
Rules = "Follow the rules. Be respectful, no spam, no leaking personal info.",
DisclaimerFile = "VerbalHubExample/global_chat_disclaimer.json"
})
```
```luau
AITab:AddGlobalChat({
Name = "Global Chat",
Height = 430,
RefreshTime = 2,
Limit = 50,
MaxMessageLength = 350,
BotId = "1351947660151750759",
Rules = "Follow the rules. Be respectful, no spam, no leaking personal info.",
DisclaimerFile = "VerbalHubExample/global_chat_disclaimer.json",
AppId = "0", -- optional
BotID = "0", -- optional
ConversationFile = "XLQP/Example", -- optional
DisclaimerText = "Example text", -- optional
MessageLength = 1, -- optional
NotifyPos = "TopLeft", -- optional
PVP = false, -- optional
Pos = "TopLeft", -- optional
ReportCooldown = 1, -- optional
SendCooldown = 1, -- optional
SystemId = "0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------- |
| `AppId` | string | Yes | Sets the app id. |
| `BotID` | string | Yes | Sets the bot id. |
| `BotId` | string | Yes | Sets the bot id. |
| `ConversationFile` | string | Yes | Sets the conversation file. |
| `DisclaimerFile` | string | Yes | Sets the disclaimer file. |
| `DisclaimerText` | string | Yes | Sets the disclaimer text. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Limit` | number | Yes | Controls the limit value. |
| `MaxMessageLength` | number | Yes | Controls the max message length value. |
| `MessageLength` | number | Yes | Controls the message length value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `NotifyPos` | boolean | Yes | Turns notify pos behavior on or off. |
| `PVP` | boolean | Yes | Turns pvp behavior on or off. |
| `Pos` | varies | Yes | Optional pos setting accepted by this method. |
| `RefreshTime` | number | Yes | Delay between refresh operations. |
| `ReportCooldown` | number | Yes | Controls the report cooldown value. |
| `Rules` | table | Yes | Rules displayed or enforced by the feature. |
| `SendCooldown` | number | Yes | Controls the send cooldown value. |
| `SystemId` | string | Yes | Sets the system id. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddNametags
> Adds configurable player nametags with health and distance information.
Source: /docs/elements/advanced-reference/add-nametags
# `AddNametags` [#addnametags]
## What it does [#what-it-does]
Adds configurable player nametags with health and distance information.
### When to use it [#when-to-use-it]
Use it for player overlays or previews where identity and live status must be shown together.
`ElementFunction:AddNametags(TagConfig)`
```luau
Visuals:AddNametags({
Name = "Nametags",
Content = "Renders nametags on players through walls.",
Default = false,
ShowHealth = true,
ShowDistance = true,
ShowDecimal = false,
PreviewName = "CyberWolf",
Health = 11,
Callback = function(state)
print("nametags", state.Enabled, state.ShowHealth, state.ShowDistance, state.ShowDecimal)
end
})
```
```luau
Visuals:AddNametags({
Name = "Nametags",
Content = "Renders nametags on players through walls.",
Default = false,
ShowHealth = true,
ShowDistance = true,
ShowDecimal = false,
PreviewName = "CyberWolf",
Health = 11,
Callback = function(state)
print("nametags", state.Enabled, state.ShowHealth, state.ShowDistance, state.ShowDecimal)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Health` | boolean | Yes | Turns health behavior on or off. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `PreviewName` | string | Yes | Sets the preview name. |
| `ShowDecimal` | boolean | Yes | Turns show decimal behavior on or off. |
| `ShowDistance` | boolean | Yes | Turns show distance behavior on or off. |
| `ShowHealth` | boolean | Yes | Turns show health behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPlugins
> Adds a plugin manager for local, inline, prebuilt, or approved remote plugins.
Source: /docs/elements/advanced-reference/add-plugins
# `AddPlugins` [#addplugins]
## What it does [#what-it-does]
Adds a plugin manager for local, inline, prebuilt, or approved remote plugins.
### When to use it [#when-to-use-it]
Use it when your hub exposes optional modules and needs a user-facing way to load or manage them.
`ElementFunction:AddPlugins(PluginConfig)`
```luau
local Result = Section:AddPlugins({
Name = "Example",
})
```
```luau
local Result = Section:AddPlugins({
Name = "Example",
AllowInline = true, -- optional
AllowRemote = true, -- optional
AutoLoad = true, -- optional
Folder = "XLQP/Example", -- optional
RemotePlugins = {}, -- optional
SaveInline = true, -- optional
URLs = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------- | ------------ | -------- | ------------------------------------------------------ |
| `AllowInline` | boolean | Yes | Turns allow inline behavior on or off. |
| `AllowRemote` | boolean | Yes | Turns allow remote behavior on or off. |
| `AutoLoad` | boolean | Yes | Turns auto load behavior on or off. |
| `Folder` | string | Yes | Filesystem folder used for saved or discovered data. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RemotePlugins` | table | Yes | Supplies the remote plugins collection. |
| `SaveInline` | boolean | Yes | Turns save inline behavior on or off. |
| `URLs` | table | Yes | Approved remote source URLs considered by the feature. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddScriptHub
> Adds a searchable, sortable script catalog.
Source: /docs/elements/advanced-reference/add-script-hub
# `AddScriptHub` [#addscripthub]
## What it does [#what-it-does]
Adds a searchable, sortable script catalog.
### When to use it [#when-to-use-it]
Use it to present an approved set of scripts or tools with metadata and cached images.
`TabFunction:AddScriptHub(HubConfig)`
```luau
ScriptBloxTab:AddScriptHub({
Name = "ScriptBlox Hub",
Description = "Search, inspect, copy, and run ScriptBlox scripts.",
Icon = "rbxassetid://7733920644",
MaxResults = 8,
SortBy = "updatedAt",
Order = "desc",
Strict = true,
ImageCacheFolder = "VerbalHubExample/ScriptBloxImages",
Collapsed = false
})
```
```luau
ScriptBloxTab:AddScriptHub({
Name = "ScriptBlox Hub",
Description = "Search, inspect, copy, and run ScriptBlox scripts.",
Icon = "rbxassetid://7733920644",
MaxResults = 8,
SortBy = "updatedAt",
Order = "desc",
Strict = true,
ImageCacheFolder = "VerbalHubExample/ScriptBloxImages",
Collapsed = false
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------------- |
| `Collapsed` | boolean | Yes | Turns collapsed behavior on or off. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ImageCacheFolder` | string | Yes | Sets the image cache folder. |
| `MaxResults` | number | Yes | Controls the max results value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Order` | varies | Yes | Optional order setting accepted by this method. |
| `SortBy` | varies | Yes | Optional sort by setting accepted by this method. |
| `Strict` | boolean | Yes | Turns strict behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSoccer
> Adds a soccer data view with leagues, refresh controls, and optional logos.
Source: /docs/elements/advanced-reference/add-soccer
# `AddSoccer` [#addsoccer]
## What it does [#what-it-does]
Adds a soccer data view with leagues, refresh controls, and optional logos.
### When to use it [#when-to-use-it]
Use it for sports dashboards that need current league information in the XLQP interface.
`ElementFunction:AddSoccer(SoccerConfig)`
```luau
SoccerTab:AddSoccer({
Name = "Live Soccer",
Height = 440,
League = "FIFA World Cup",
AutoRefresh = false,
RefreshTime = 60,
ShowLogos = true,
Moveable = true,
Callback = function(data)
if type(data) == "table" and data.id then
print("soccer match", data.id, data.shortName or data.name)
elseif type(data) == "table" then
print("soccer matches", #data)
end
end
})
```
```luau
SoccerTab:AddSoccer({
Name = "Live Soccer",
Height = 440,
League = "FIFA World Cup",
AutoRefresh = false,
RefreshTime = 60,
ShowLogos = true,
Moveable = true,
Callback = function(data)
if type(data) == "table" and data.id then
print("soccer match", data.id, data.shortName or data.name)
elseif type(data) == "table" then
print("soccer matches", #data)
end
end,
LeagueOrder = 1, -- optional
Leagues = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | --------------------------------------------------------------------- |
| `AutoRefresh` | boolean | Yes | Turns auto refresh behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `League` | varies | Yes | Optional league setting accepted by this method. |
| `LeagueOrder` | number | Yes | Controls the league order value. |
| `Leagues` | table | Yes | Supplies the leagues collection. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RefreshTime` | number | Yes | Delay between refresh operations. |
| `ShowLogos` | boolean | Yes | Turns show logos behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStudioTool
> Adds a Roblox Studio-style object or mesh tool with part and placement settings.
Source: /docs/elements/advanced-reference/add-studio-tool
# `AddStudioTool` [#addstudiotool]
## What it does [#what-it-does]
Adds a Roblox Studio-style object or mesh tool with part and placement settings.
### When to use it [#when-to-use-it]
Use it for controlled creation or editing workflows that target Roblox instances.
`ElementFunction:AddStudioTool(ToolConfig)`
```luau
ToolsPage:AddStudioTool({
Name = "Studio Mesh Tool",
Content = "Spawn, select, move, and test parts with a small Studio-style panel.",
Default = false,
PartType = "Block",
Grid = 1,
PartSize = 4,
Anchored = true,
CanCollide = true,
ParentPath = "workspace",
MeshId = "",
TextureId = "",
Callback = function(part)
print("studio part", part and part.Name)
end
})
```
```luau
ToolsPage:AddStudioTool({
Name = "Studio Mesh Tool",
Content = "Spawn, select, move, and test parts with a small Studio-style panel.",
Default = false,
PartType = "Block",
Grid = 1,
PartSize = 4,
Anchored = true,
CanCollide = true,
ParentPath = "workspace",
MeshId = "",
TextureId = "",
Callback = function(part)
print("studio part", part and part.Name)
end,
ButtonColor = Color3.fromRGB(139, 92, 246), -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Description = "Example text", -- optional
Path = "XLQP/Example", -- optional
TargetPath = "XLQP/Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Anchored` | boolean | Yes | Turns anchored behavior on or off. |
| `ButtonColor` | Color3 | Yes | Sets the button color. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CanCollide` | boolean | Yes | Turns can collide behavior on or off. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Grid` | number | Yes | Controls the grid value. |
| `MeshId` | string or asset | Yes | Mesh asset used by the created part or preview. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ParentPath` | string | Yes | Sets the parent path. |
| `PartSize` | number | Yes | Controls the part size value. |
| `PartType` | varies | Yes | Optional part type setting accepted by this method. |
| `Path` | string | Yes | Sets the path. |
| `TargetPath` | string | Yes | Sets the target path. |
| `TextureId` | string or asset | Yes | Texture asset applied to the mesh or part. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddXLQPGen1AI
> Adds the XLQP AI interface and optional in-world companion behavior.
Source: /docs/elements/advanced-reference/add-xlqp-gen1-ai
# `AddXLQPGen1AI` [#addxlqpgen1ai]
## What it does [#what-it-does]
Adds the XLQP AI interface and optional in-world companion behavior.
### When to use it [#when-to-use-it]
Use it when your project has configured an AI backend and needs chat, theme, or world-tool integration.
`ElementFunction:AddXLQPGen1AI(AIConfig)`
```luau
local XLQPAI = AITab:AddXLQPGen1AI({
Name = "XLQP Gen1 AI",
Default = "",
Height = 500,
Gui = true,
Moveable = true,
UltraAI = true,
CompanionEnabled = true,
FollowEnabled = true,
UsePlayerAnimations = true,
BubbleResponses = true,
ChatPromptsOnly = false,
WorldToolsEnabled = true,
ThemeToolsEnabled = true,
FollowDistance = 7,
WalkSpeed = 15,
CompanionName = "UltraAI Companion"
})
```
```luau
local XLQPAI = AITab:AddXLQPGen1AI({
Name = "XLQP Gen1 AI",
Default = "",
Height = 500,
Gui = true,
Moveable = true,
UltraAI = true,
CompanionEnabled = true,
FollowEnabled = true,
UsePlayerAnimations = true,
BubbleResponses = true,
ChatPromptsOnly = false,
WorldToolsEnabled = true,
ThemeToolsEnabled = true,
FollowDistance = 7,
WalkSpeed = 15,
CompanionName = "UltraAI Companion",
Ai = true, -- optional
LayoutOrder = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------------- | ------------ | -------- | --------------------------------------------------------------------- |
| `Ai` | boolean | Yes | Turns ai behavior on or off. |
| `BubbleResponses` | boolean | Yes | Turns bubble responses behavior on or off. |
| `ChatPromptsOnly` | boolean | Yes | Turns chat prompts only behavior on or off. |
| `CompanionEnabled` | boolean | Yes | Turns companion enabled behavior on or off. |
| `CompanionName` | string | Yes | Sets the companion name. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `FollowDistance` | number | Yes | Controls the follow distance value. |
| `FollowEnabled` | boolean | Yes | Turns follow enabled behavior on or off. |
| `Gui` | boolean | Yes | Turns gui behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `LayoutOrder` | number | Yes | Controls the layout order value. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ThemeToolsEnabled` | boolean | Yes | Turns theme tools enabled behavior on or off. |
| `UltraAI` | boolean | Yes | Turns ultra ai behavior on or off. |
| `UsePlayerAnimations` | boolean | Yes | Turns use player animations behavior on or off. |
| `WalkSpeed` | number | Yes | Controls the walk speed value. |
| `WorldToolsEnabled` | boolean | Yes | Turns world tools enabled behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
### Current agent system [#current-agent-system]
This constructor now mounts the same agent as `AddTextbox({Ai = true})`. It accepts the new permission, effort, planner, context, and callback options documented in the [AI agent guide](/docs/ai-agent), and retains its optional companion preferences.
The normal mounted controller supports `Send`, `GetLastResponse`, `GetTools`, `CallTool`, `SetPermissionMode`, `SetEffort`, `SetMultiline`, `SetAgentPlanner`, `GetCurrentTask`, `AskQuestion`, `Show`, and `Hide`. If the main agent UI cannot mount, the constructor creates a simpler fallback; do not assume the fallback implements the full tool-controller API.
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateConfigCloudExportCode
> Creates an export code for the configured cloud-backed settings data.
Source: /docs/elements/advanced-reference/create-config-cloud-export-code
# `CreateConfigCloudExportCode` [#createconfigcloudexportcode]
## What it does [#what-it-does]
Creates an export code for the configured cloud-backed settings data.
### When to use it [#when-to-use-it]
Use it when users need to transfer or share a supported configuration through Config Cloud.
`XLQPGen1:CreateConfigCloudExportCode(item)`
```luau
local Player = game:GetService("Players").LocalPlayer
local Success, ExportCode, Config = Library:CreateConfigCloudExportCode(
{},
)
```
```luau
local Player = game:GetService("Players").LocalPlayer
local Success, ExportCode, Config = Library:CreateConfigCloudExportCode(
{},
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ------------------------------------------------ |
| `item` | table | No | Config Cloud item or value to encode for export. |
Exact signature:
```luau
XLQPGen1:CreateConfigCloudExportCode(item)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreatePluginFromSource
> Creates a plugin definition from supplied Luau source.
Source: /docs/elements/advanced-reference/create-plugin-from-source
# `CreatePluginFromSource` [#createpluginfromsource]
## What it does [#what-it-does]
Creates a plugin definition from supplied Luau source.
### When to use it [#when-to-use-it]
Use it only for source you trust and have reviewed; do not execute untrusted remote plugin code.
`XLQPGen1:CreatePluginFromSource(name,code,executeNow)`
```luau
local Result = Library:CreatePluginFromSource(
"Example",
[[return { Name = "Example Plugin" }]],
)
```
```luau
local Result = Library:CreatePluginFromSource(
"Example",
[[return { Name = "Example Plugin" }]],
false, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------ | ------------ | -------- | -------------------------------------------------- |
| `name` | string | No | Name assigned to the created or registered object. |
| `code` | string | No | Reviewed Luau source used to define the plugin. |
| `executeNow` | boolean | Yes | Runs the created plugin immediately when true. |
Exact signature:
```luau
XLQPGen1:CreatePluginFromSource(name,code,executeNow)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateThemeManager
> Creates a controller for discovering, applying, and managing XLQP themes.
Source: /docs/elements/advanced-reference/create-theme-manager
# `CreateThemeManager` [#createthememanager]
## What it does [#what-it-does]
Creates a controller for discovering, applying, and managing XLQP themes.
### When to use it [#when-to-use-it]
Use it when users should switch or maintain themes at runtime.
`XLQPGen1:CreateThemeManager(groupbox)`
```luau
local Result = Library:CreateThemeManager(
Groupbox,
)
```
```luau
local Result = Library:CreateThemeManager(
Groupbox,
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | -------------------------------------------------------- |
| `groupbox` | container | No | Existing group box that receives theme-manager controls. |
Exact signature:
```luau
XLQPGen1:CreateThemeManager(groupbox)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# RegisterTheme
> Registers a named theme definition for later selection.
Source: /docs/elements/advanced-reference/register-theme
# `RegisterTheme` [#registertheme]
## What it does [#what-it-does]
Registers a named theme definition for later selection.
### When to use it [#when-to-use-it]
Use it to add a reusable custom color and style preset before applying it.
`XLQPGen1:RegisterTheme(name,ThemeConfig,applyNow)`
```luau
Library:RegisterTheme(
"Example",
{},
)
```
```luau
Library:RegisterTheme(
"Example",
{},
false, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------- |
| `name` | string | No | Name assigned to the created or registered object. |
| `ThemeConfig` | table | No | Theme colors and style values to register. |
| `applyNow` | boolean | Yes | Applies the theme immediately after registration. |
Exact signature:
```luau
XLQPGen1:RegisterTheme(name,ThemeConfig,applyNow)
```
## Behavior and return value [#behavior-and-return-value]
Registration connects an existing object or definition to XLQP. Register it after the object exists and before relying on XLQP-managed behavior.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddAccordion
> This compatibility method behaves like CreateFAQ. Creates an accordion-style list of questions and answers. It is kept so scripts written with the older AddAccordion name continue to work.
Source: /docs/elements/compatibility-reference/add-accordion
# `AddAccordion` [#addaccordion]
`AddAccordion` is an alternate name for `CreateFAQ`. New code can use [CreateFAQ](/docs/elements/content-reference/create-faq).
## What it does [#what-it-does]
This compatibility method behaves like `CreateFAQ`. Creates an accordion-style list of questions and answers. It is kept so scripts written with the older `AddAccordion` name continue to work.
### When to use it [#when-to-use-it]
Use it for help content where only one or a few answers should be expanded at a time. Prefer `CreateFAQ` in new code so the method name matches the current API.
`ElementFunction:AddAccordion(FAQConfig)`
```luau
local Result = Section:AddAccordion({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddAccordion({
Name = "Example",
Callback = function(value)
print(value)
end,
Exclusive = true, -- optional
Items = { "Item 1", "Item 2" }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Exclusive` | boolean | Yes | Turns exclusive behavior on or off. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateFAQ`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddBarChart
> This compatibility method behaves like CreateBarChart. Creates a bar chart from labeled points. It is kept so scripts written with the older AddBarChart name continue to work.
Source: /docs/elements/compatibility-reference/add-bar-chart
# `AddBarChart` [#addbarchart]
`AddBarChart` is an alternate name for `CreateBarChart`. New code can use [CreateBarChart](/docs/elements/data-reference/create-bar-chart).
## What it does [#what-it-does]
This compatibility method behaves like `CreateBarChart`. Creates a bar chart from labeled points. It is kept so scripts written with the older `AddBarChart` name continue to work.
### When to use it [#when-to-use-it]
Use it to compare discrete categories or values side by side. Prefer `CreateBarChart` in new code so the method name matches the current API.
`ElementFunction:AddBarChart(BarConfig)`
```luau
local Result = Section:AddBarChart({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddBarChart({
Name = "Example",
Callback = function(value)
print(value)
end,
Icon = "home", -- optional
Points = { { Label = "A", Value = 25 }, { Label = "B", Value = 75 } }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateBarChart`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddChangelogs
> This compatibility method behaves like AddChangelog. Adds a structured list of releases, changes, or dated updates. It is kept so scripts written with the older AddChangelogs name continue to work.
Source: /docs/elements/compatibility-reference/add-changelogs
# `AddChangelogs` [#addchangelogs]
`AddChangelogs` is an alternate name for `AddChangelog`. New code can use [AddChangelog](/docs/elements/content-reference/add-changelog).
## What it does [#what-it-does]
This compatibility method behaves like `AddChangelog`. Adds a structured list of releases, changes, or dated updates. It is kept so scripts written with the older `AddChangelogs` name continue to work.
### When to use it [#when-to-use-it]
Use it to show version history inside the interface instead of maintaining a plain text paragraph. Prefer `AddChangelog` in new code so the method name matches the current API.
`ElementFunction:AddChangelogs(ChangeConfig)`
```luau
local Result = Section:AddChangelogs({
Name = "Example",
})
```
```luau
local Result = Section:AddChangelogs({
Name = "Example",
Content = "Example content", -- optional
Height = 240, -- optional
Items = { "Item 1", "Item 2" }, -- optional
Logs = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | --------------- | -------- | ------------------------------------------------------ |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Logs` | table | Yes | Supplies the logs collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddChangelog`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddChart
> This compatibility method behaves like CreateChart. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older AddChart name continue to work.
Source: /docs/elements/compatibility-reference/add-chart
# `AddChart` [#addchart]
`AddChart` is an alternate name for `CreateChart`. New code can use [CreateChart](/docs/elements/data-reference/create-chart).
## What it does [#what-it-does]
This compatibility method behaves like `CreateChart`. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older `AddChart` name continue to work.
### When to use it [#when-to-use-it]
Use it for trends, time series, or changing numeric values. Prefer `CreateChart` in new code so the method name matches the current API.
`ElementFunction:AddChart(ChartConfig)`
```luau
local Result = Section:AddChart({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddChart({
Name = "Example",
Callback = function(value)
print(value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Dots = true, -- optional
Filled = true, -- optional
Height = 240, -- optional
Icon = "home", -- optional
MaxPoints = 100, -- optional
Points = { { Label = "A", Value = 25 }, { Label = "B", Value = 75 } }, -- optional
Prefix = "Example", -- optional
Smooth = true, -- optional
Suffix = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Dots` | boolean | Yes | Turns dots behavior on or off. |
| `Filled` | boolean | Yes | Turns filled behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `MaxPoints` | number | Yes | Controls the max points value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Smooth` | boolean | Yes | Turns smooth behavior on or off. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateChart`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddChat
> This compatibility method behaves like AddGlobalChat. Adds a remote global-chat panel with rules, cooldowns, reporting, and conversation persistence. It is kept so scripts written with the older AddChat name continue to work.
Source: /docs/elements/compatibility-reference/add-chat
# `AddChat` [#addchat]
`AddChat` is an alternate name for `AddGlobalChat`. New code can use [AddGlobalChat](/docs/elements/advanced-reference/add-global-chat).
## What it does [#what-it-does]
This compatibility method behaves like `AddGlobalChat`. Adds a remote global-chat panel with rules, cooldowns, reporting, and conversation persistence. It is kept so scripts written with the older `AddChat` name continue to work.
### When to use it [#when-to-use-it]
Use it when maintaining a script that uses this older method name. The service endpoint is built into XLQP, so no authentication URL option is required. Prefer `AddGlobalChat` in new code so the method name matches the current API.
`ElementFunction:AddChat(ChatConfig)`
```luau
local Result = Section:AddChat({
Name = "Example",
})
```
```luau
local Result = Section:AddChat({
Name = "Example",
AppId = "0", -- optional
BotID = "0", -- optional
BotId = "0", -- optional
ConversationFile = "XLQP/Example", -- optional
DisclaimerFile = "XLQP/Example", -- optional
DisclaimerText = "Example text", -- optional
Height = 240, -- optional
Limit = 25, -- optional
MaxMessageLength = 100, -- optional
MessageLength = 1, -- optional
NotifyPos = "TopLeft", -- optional
PVP = false, -- optional
Pos = "TopLeft", -- optional
RefreshTime = 1, -- optional
ReportCooldown = 1, -- optional
Rules = "Be respectful and follow the rules.", -- optional
SendCooldown = 1, -- optional
SystemId = "0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------- |
| `AppId` | string | Yes | Sets the app id. |
| `BotID` | string | Yes | Sets the bot id. |
| `BotId` | string | Yes | Sets the bot id. |
| `ConversationFile` | string | Yes | Sets the conversation file. |
| `DisclaimerFile` | string | Yes | Sets the disclaimer file. |
| `DisclaimerText` | string | Yes | Sets the disclaimer text. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Limit` | number | Yes | Controls the limit value. |
| `MaxMessageLength` | number | Yes | Controls the max message length value. |
| `MessageLength` | number | Yes | Controls the message length value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `NotifyPos` | boolean | Yes | Turns notify pos behavior on or off. |
| `PVP` | boolean | Yes | Turns pvp behavior on or off. |
| `Pos` | varies | Yes | Optional pos setting accepted by this method. |
| `RefreshTime` | number | Yes | Delay between refresh operations. |
| `ReportCooldown` | number | Yes | Controls the report cooldown value. |
| `Rules` | table | Yes | Rules displayed or enforced by the feature. |
| `SendCooldown` | number | Yes | Controls the send cooldown value. |
| `SystemId` | string | Yes | Sets the system id. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddGlobalChat`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCheckbox
> This compatibility method behaves like CreateCheckbox. Creates a checkbox control with an optional saved flag. It is kept so scripts written with the older AddCheckbox name continue to work.
Source: /docs/elements/compatibility-reference/add-checkbox
# `AddCheckbox` [#addcheckbox]
`AddCheckbox` is an alternate name for `CreateCheckbox`. New code can use [CreateCheckbox](/docs/elements/controls-reference/create-checkbox).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCheckbox`. Creates a checkbox control with an optional saved flag. It is kept so scripts written with the older `AddCheckbox` name continue to work.
### When to use it [#when-to-use-it]
Use it for a simple boolean choice where a checkmark is clearer than a switch. Prefer `CreateCheckbox` in new code so the method name matches the current API.
`ElementFunction:AddCheckbox(CheckboxConfig)`
```luau
local Result = Section:AddCheckbox({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddCheckbox({
Name = "Example",
Callback = function(value)
print(value)
end,
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Flag = "ExampleKey", -- optional
Save = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCheckbox`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCommandPlugins
> This compatibility method behaves like AddPlugins. Adds a plugin manager for local, inline, prebuilt, or approved remote plugins. It is kept so scripts written with the older AddCommandPlugins name continue to work.
Source: /docs/elements/compatibility-reference/add-command-plugins
# `AddCommandPlugins` [#addcommandplugins]
`AddCommandPlugins` is an alternate name for `AddPlugins`. New code can use [AddPlugins](/docs/elements/advanced-reference/add-plugins).
## What it does [#what-it-does]
This compatibility method behaves like `AddPlugins`. Adds a plugin manager for local, inline, prebuilt, or approved remote plugins. It is kept so scripts written with the older `AddCommandPlugins` name continue to work.
### When to use it [#when-to-use-it]
Use it when your hub exposes optional modules and needs a user-facing way to load or manage them. Prefer `AddPlugins` in new code so the method name matches the current API.
`ElementFunction:AddCommandPlugins(PluginConfig)`
```luau
local Result = Section:AddCommandPlugins({
Name = "Example",
})
```
```luau
local Result = Section:AddCommandPlugins({
Name = "Example",
AllowInline = true, -- optional
AllowRemote = true, -- optional
AutoLoad = true, -- optional
Folder = "XLQP/Example", -- optional
RemotePlugins = {}, -- optional
SaveInline = true, -- optional
URLs = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------- | ------------ | -------- | ------------------------------------------------------ |
| `AllowInline` | boolean | Yes | Turns allow inline behavior on or off. |
| `AllowRemote` | boolean | Yes | Turns allow remote behavior on or off. |
| `AutoLoad` | boolean | Yes | Turns auto load behavior on or off. |
| `Folder` | string | Yes | Filesystem folder used for saved or discovered data. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RemotePlugins` | table | Yes | Supplies the remote plugins collection. |
| `SaveInline` | boolean | Yes | Turns save inline behavior on or off. |
| `URLs` | table | Yes | Approved remote source URLs considered by the feature. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddPlugins`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddControlPanel
> This compatibility method behaves like AddKeybindList. Adds a docked or detachable panel that displays active keybinds. It is kept so scripts written with the older AddControlPanel name continue to work.
Source: /docs/elements/compatibility-reference/add-control-panel
# `AddControlPanel` [#addcontrolpanel]
`AddControlPanel` is an alternate name for `AddKeybindList`. New code can use [AddKeybindList](/docs/elements/navigation-reference/add-keybind-list).
## What it does [#what-it-does]
This compatibility method behaves like `AddKeybindList`. Adds a docked or detachable panel that displays active keybinds. It is kept so scripts written with the older `AddControlPanel` name continue to work.
### When to use it [#when-to-use-it]
Use it to give users a live shortcut reference while they use the interface. Prefer `AddKeybindList` in new code so the method name matches the current API.
`ElementFunction:AddControlPanel(KeybindConfig)`
```luau
local KeybindList = Section:AddControlPanel({
Title = "Active keybinds",
Icon = "list",
Pin = true,
Popout = true,
Detached = false,
DockHeight = 236,
Width = 300,
Height = 390,
PopoutPosition = UDim2.new(1, -318, 0, 82),
})
```
```luau
local KeybindList = Section:AddControlPanel({
Title = "Active keybinds",
Icon = "list",
Pin = true,
Popout = true,
Detached = false,
DockHeight = 236,
Width = 300,
Height = 390,
PopoutPosition = UDim2.new(1, -318, 0, 82),
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | ------------ | -------- | ----------------------------------------------------- |
| `Detached` | boolean | Yes | Turns detached behavior on or off. |
| `DockHeight` | number | Yes | Controls the dock height value. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Pin` | boolean | Yes | Turns pin behavior on or off. |
| `Popout` | boolean | Yes | Turns popout behavior on or off. |
| `PopoutPosition` | string | Yes | Sets the popout position. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Width` | number | Yes | Requested horizontal size in pixels. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddKeybindList`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCopyButton
> This compatibility method behaves like CreateCopyButton. Creates a button that copies a configured value. It is kept so scripts written with the older AddCopyButton name continue to work.
Source: /docs/elements/compatibility-reference/add-copy-button
# `AddCopyButton` [#addcopybutton]
`AddCopyButton` is an alternate name for `CreateCopyButton`. New code can use [CreateCopyButton](/docs/elements/controls-reference/create-copy-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCopyButton`. Creates a button that copies a configured value. It is kept so scripts written with the older `AddCopyButton` name continue to work.
### When to use it [#when-to-use-it]
Use it beside codes, identifiers, commands, or URLs that users frequently copy. Prefer `CreateCopyButton` in new code so the method name matches the current API.
`ElementFunction:AddCopyButton(CopyConfig)`
```luau
local Result = Section:AddCopyButton({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddCopyButton({
Name = "Example",
Callback = function(value)
print(value)
end,
Description = "Example text", -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCopyButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCopy
> This compatibility method behaves like CreateCopyButton. Creates a button that copies a configured value. It is kept so scripts written with the older AddCopy name continue to work.
Source: /docs/elements/compatibility-reference/add-copy
# `AddCopy` [#addcopy]
`AddCopy` is an alternate name for `CreateCopyButton`. New code can use [CreateCopyButton](/docs/elements/controls-reference/create-copy-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCopyButton`. Creates a button that copies a configured value. It is kept so scripts written with the older `AddCopy` name continue to work.
### When to use it [#when-to-use-it]
Use it beside codes, identifiers, commands, or URLs that users frequently copy. Prefer `CreateCopyButton` in new code so the method name matches the current API.
`ElementFunction:AddCopy(CopyConfig)`
```luau
local Result = Section:AddCopy({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddCopy({
Name = "Example",
Callback = function(value)
print(value)
end,
Description = "Example text", -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCopyButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCursorTag
> This compatibility method behaves like CreateCursorTag. Creates text that follows the pointer as a contextual cursor label. It is kept so scripts written with the older AddCursorTag name continue to work.
Source: /docs/elements/compatibility-reference/add-cursor-tag
# `AddCursorTag` [#addcursortag]
`AddCursorTag` is an alternate name for `CreateCursorTag`. New code can use [CreateCursorTag](/docs/elements/content-reference/create-cursor-tag).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCursorTag`. Creates text that follows the pointer as a contextual cursor label. It is kept so scripts written with the older `AddCursorTag` name continue to work.
### When to use it [#when-to-use-it]
Use it for tool modes, drag hints, or short pointer-adjacent instructions. Prefer `CreateCursorTag` in new code so the method name matches the current API.
`ElementFunction:AddCursorTag(TagConfig)`
```luau
local Result = Section:AddCursorTag({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddCursorTag({
Callback = function(value)
print(value)
end,
Height = 240, -- optional
Hint = "Example text", -- optional
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Hint` | string | Yes | Sets the hint. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCursorTag`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDiscordImage
> This compatibility method behaves like AddDiscordImg. Adds a Discord invite image or prompt with remembered open behavior. It is kept so scripts written with the older AddDiscordImage name continue to work.
Source: /docs/elements/compatibility-reference/add-discord-image
# `AddDiscordImage` [#adddiscordimage]
`AddDiscordImage` is an alternate name for `AddDiscordImg`. New code can use [AddDiscordImg](/docs/elements/advanced-reference/add-discord-img).
## What it does [#what-it-does]
This compatibility method behaves like `AddDiscordImg`. Adds a Discord invite image or prompt with remembered open behavior. It is kept so scripts written with the older `AddDiscordImage` name continue to work.
### When to use it [#when-to-use-it]
Use it to present a community invite in a visual card while controlling how the invite is opened. Prefer `AddDiscordImg` in new code so the method name matches the current API.
`ElementFunction:AddDiscordImage(DiscordConfig)`
```luau
local Result = Section:AddDiscordImage({
Name = "Example",
})
```
```luau
local Result = Section:AddDiscordImage({
Name = "Example",
Content = "Example content", -- optional
DontAskAgain = true, -- optional
Invite = "https://example.com", -- optional
InviteCode = "https://example.com", -- optional
OpenMode = "Default", -- optional
RememberOpenMode = true, -- optional
discordpar = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | --------------- | -------- | ------------------------------------------------------ |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DontAskAgain` | boolean | Yes | Turns dont ask again behavior on or off. |
| `Invite` | string | Yes | Sets the invite. |
| `InviteCode` | string | Yes | Sets the invite code. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OpenMode` | varies | Yes | Optional open mode setting accepted by this method. |
| `RememberOpenMode` | boolean | Yes | Turns remember open mode behavior on or off. |
| `discordpar` | varies | Yes | Optional discordpar setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDiscordImg`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDiscord
> This compatibility method behaves like AddDiscordImg. Adds a Discord invite image or prompt with remembered open behavior. It is kept so scripts written with the older AddDiscord name continue to work.
Source: /docs/elements/compatibility-reference/add-discord
# `AddDiscord` [#adddiscord]
`AddDiscord` is an alternate name for `AddDiscordImg`. New code can use [AddDiscordImg](/docs/elements/advanced-reference/add-discord-img).
## What it does [#what-it-does]
This compatibility method behaves like `AddDiscordImg`. Adds a Discord invite image or prompt with remembered open behavior. It is kept so scripts written with the older `AddDiscord` name continue to work.
### When to use it [#when-to-use-it]
Use it to present a community invite in a visual card while controlling how the invite is opened. Prefer `AddDiscordImg` in new code so the method name matches the current API.
`ElementFunction:AddDiscord(DiscordConfig)`
```luau
local Result = Section:AddDiscord({
Name = "Example",
})
```
```luau
local Result = Section:AddDiscord({
Name = "Example",
Content = "Example content", -- optional
DontAskAgain = true, -- optional
Invite = "https://example.com", -- optional
InviteCode = "https://example.com", -- optional
OpenMode = "Default", -- optional
RememberOpenMode = true, -- optional
discordpar = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | --------------- | -------- | ------------------------------------------------------ |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DontAskAgain` | boolean | Yes | Turns dont ask again behavior on or off. |
| `Invite` | string | Yes | Sets the invite. |
| `InviteCode` | string | Yes | Sets the invite code. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OpenMode` | varies | Yes | Optional open mode setting accepted by this method. |
| `RememberOpenMode` | boolean | Yes | Turns remember open mode behavior on or off. |
| `discordpar` | varies | Yes | Optional discordpar setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDiscordImg`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDownloadProgress
> This compatibility method behaves like CreateDownloadProgress. Creates a progress controller specialized for downloads and completion state. It is kept so scripts written with the older AddDownloadProgress name continue to work.
Source: /docs/elements/compatibility-reference/add-download-progress
# `AddDownloadProgress` [#adddownloadprogress]
`AddDownloadProgress` is an alternate name for `CreateDownloadProgress`. New code can use [CreateDownloadProgress](/docs/elements/data-reference/create-download-progress).
## What it does [#what-it-does]
This compatibility method behaves like `CreateDownloadProgress`. Creates a progress controller specialized for downloads and completion state. It is kept so scripts written with the older `AddDownloadProgress` name continue to work.
### When to use it [#when-to-use-it]
Use it to show a timed or externally updated download operation. Prefer `CreateDownloadProgress` in new code so the method name matches the current API.
`ElementFunction:AddDownloadProgress(DownloadConfig)`
```luau
local Result = Section:AddDownloadProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddDownloadProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
Completed = true, -- optional
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Duration = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Completed` | boolean | Yes | Turns completed behavior on or off. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateDownloadProgress`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDownload
> This compatibility method behaves like CreateDownloadProgress. Creates a progress controller specialized for downloads and completion state. It is kept so scripts written with the older AddDownload name continue to work.
Source: /docs/elements/compatibility-reference/add-download
# `AddDownload` [#adddownload]
`AddDownload` is an alternate name for `CreateDownloadProgress`. New code can use [CreateDownloadProgress](/docs/elements/data-reference/create-download-progress).
## What it does [#what-it-does]
This compatibility method behaves like `CreateDownloadProgress`. Creates a progress controller specialized for downloads and completion state. It is kept so scripts written with the older `AddDownload` name continue to work.
### When to use it [#when-to-use-it]
Use it to show a timed or externally updated download operation. Prefer `CreateDownloadProgress` in new code so the method name matches the current API.
`ElementFunction:AddDownload(DownloadConfig)`
```luau
local Result = Section:AddDownload({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddDownload({
Name = "Example",
Callback = function(value)
print(value)
end,
Completed = true, -- optional
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Duration = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Completed` | boolean | Yes | Turns completed behavior on or off. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateDownloadProgress`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddElementDropdown
> This compatibility method behaves like AddDropdownPanel. Adds a titled panel that can open and close like a dropdown. It is kept so scripts written with the older AddElementDropdown name continue to work.
Source: /docs/elements/compatibility-reference/add-element-dropdown
# `AddElementDropdown` [#addelementdropdown]
`AddElementDropdown` is an alternate name for `AddDropdownPanel`. New code can use [AddDropdownPanel](/docs/elements/navigation-reference/add-dropdown-panel).
## What it does [#what-it-does]
This compatibility method behaves like `AddDropdownPanel`. Adds a titled panel that can open and close like a dropdown. It is kept so scripts written with the older `AddElementDropdown` name continue to work.
### When to use it [#when-to-use-it]
Use it to hide secondary controls while preserving a clear summary header. Prefer `AddDropdownPanel` in new code so the method name matches the current API.
`ElementFunction:AddElementDropdown(PanelConfig)`
```luau
local Result = Section:AddElementDropdown({
Name = "Example",
})
```
```luau
local Result = Section:AddElementDropdown({
Name = "Example",
Open = true, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Open` | boolean | Yes | Turns open behavior on or off. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDropdownPanel`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddExecuter
> This compatibility method behaves like executerthing. Creates the legacy script-executor interface exposed by the compatibility API. It is kept so scripts written with the older AddExecuter name continue to work.
Source: /docs/elements/compatibility-reference/add-executer
# `AddExecuter` [#addexecuter]
`AddExecuter` is an alternate name for `executerthing`.
## What it does [#what-it-does]
This compatibility method behaves like `executerthing`. Creates the legacy script-executor interface exposed by the compatibility API. It is kept so scripts written with the older `AddExecuter` name continue to work.
### When to use it [#when-to-use-it]
Use these names only when maintaining scripts that already depend on this legacy executor interface. For new code, use the documented `AddExecutor` constructor page and verify support in your current XLQP build.
`ElementFunction:AddExecuter()`
```luau
local Result = Section:AddExecuter()
```
```luau
local Result = Section:AddExecuter()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
This method does not require a configuration table.
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `executerthing`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddExecutor
> This compatibility method behaves like executerthing. Creates the legacy script-executor interface exposed by the compatibility API. It is kept so scripts written with the older AddExecutor name continue to work.
Source: /docs/elements/compatibility-reference/add-executor
# `AddExecutor` [#addexecutor]
`AddExecutor` is an alternate name for `executerthing`.
## What it does [#what-it-does]
This compatibility method behaves like `executerthing`. Creates the legacy script-executor interface exposed by the compatibility API. It is kept so scripts written with the older `AddExecutor` name continue to work.
### When to use it [#when-to-use-it]
Use these names only when maintaining scripts that already depend on this legacy executor interface. For new code, use the documented `AddExecutor` constructor page and verify support in your current XLQP build.
`ElementFunction:AddExecutor()`
```luau
local Executor = ExecutorTab:AddExecutor({
Name = "Executor",
Default = "print('hello')",
Height = 200,
TextSize = 14,
MetaTextSize = 13,
TitleTextSize = 18
})
```
```luau
local Executor = ExecutorTab:AddExecutor({
Name = "Executor",
Default = "print('hello')",
Height = 200,
TextSize = 14,
MetaTextSize = 13,
TitleTextSize = 18
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------- | ------------ | -------- | ----------------------------------------------------- |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `MetaTextSize` | number | Yes | Controls the meta text size value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `TextSize` | number | Yes | Size of normal text in pixels. |
| `TitleTextSize` | number | Yes | Size of title text in pixels. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `executerthing`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddFAQ
> This compatibility method behaves like CreateFAQ. Creates an accordion-style list of questions and answers. It is kept so scripts written with the older AddFAQ name continue to work.
Source: /docs/elements/compatibility-reference/add-faq
# `AddFAQ` [#addfaq]
`AddFAQ` is an alternate name for `CreateFAQ`. New code can use [CreateFAQ](/docs/elements/content-reference/create-faq).
## What it does [#what-it-does]
This compatibility method behaves like `CreateFAQ`. Creates an accordion-style list of questions and answers. It is kept so scripts written with the older `AddFAQ` name continue to work.
### When to use it [#when-to-use-it]
Use it for help content where only one or a few answers should be expanded at a time. Prefer `CreateFAQ` in new code so the method name matches the current API.
`ElementFunction:AddFAQ(FAQConfig)`
```luau
local Result = Section:AddFAQ({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddFAQ({
Name = "Example",
Callback = function(value)
print(value)
end,
Exclusive = true, -- optional
Items = { "Item 1", "Item 2" }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Exclusive` | boolean | Yes | Turns exclusive behavior on or off. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateFAQ`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddFlipButton
> This compatibility method behaves like CreateFlipButton. Creates a two-sided button that flips between front and back content. It is kept so scripts written with the older AddFlipButton name continue to work.
Source: /docs/elements/compatibility-reference/add-flip-button
# `AddFlipButton` [#addflipbutton]
`AddFlipButton` is an alternate name for `CreateFlipButton`. New code can use [CreateFlipButton](/docs/elements/controls-reference/create-flip-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateFlipButton`. Creates a two-sided button that flips between front and back content. It is kept so scripts written with the older `AddFlipButton` name continue to work.
### When to use it [#when-to-use-it]
Use it for reveal interactions or controls with two related faces. Prefer `CreateFlipButton` in new code so the method name matches the current API.
`ElementFunction:AddFlipButton(FlipConfig)`
```luau
local Result = Section:AddFlipButton({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddFlipButton({
Callback = function(value)
print(value)
end,
Back = nil, -- optional
Front = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Back` | varies | Yes | Optional back setting accepted by this method. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Front` | varies | Yes | Optional front setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateFlipButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddFlip
> This compatibility method behaves like CreateFlipButton. Creates a two-sided button that flips between front and back content. It is kept so scripts written with the older AddFlip name continue to work.
Source: /docs/elements/compatibility-reference/add-flip
# `AddFlip` [#addflip]
`AddFlip` is an alternate name for `CreateFlipButton`. New code can use [CreateFlipButton](/docs/elements/controls-reference/create-flip-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateFlipButton`. Creates a two-sided button that flips between front and back content. It is kept so scripts written with the older `AddFlip` name continue to work.
### When to use it [#when-to-use-it]
Use it for reveal interactions or controls with two related faces. Prefer `CreateFlipButton` in new code so the method name matches the current API.
`ElementFunction:AddFlip(FlipConfig)`
```luau
local Result = Section:AddFlip({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddFlip({
Callback = function(value)
print(value)
end,
Back = nil, -- optional
Front = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Back` | varies | Yes | Optional back setting accepted by this method. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Front` | varies | Yes | Optional front setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateFlipButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddGlobalChatDM
> This compatibility method behaves like AddGlobalChat. Adds a remote global-chat panel with rules, cooldowns, reporting, and conversation persistence. It is kept so scripts written with the older AddGlobalChatDM name continue to work.
Source: /docs/elements/compatibility-reference/add-global-chat-dm
# `AddGlobalChatDM` [#addglobalchatdm]
`AddGlobalChatDM` is an alternate name for `AddGlobalChat`. New code can use [AddGlobalChat](/docs/elements/advanced-reference/add-global-chat).
## What it does [#what-it-does]
This compatibility method behaves like `AddGlobalChat`. Adds a remote global-chat panel with rules, cooldowns, reporting, and conversation persistence. It is kept so scripts written with the older `AddGlobalChatDM` name continue to work.
### When to use it [#when-to-use-it]
Use it when maintaining a script that uses this older method name. The service endpoint is built into XLQP, so no authentication URL option is required. Prefer `AddGlobalChat` in new code so the method name matches the current API.
`ElementFunction:AddGlobalChatDM(ChatConfig)`
```luau
local Result = Section:AddGlobalChatDM({
Name = "Example",
})
```
```luau
local Result = Section:AddGlobalChatDM({
Name = "Example",
AppId = "0", -- optional
BotID = "0", -- optional
BotId = "0", -- optional
ConversationFile = "XLQP/Example", -- optional
DisclaimerFile = "XLQP/Example", -- optional
DisclaimerText = "Example text", -- optional
Height = 240, -- optional
Limit = 25, -- optional
MaxMessageLength = 100, -- optional
MessageLength = 1, -- optional
NotifyPos = "TopLeft", -- optional
PVP = false, -- optional
Pos = "TopLeft", -- optional
RefreshTime = 1, -- optional
ReportCooldown = 1, -- optional
Rules = "Be respectful and follow the rules.", -- optional
SendCooldown = 1, -- optional
SystemId = "0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------- |
| `AppId` | string | Yes | Sets the app id. |
| `BotID` | string | Yes | Sets the bot id. |
| `BotId` | string | Yes | Sets the bot id. |
| `ConversationFile` | string | Yes | Sets the conversation file. |
| `DisclaimerFile` | string | Yes | Sets the disclaimer file. |
| `DisclaimerText` | string | Yes | Sets the disclaimer text. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Limit` | number | Yes | Controls the limit value. |
| `MaxMessageLength` | number | Yes | Controls the max message length value. |
| `MessageLength` | number | Yes | Controls the message length value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `NotifyPos` | boolean | Yes | Turns notify pos behavior on or off. |
| `PVP` | boolean | Yes | Turns pvp behavior on or off. |
| `Pos` | varies | Yes | Optional pos setting accepted by this method. |
| `RefreshTime` | number | Yes | Delay between refresh operations. |
| `ReportCooldown` | number | Yes | Controls the report cooldown value. |
| `Rules` | table | Yes | Rules displayed or enforced by the feature. |
| `SendCooldown` | number | Yes | Controls the send cooldown value. |
| `SystemId` | string | Yes | Sets the system id. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddGlobalChat`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddHoverTag
> This compatibility method behaves like CreateCursorTag. Creates text that follows the pointer as a contextual cursor label. It is kept so scripts written with the older AddHoverTag name continue to work.
Source: /docs/elements/compatibility-reference/add-hover-tag
# `AddHoverTag` [#addhovertag]
`AddHoverTag` is an alternate name for `CreateCursorTag`. New code can use [CreateCursorTag](/docs/elements/content-reference/create-cursor-tag).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCursorTag`. Creates text that follows the pointer as a contextual cursor label. It is kept so scripts written with the older `AddHoverTag` name continue to work.
### When to use it [#when-to-use-it]
Use it for tool modes, drag hints, or short pointer-adjacent instructions. Prefer `CreateCursorTag` in new code so the method name matches the current API.
`ElementFunction:AddHoverTag(TagConfig)`
```luau
local Result = Section:AddHoverTag({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddHoverTag({
Callback = function(value)
print(value)
end,
Height = 240, -- optional
Hint = "Example text", -- optional
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Hint` | string | Yes | Sets the hint. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCursorTag`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddInteractiveDropdown
> This compatibility method behaves like AddDropdownPanel. Adds a titled panel that can open and close like a dropdown. It is kept so scripts written with the older AddInteractiveDropdown name continue to work.
Source: /docs/elements/compatibility-reference/add-interactive-dropdown
# `AddInteractiveDropdown` [#addinteractivedropdown]
`AddInteractiveDropdown` is an alternate name for `AddDropdownPanel`. New code can use [AddDropdownPanel](/docs/elements/navigation-reference/add-dropdown-panel).
## What it does [#what-it-does]
This compatibility method behaves like `AddDropdownPanel`. Adds a titled panel that can open and close like a dropdown. It is kept so scripts written with the older `AddInteractiveDropdown` name continue to work.
### When to use it [#when-to-use-it]
Use it to hide secondary controls while preserving a clear summary header. Prefer `AddDropdownPanel` in new code so the method name matches the current API.
`ElementFunction:AddInteractiveDropdown(PanelConfig)`
```luau
local Result = Section:AddInteractiveDropdown({
Name = "Example",
})
```
```luau
local Result = Section:AddInteractiveDropdown({
Name = "Example",
Open = true, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Open` | boolean | Yes | Turns open behavior on or off. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDropdownPanel`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddKeybindPanel
> This compatibility method behaves like AddKeybindList. Adds a docked or detachable panel that displays active keybinds. It is kept so scripts written with the older AddKeybindPanel name continue to work.
Source: /docs/elements/compatibility-reference/add-keybind-panel
# `AddKeybindPanel` [#addkeybindpanel]
`AddKeybindPanel` is an alternate name for `AddKeybindList`. New code can use [AddKeybindList](/docs/elements/navigation-reference/add-keybind-list).
## What it does [#what-it-does]
This compatibility method behaves like `AddKeybindList`. Adds a docked or detachable panel that displays active keybinds. It is kept so scripts written with the older `AddKeybindPanel` name continue to work.
### When to use it [#when-to-use-it]
Use it to give users a live shortcut reference while they use the interface. Prefer `AddKeybindList` in new code so the method name matches the current API.
`ElementFunction:AddKeybindPanel(KeybindConfig)`
```luau
local KeybindList = Section:AddKeybindPanel({
Title = "Active keybinds",
Icon = "list",
Pin = true,
Popout = true,
Detached = false,
DockHeight = 236,
Width = 300,
Height = 390,
PopoutPosition = UDim2.new(1, -318, 0, 82),
})
```
```luau
local KeybindList = Section:AddKeybindPanel({
Title = "Active keybinds",
Icon = "list",
Pin = true,
Popout = true,
Detached = false,
DockHeight = 236,
Width = 300,
Height = 390,
PopoutPosition = UDim2.new(1, -318, 0, 82),
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | ------------ | -------- | ----------------------------------------------------- |
| `Detached` | boolean | Yes | Turns detached behavior on or off. |
| `DockHeight` | number | Yes | Controls the dock height value. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Pin` | boolean | Yes | Turns pin behavior on or off. |
| `Popout` | boolean | Yes | Turns popout behavior on or off. |
| `PopoutPosition` | string | Yes | Sets the popout position. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Width` | number | Yes | Requested horizontal size in pixels. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddKeybindList`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLineChart
> This compatibility method behaves like CreateChart. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older AddLineChart name continue to work.
Source: /docs/elements/compatibility-reference/add-line-chart
# `AddLineChart` [#addlinechart]
`AddLineChart` is an alternate name for `CreateChart`. New code can use [CreateChart](/docs/elements/data-reference/create-chart).
## What it does [#what-it-does]
This compatibility method behaves like `CreateChart`. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older `AddLineChart` name continue to work.
### When to use it [#when-to-use-it]
Use it for trends, time series, or changing numeric values. Prefer `CreateChart` in new code so the method name matches the current API.
`ElementFunction:AddLineChart(ChartConfig)`
```luau
local Result = Section:AddLineChart({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddLineChart({
Name = "Example",
Callback = function(value)
print(value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Dots = true, -- optional
Filled = true, -- optional
Height = 240, -- optional
Icon = "home", -- optional
MaxPoints = 100, -- optional
Points = { { Label = "A", Value = 25 }, { Label = "B", Value = 75 } }, -- optional
Prefix = "Example", -- optional
Smooth = true, -- optional
Suffix = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Dots` | boolean | Yes | Turns dots behavior on or off. |
| `Filled` | boolean | Yes | Turns filled behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `MaxPoints` | number | Yes | Controls the max points value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Smooth` | boolean | Yes | Turns smooth behavior on or off. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateChart`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddMusicDisc
> This compatibility method behaves like AddDiscPlayer. Adds a disc-style audio player connected to a playlist or media controller. It is kept so scripts written with the older AddMusicDisc name continue to work.
Source: /docs/elements/compatibility-reference/add-music-disc
# `AddMusicDisc` [#addmusicdisc]
`AddMusicDisc` is an alternate name for `AddDiscPlayer`. New code can use [AddDiscPlayer](/docs/elements/media-reference/add-disc-player).
## What it does [#what-it-does]
This compatibility method behaves like `AddDiscPlayer`. Adds a disc-style audio player connected to a playlist or media controller. It is kept so scripts written with the older `AddMusicDisc` name continue to work.
### When to use it [#when-to-use-it]
Use it when you want music playback controls with a visual spinning-disc presentation. Prefer `AddDiscPlayer` in new code so the method name matches the current API.
`XLQPGen1:AddMusicDisc(Config)`
```luau
local Result = Library:AddMusicDisc({
Name = "Example",
})
```
```luau
local Result = Library:AddMusicDisc({
Name = "Example",
AutoPlay = true, -- optional
Loop = true, -- optional
MediaPlayer = nil, -- optional
Playlist = {}, -- optional
Position = "TopLeft", -- optional
SpinSpeed = 1, -- optional
Volume = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ---------------------------------------------------------------- |
| `AutoPlay` | boolean | Yes | Starts playback automatically after creation. |
| `Loop` | boolean | Yes | Repeats playback after reaching the end. |
| `MediaPlayer` | varies | Yes | Optional media player setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Position` | string | Yes | Sets the position. |
| `SpinSpeed` | number | Yes | Controls the spin speed value. |
| `Volume` | number | Yes | Playback volume used by the media element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDiscPlayer`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddNumberCard
> This compatibility method behaves like AddRevenueCard. Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics. It is kept so scripts written with the older AddNumberCard name continue to work.
Source: /docs/elements/compatibility-reference/add-number-card
# `AddNumberCard` [#addnumbercard]
`AddNumberCard` is an alternate name for `AddRevenueCard`. New code can use [AddRevenueCard](/docs/elements/data-reference/add-revenue-card).
## What it does [#what-it-does]
This compatibility method behaves like `AddRevenueCard`. Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics. It is kept so scripts written with the older `AddNumberCard` name continue to work.
### When to use it [#when-to-use-it]
Use it for dashboard KPIs such as revenue, usage, balances, or growth. Prefer `AddRevenueCard` in new code so the method name matches the current API.
`ElementFunction:AddNumberCard(RevenueConfig)`
```luau
local Result = Section:AddNumberCard({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddNumberCard({
Name = "Example",
Callback = function(value)
print(value)
end,
Change = 1, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Decimals = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
Items = { "Item 1", "Item 2" }, -- optional
MiniStats = {}, -- optional
Prefix = "Example", -- optional
StartValue = 1, -- optional
Stats = {}, -- optional
Suffix = "Example", -- optional
Trend = nil, -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------ | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Change` | number | Yes | Controls the change value. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Decimals` | number | Yes | Controls the decimals value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `MiniStats` | table | Yes | Supplies the mini stats collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `StartValue` | number | Yes | Controls the start value value. |
| `Stats` | table | Yes | Supplies the stats collection. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `Trend` | varies | Yes | Optional trend setting accepted by this method. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddRevenueCard`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddNumber
> This compatibility method behaves like CreateStat. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older AddNumber name continue to work.
Source: /docs/elements/compatibility-reference/add-number
# `AddNumber` [#addnumber]
`AddNumber` is an alternate name for `CreateStat`. New code can use [CreateStat](/docs/elements/data-reference/create-stat).
## What it does [#what-it-does]
This compatibility method behaves like `CreateStat`. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older `AddNumber` name continue to work.
### When to use it [#when-to-use-it]
Use it for a single KPI that may change and should emphasize the new value. Prefer `CreateStat` in new code so the method name matches the current API.
`ElementFunction:AddNumber(StatConfig)`
```luau
local Result = Section:AddNumber({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddNumber({
Name = "Example",
Callback = function(value)
print(value)
end,
Delta = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Delta` | number | Yes | Controls the delta value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateStat`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPinnedList
> This compatibility method behaves like CreatePinnedList. Creates a list that separates pinned items from the rest. It is kept so scripts written with the older AddPinnedList name continue to work.
Source: /docs/elements/compatibility-reference/add-pinned-list
# `AddPinnedList` [#addpinnedlist]
`AddPinnedList` is an alternate name for `CreatePinnedList`. New code can use [CreatePinnedList](/docs/elements/content-reference/create-pinned-list).
## What it does [#what-it-does]
This compatibility method behaves like `CreatePinnedList`. Creates a list that separates pinned items from the rest. It is kept so scripts written with the older `AddPinnedList` name continue to work.
### When to use it [#when-to-use-it]
Use it when important or favorite entries must stay easy to reach. Prefer `CreatePinnedList` in new code so the method name matches the current API.
`ElementFunction:AddPinnedList(ListConfig)`
```luau
local Result = Section:AddPinnedList({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddPinnedList({
Callback = function(value)
print(value)
end,
Items = { "Item 1", "Item 2" }, -- optional
PinnedTitle = "Example", -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `PinnedTitle` | string | Yes | Sets the pinned title. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreatePinnedList`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPlayerCard
> This compatibility method behaves like AddPlayerVisualizer. Adds a visual player preview with optional overlay boxes and live coloring. It is kept so scripts written with the older AddPlayerCard name continue to work.
Source: /docs/elements/compatibility-reference/add-player-card
# `AddPlayerCard` [#addplayercard]
`AddPlayerCard` is an alternate name for `AddPlayerVisualizer`. New code can use [AddPlayerVisualizer](/docs/elements/data-reference/add-player-visualizer).
## What it does [#what-it-does]
This compatibility method behaves like `AddPlayerVisualizer`. Adds a visual player preview with optional overlay boxes and live coloring. It is kept so scripts written with the older `AddPlayerCard` name continue to work.
### When to use it [#when-to-use-it]
Use it for avatar previews, player-selection tools, or visual configuration panels. Prefer `AddPlayerVisualizer` in new code so the method name matches the current API.
`ElementFunction:AddPlayerCard(PlayerConfig)`
```luau
local Result = Section:AddPlayerCard({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddPlayerCard({
Name = "Example",
Callback = function(value)
print(value)
end,
BoxCallback = function(value) -- optional
print("BoxCallback:", value)
end,
Boxes = {}, -- optional
Height = 240, -- optional
LiveColor = true, -- optional
LiveColorSpeed = 1, -- optional
Player = game:GetService("Players").LocalPlayer, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `BoxCallback` | function | Yes | Runs when an overlay box or box item is used. |
| `Boxes` | table | Yes | Supplies the boxes collection. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `LiveColor` | boolean | Yes | Turns live color behavior on or off. |
| `LiveColorSpeed` | number | Yes | Controls the live color speed value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Player` | Player | Yes | Player represented by the visual element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddPlayerVisualizer`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPluginManager
> This compatibility method behaves like AddPlugins. Adds a plugin manager for local, inline, prebuilt, or approved remote plugins. It is kept so scripts written with the older AddPluginManager name continue to work.
Source: /docs/elements/compatibility-reference/add-plugin-manager
# `AddPluginManager` [#addpluginmanager]
`AddPluginManager` is an alternate name for `AddPlugins`. New code can use [AddPlugins](/docs/elements/advanced-reference/add-plugins).
## What it does [#what-it-does]
This compatibility method behaves like `AddPlugins`. Adds a plugin manager for local, inline, prebuilt, or approved remote plugins. It is kept so scripts written with the older `AddPluginManager` name continue to work.
### When to use it [#when-to-use-it]
Use it when your hub exposes optional modules and needs a user-facing way to load or manage them. Prefer `AddPlugins` in new code so the method name matches the current API.
`ElementFunction:AddPluginManager(PluginConfig)`
```luau
local Result = Section:AddPluginManager({
Name = "Example",
})
```
```luau
local Result = Section:AddPluginManager({
Name = "Example",
AllowInline = true, -- optional
AllowRemote = true, -- optional
AutoLoad = true, -- optional
Folder = "XLQP/Example", -- optional
RemotePlugins = {}, -- optional
SaveInline = true, -- optional
URLs = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------- | ------------ | -------- | ------------------------------------------------------ |
| `AllowInline` | boolean | Yes | Turns allow inline behavior on or off. |
| `AllowRemote` | boolean | Yes | Turns allow remote behavior on or off. |
| `AutoLoad` | boolean | Yes | Turns auto load behavior on or off. |
| `Folder` | string | Yes | Filesystem folder used for saved or discovered data. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RemotePlugins` | table | Yes | Supplies the remote plugins collection. |
| `SaveInline` | boolean | Yes | Turns save inline behavior on or off. |
| `URLs` | table | Yes | Approved remote source URLs considered by the feature. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddPlugins`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddProgress
> This compatibility method behaves like CreateProgress. Creates a controller-driven progress element with optional saving and callback behavior. It is kept so scripts written with the older AddProgress name continue to work.
Source: /docs/elements/compatibility-reference/add-progress
# `AddProgress` [#addprogress]
`AddProgress` is an alternate name for `CreateProgress`. New code can use [CreateProgress](/docs/elements/data-reference/create-progress).
## What it does [#what-it-does]
This compatibility method behaves like `CreateProgress`. Creates a controller-driven progress element with optional saving and callback behavior. It is kept so scripts written with the older `AddProgress` name continue to work.
### When to use it [#when-to-use-it]
Use it when code needs to update a bounded value over time. Prefer `CreateProgress` in new code so the method name matches the current API.
`ElementFunction:AddProgress(ProgressConfig)`
```luau
local Result = Section:AddProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Flag = "ExampleKey", -- optional
Icon = "home", -- optional
Max = 100, -- optional
Min = 0, -- optional
Save = true, -- optional
Suffix = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateProgress`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddReadOnlyProgress
> This compatibility method behaves like CreateProgressBar. Creates a progress bar with explicit current value and display formatting. It is kept so scripts written with the older AddReadOnlyProgress name continue to work.
Source: /docs/elements/compatibility-reference/add-read-only-progress
# `AddReadOnlyProgress` [#addreadonlyprogress]
`AddReadOnlyProgress` is an alternate name for `CreateProgressBar`. New code can use [CreateProgressBar](/docs/elements/data-reference/create-progress-bar).
## What it does [#what-it-does]
This compatibility method behaves like `CreateProgressBar`. Creates a progress bar with explicit current value and display formatting. It is kept so scripts written with the older `AddReadOnlyProgress` name continue to work.
### When to use it [#when-to-use-it]
Use it for loading, completion, health, or quota values controlled by your script. Prefer `CreateProgressBar` in new code so the method name matches the current API.
`ElementFunction:AddReadOnlyProgress(BarConfig)`
```luau
local Result = Section:AddReadOnlyProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddReadOnlyProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Max = 100, -- optional
Min = 0, -- optional
Suffix = "Example", -- optional
ValueText = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `ValueText` | string | Yes | Custom display text for the current value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateProgressBar`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRevenue
> This compatibility method behaves like AddRevenueCard. Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics. It is kept so scripts written with the older AddRevenue name continue to work.
Source: /docs/elements/compatibility-reference/add-revenue
# `AddRevenue` [#addrevenue]
`AddRevenue` is an alternate name for `AddRevenueCard`. New code can use [AddRevenueCard](/docs/elements/data-reference/add-revenue-card).
## What it does [#what-it-does]
This compatibility method behaves like `AddRevenueCard`. Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics. It is kept so scripts written with the older `AddRevenue` name continue to work.
### When to use it [#when-to-use-it]
Use it for dashboard KPIs such as revenue, usage, balances, or growth. Prefer `AddRevenueCard` in new code so the method name matches the current API.
`ElementFunction:AddRevenue(RevenueConfig)`
```luau
local Result = Section:AddRevenue({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddRevenue({
Name = "Example",
Callback = function(value)
print(value)
end,
Change = 1, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Decimals = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
Items = { "Item 1", "Item 2" }, -- optional
MiniStats = {}, -- optional
Prefix = "Example", -- optional
StartValue = 1, -- optional
Stats = {}, -- optional
Suffix = "Example", -- optional
Trend = nil, -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------ | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Change` | number | Yes | Controls the change value. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Decimals` | number | Yes | Controls the decimals value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `MiniStats` | table | Yes | Supplies the mini stats collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `StartValue` | number | Yes | Controls the start value value. |
| `Stats` | table | Yes | Supplies the stats collection. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `Trend` | varies | Yes | Optional trend setting accepted by this method. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddRevenueCard`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRippleButton
> This compatibility method behaves like CreateRippleButton. Creates a button with a ripple press effect. It is kept so scripts written with the older AddRippleButton name continue to work.
Source: /docs/elements/compatibility-reference/add-ripple-button
# `AddRippleButton` [#addripplebutton]
`AddRippleButton` is an alternate name for `CreateRippleButton`. New code can use [CreateRippleButton](/docs/elements/controls-reference/create-ripple-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateRippleButton`. Creates a button with a ripple press effect. It is kept so scripts written with the older `AddRippleButton` name continue to work.
### When to use it [#when-to-use-it]
Use it for primary actions that benefit from clear animated click feedback. Prefer `CreateRippleButton` in new code so the method name matches the current API.
`ElementFunction:AddRippleButton(RippleConfig)`
```luau
local Result = Section:AddRippleButton({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddRippleButton({
Name = "Example",
Callback = function(value)
print(value)
end,
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateRippleButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRipple
> This compatibility method behaves like CreateRippleButton. Creates a button with a ripple press effect. It is kept so scripts written with the older AddRipple name continue to work.
Source: /docs/elements/compatibility-reference/add-ripple
# `AddRipple` [#addripple]
`AddRipple` is an alternate name for `CreateRippleButton`. New code can use [CreateRippleButton](/docs/elements/controls-reference/create-ripple-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateRippleButton`. Creates a button with a ripple press effect. It is kept so scripts written with the older `AddRipple` name continue to work.
### When to use it [#when-to-use-it]
Use it for primary actions that benefit from clear animated click feedback. Prefer `CreateRippleButton` in new code so the method name matches the current API.
`ElementFunction:AddRipple(RippleConfig)`
```luau
local Result = Section:AddRipple({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddRipple({
Name = "Example",
Callback = function(value)
print(value)
end,
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateRippleButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRobloxStudioTool
> This compatibility method behaves like AddStudioTool. Adds a Roblox Studio-style object or mesh tool with part and placement settings. It is kept so scripts written with the older AddRobloxStudioTool name continue to work.
Source: /docs/elements/compatibility-reference/add-roblox-studio-tool
# `AddRobloxStudioTool` [#addrobloxstudiotool]
`AddRobloxStudioTool` is an alternate name for `AddStudioTool`. New code can use [AddStudioTool](/docs/elements/advanced-reference/add-studio-tool).
## What it does [#what-it-does]
This compatibility method behaves like `AddStudioTool`. Adds a Roblox Studio-style object or mesh tool with part and placement settings. It is kept so scripts written with the older `AddRobloxStudioTool` name continue to work.
### When to use it [#when-to-use-it]
Use it for controlled creation or editing workflows that target Roblox instances. Prefer `AddStudioTool` in new code so the method name matches the current API.
`ElementFunction:AddRobloxStudioTool(ToolConfig)`
```luau
local Result = Section:AddRobloxStudioTool({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddRobloxStudioTool({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
Anchored = true, -- optional
ButtonColor = Color3.fromRGB(139, 92, 246), -- optional
CanCollide = true, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Grid = 1, -- optional
MeshId = "rbxassetid://0", -- optional
ParentPath = "XLQP/Example", -- optional
PartSize = 24, -- optional
PartType = "Default", -- optional
Path = "XLQP/Example", -- optional
TargetPath = "XLQP/Example", -- optional
TextureId = "rbxassetid://0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Anchored` | boolean | Yes | Turns anchored behavior on or off. |
| `ButtonColor` | Color3 | Yes | Sets the button color. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CanCollide` | boolean | Yes | Turns can collide behavior on or off. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Grid` | number | Yes | Controls the grid value. |
| `MeshId` | string or asset | Yes | Mesh asset used by the created part or preview. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ParentPath` | string | Yes | Sets the parent path. |
| `PartSize` | number | Yes | Controls the part size value. |
| `PartType` | varies | Yes | Optional part type setting accepted by this method. |
| `Path` | string | Yes | Sets the path. |
| `TargetPath` | string | Yes | Sets the target path. |
| `TextureId` | string or asset | Yes | Texture asset applied to the mesh or part. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddStudioTool`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddScriptBlox
> This compatibility method behaves like AddScriptHub. Adds a searchable, sortable script catalog. It is kept so scripts written with the older AddScriptBlox name continue to work.
Source: /docs/elements/compatibility-reference/add-script-blox
# `AddScriptBlox` [#addscriptblox]
`AddScriptBlox` is an alternate name for `AddScriptHub`. New code can use [AddScriptHub](/docs/elements/advanced-reference/add-script-hub).
## What it does [#what-it-does]
This compatibility method behaves like `AddScriptHub`. Adds a searchable, sortable script catalog. It is kept so scripts written with the older `AddScriptBlox` name continue to work.
### When to use it [#when-to-use-it]
Use it to present an approved set of scripts or tools with metadata and cached images. Prefer `AddScriptHub` in new code so the method name matches the current API.
`ElementFunction:AddScriptBlox(HubConfig)`
```luau
local Result = Section:AddScriptBlox({
Name = "Example",
})
```
```luau
local Result = Section:AddScriptBlox({
Name = "Example",
Collapsed = true, -- optional
Description = "Example text", -- optional
Icon = "home", -- optional
ImageCacheFolder = "rbxassetid://0", -- optional
MaxResults = 100, -- optional
Order = nil, -- optional
SortBy = nil, -- optional
Strict = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------------- |
| `Collapsed` | boolean | Yes | Turns collapsed behavior on or off. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ImageCacheFolder` | string | Yes | Sets the image cache folder. |
| `MaxResults` | number | Yes | Controls the max results value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Order` | varies | Yes | Optional order setting accepted by this method. |
| `SortBy` | varies | Yes | Optional sort by setting accepted by this method. |
| `Strict` | boolean | Yes | Turns strict behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddScriptHub`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddScrollHint
> This compatibility method behaves like CreateScrollHint. Creates a hint that can prompt or automatically perform a scroll action. It is kept so scripts written with the older AddScrollHint name continue to work.
Source: /docs/elements/compatibility-reference/add-scroll-hint
# `AddScrollHint` [#addscrollhint]
`AddScrollHint` is an alternate name for `CreateScrollHint`. New code can use [CreateScrollHint](/docs/elements/content-reference/create-scroll-hint).
## What it does [#what-it-does]
This compatibility method behaves like `CreateScrollHint`. Creates a hint that can prompt or automatically perform a scroll action. It is kept so scripts written with the older `AddScrollHint` name continue to work.
### When to use it [#when-to-use-it]
Use it when more content exists below the visible area and users may not notice it. Prefer `CreateScrollHint` in new code so the method name matches the current API.
`ElementFunction:AddScrollHint(HintConfig)`
```luau
local Result = Section:AddScrollHint({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddScrollHint({
Callback = function(value)
print(value)
end,
AutoScroll = true, -- optional
AutoStart = true, -- optional
Icon = "home", -- optional
ScrollAmount = 1, -- optional
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `AutoScroll` | boolean | Yes | Turns auto scroll behavior on or off. |
| `AutoStart` | boolean | Yes | Turns auto start behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ScrollAmount` | number | Yes | Controls the scroll amount value. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateScrollHint`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddScrollIndicator
> This compatibility method behaves like CreateScrollHint. Creates a hint that can prompt or automatically perform a scroll action. It is kept so scripts written with the older AddScrollIndicator name continue to work.
Source: /docs/elements/compatibility-reference/add-scroll-indicator
# `AddScrollIndicator` [#addscrollindicator]
`AddScrollIndicator` is an alternate name for `CreateScrollHint`. New code can use [CreateScrollHint](/docs/elements/content-reference/create-scroll-hint).
## What it does [#what-it-does]
This compatibility method behaves like `CreateScrollHint`. Creates a hint that can prompt or automatically perform a scroll action. It is kept so scripts written with the older `AddScrollIndicator` name continue to work.
### When to use it [#when-to-use-it]
Use it when more content exists below the visible area and users may not notice it. Prefer `CreateScrollHint` in new code so the method name matches the current API.
`ElementFunction:AddScrollIndicator(HintConfig)`
```luau
local Result = Section:AddScrollIndicator({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddScrollIndicator({
Callback = function(value)
print(value)
end,
AutoScroll = true, -- optional
AutoStart = true, -- optional
Icon = "home", -- optional
ScrollAmount = 1, -- optional
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `AutoScroll` | boolean | Yes | Turns auto scroll behavior on or off. |
| `AutoStart` | boolean | Yes | Turns auto start behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ScrollAmount` | number | Yes | Controls the scroll amount value. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateScrollHint`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSmoothNumber
> This compatibility method behaves like AddRevenueCard. Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics. It is kept so scripts written with the older AddSmoothNumber name continue to work.
Source: /docs/elements/compatibility-reference/add-smooth-number
# `AddSmoothNumber` [#addsmoothnumber]
`AddSmoothNumber` is an alternate name for `AddRevenueCard`. New code can use [AddRevenueCard](/docs/elements/data-reference/add-revenue-card).
## What it does [#what-it-does]
This compatibility method behaves like `AddRevenueCard`. Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics. It is kept so scripts written with the older `AddSmoothNumber` name continue to work.
### When to use it [#when-to-use-it]
Use it for dashboard KPIs such as revenue, usage, balances, or growth. Prefer `AddRevenueCard` in new code so the method name matches the current API.
`ElementFunction:AddSmoothNumber(RevenueConfig)`
```luau
local Result = Section:AddSmoothNumber({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddSmoothNumber({
Name = "Example",
Callback = function(value)
print(value)
end,
Change = 1, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Decimals = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
Items = { "Item 1", "Item 2" }, -- optional
MiniStats = {}, -- optional
Prefix = "Example", -- optional
StartValue = 1, -- optional
Stats = {}, -- optional
Suffix = "Example", -- optional
Trend = nil, -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------ | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Change` | number | Yes | Controls the change value. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Decimals` | number | Yes | Controls the decimals value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `MiniStats` | table | Yes | Supplies the mini stats collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `StartValue` | number | Yes | Controls the start value value. |
| `Stats` | table | Yes | Supplies the stats collection. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `Trend` | varies | Yes | Optional trend setting accepted by this method. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddRevenueCard`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStackedChart
> This compatibility method behaves like CreateStackedChart. Creates a stacked chart from multiple named series. It is kept so scripts written with the older AddStackedChart name continue to work.
Source: /docs/elements/compatibility-reference/add-stacked-chart
# `AddStackedChart` [#addstackedchart]
`AddStackedChart` is an alternate name for `CreateStackedChart`. New code can use [CreateStackedChart](/docs/elements/data-reference/create-stacked-chart).
## What it does [#what-it-does]
This compatibility method behaves like `CreateStackedChart`. Creates a stacked chart from multiple named series. It is kept so scripts written with the older `AddStackedChart` name continue to work.
### When to use it [#when-to-use-it]
Use it to compare totals and their component parts across rows or categories. Prefer `CreateStackedChart` in new code so the method name matches the current API.
`ElementFunction:AddStackedChart(StackConfig)`
```luau
local Result = Section:AddStackedChart({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddStackedChart({
Name = "Example",
Callback = function(value)
print(value)
end,
Icon = "home", -- optional
Prefix = "Example", -- optional
Rows = { { Name = "Example", Value = 1 } }, -- optional
Series = { { Name = "Series", Values = { 25, 50, 75 } } }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `Series` | table | Yes | Named data series rendered together. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateStackedChart`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStat
> This compatibility method behaves like CreateStat. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older AddStat name continue to work.
Source: /docs/elements/compatibility-reference/add-stat
# `AddStat` [#addstat]
`AddStat` is an alternate name for `CreateStat`. New code can use [CreateStat](/docs/elements/data-reference/create-stat).
## What it does [#what-it-does]
This compatibility method behaves like `CreateStat`. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older `AddStat` name continue to work.
### When to use it [#when-to-use-it]
Use it for a single KPI that may change and should emphasize the new value. Prefer `CreateStat` in new code so the method name matches the current API.
`ElementFunction:AddStat(StatConfig)`
```luau
local Result = Section:AddStat({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddStat({
Name = "Example",
Callback = function(value)
print(value)
end,
Delta = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Delta` | number | Yes | Controls the delta value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateStat`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStatusTextbox
> This compatibility method behaves like AddStatusBox. Adds a larger status message with title, icon, variant, and custom height. It is kept so scripts written with the older AddStatusTextbox name continue to work.
Source: /docs/elements/compatibility-reference/add-status-textbox
# `AddStatusTextbox` [#addstatustextbox]
`AddStatusTextbox` is an alternate name for `AddStatusBox`. New code can use [AddStatusBox](/docs/elements/data-reference/add-status-box).
## What it does [#what-it-does]
This compatibility method behaves like `AddStatusBox`. Adds a larger status message with title, icon, variant, and custom height. It is kept so scripts written with the older `AddStatusTextbox` name continue to work.
### When to use it [#when-to-use-it]
Use it for errors, success states, connection health, or detailed system messages. Prefer `AddStatusBox` in new code so the method name matches the current API.
`ElementFunction:AddStatusTextbox(StatusConfig)`
```luau
local Result = Section:AddStatusTextbox({
Name = "Example",
})
```
```luau
local Result = Section:AddStatusTextbox({
Name = "Example",
Content = "Example content", -- optional
Description = "Example text", -- optional
Height = 240, -- optional
Icon = "home", -- optional
Kind = "Default", -- optional
Message = "Example text", -- optional
Status = "Default", -- optional
Text = "Example text", -- optional
Title = "Example", -- optional
Type = "Default", -- optional
Variant = "Default", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | -------------------------------------------------------------- |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Kind` | string | Yes | Semantic kind used to select presentation and behavior. |
| `Message` | string | Yes | Sets the message. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Status` | string | Yes | Current status label displayed by the element. |
| `Text` | string | Yes | Text displayed inside the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Type` | string | Yes | Named type or presentation style. |
| `Variant` | string | Yes | Visual or semantic variant such as success, warning, or error. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddStatusBox`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStatus
> This compatibility method behaves like AddStatusBox. Adds a larger status message with title, icon, variant, and custom height. It is kept so scripts written with the older AddStatus name continue to work.
Source: /docs/elements/compatibility-reference/add-status
# `AddStatus` [#addstatus]
`AddStatus` is an alternate name for `AddStatusBox`. New code can use [AddStatusBox](/docs/elements/data-reference/add-status-box).
## What it does [#what-it-does]
This compatibility method behaves like `AddStatusBox`. Adds a larger status message with title, icon, variant, and custom height. It is kept so scripts written with the older `AddStatus` name continue to work.
### When to use it [#when-to-use-it]
Use it for errors, success states, connection health, or detailed system messages. Prefer `AddStatusBox` in new code so the method name matches the current API.
`ElementFunction:AddStatus(StatusConfig)`
```luau
local Result = Section:AddStatus({
Name = "Example",
})
```
```luau
local Result = Section:AddStatus({
Name = "Example",
Content = "Example content", -- optional
Description = "Example text", -- optional
Height = 240, -- optional
Icon = "home", -- optional
Kind = "Default", -- optional
Message = "Example text", -- optional
Status = "Default", -- optional
Text = "Example text", -- optional
Title = "Example", -- optional
Type = "Default", -- optional
Variant = "Default", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | -------------------------------------------------------------- |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Kind` | string | Yes | Semantic kind used to select presentation and behavior. |
| `Message` | string | Yes | Sets the message. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Status` | string | Yes | Current status label displayed by the element. |
| `Text` | string | Yes | Text displayed inside the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Type` | string | Yes | Named type or presentation style. |
| `Variant` | string | Yes | Visual or semantic variant such as success, warning, or error. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddStatusBox`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStudioMeshTool
> This compatibility method behaves like AddStudioTool. Adds a Roblox Studio-style object or mesh tool with part and placement settings. It is kept so scripts written with the older AddStudioMeshTool name continue to work.
Source: /docs/elements/compatibility-reference/add-studio-mesh-tool
# `AddStudioMeshTool` [#addstudiomeshtool]
`AddStudioMeshTool` is an alternate name for `AddStudioTool`. New code can use [AddStudioTool](/docs/elements/advanced-reference/add-studio-tool).
## What it does [#what-it-does]
This compatibility method behaves like `AddStudioTool`. Adds a Roblox Studio-style object or mesh tool with part and placement settings. It is kept so scripts written with the older `AddStudioMeshTool` name continue to work.
### When to use it [#when-to-use-it]
Use it for controlled creation or editing workflows that target Roblox instances. Prefer `AddStudioTool` in new code so the method name matches the current API.
`ElementFunction:AddStudioMeshTool(ToolConfig)`
```luau
local Result = Section:AddStudioMeshTool({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddStudioMeshTool({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
Anchored = true, -- optional
ButtonColor = Color3.fromRGB(139, 92, 246), -- optional
CanCollide = true, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Grid = 1, -- optional
MeshId = "rbxassetid://0", -- optional
ParentPath = "XLQP/Example", -- optional
PartSize = 24, -- optional
PartType = "Default", -- optional
Path = "XLQP/Example", -- optional
TargetPath = "XLQP/Example", -- optional
TextureId = "rbxassetid://0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Anchored` | boolean | Yes | Turns anchored behavior on or off. |
| `ButtonColor` | Color3 | Yes | Sets the button color. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CanCollide` | boolean | Yes | Turns can collide behavior on or off. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Grid` | number | Yes | Controls the grid value. |
| `MeshId` | string or asset | Yes | Mesh asset used by the created part or preview. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ParentPath` | string | Yes | Sets the parent path. |
| `PartSize` | number | Yes | Controls the part size value. |
| `PartType` | varies | Yes | Optional part type setting accepted by this method. |
| `Path` | string | Yes | Sets the path. |
| `TargetPath` | string | Yes | Sets the target path. |
| `TextureId` | string or asset | Yes | Texture asset applied to the mesh or part. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddStudioTool`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStudioToolThing
> This compatibility method behaves like AddStudioTool. Adds a Roblox Studio-style object or mesh tool with part and placement settings. It is kept so scripts written with the older AddStudioToolThing name continue to work.
Source: /docs/elements/compatibility-reference/add-studio-tool-thing
# `AddStudioToolThing` [#addstudiotoolthing]
`AddStudioToolThing` is an alternate name for `AddStudioTool`. New code can use [AddStudioTool](/docs/elements/advanced-reference/add-studio-tool).
## What it does [#what-it-does]
This compatibility method behaves like `AddStudioTool`. Adds a Roblox Studio-style object or mesh tool with part and placement settings. It is kept so scripts written with the older `AddStudioToolThing` name continue to work.
### When to use it [#when-to-use-it]
Use it for controlled creation or editing workflows that target Roblox instances. Prefer `AddStudioTool` in new code so the method name matches the current API.
`ElementFunction:AddStudioToolThing(ToolConfig)`
```luau
local Result = Section:AddStudioToolThing({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddStudioToolThing({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
Anchored = true, -- optional
ButtonColor = Color3.fromRGB(139, 92, 246), -- optional
CanCollide = true, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Grid = 1, -- optional
MeshId = "rbxassetid://0", -- optional
ParentPath = "XLQP/Example", -- optional
PartSize = 24, -- optional
PartType = "Default", -- optional
Path = "XLQP/Example", -- optional
TargetPath = "XLQP/Example", -- optional
TextureId = "rbxassetid://0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Anchored` | boolean | Yes | Turns anchored behavior on or off. |
| `ButtonColor` | Color3 | Yes | Sets the button color. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CanCollide` | boolean | Yes | Turns can collide behavior on or off. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Grid` | number | Yes | Controls the grid value. |
| `MeshId` | string or asset | Yes | Mesh asset used by the created part or preview. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ParentPath` | string | Yes | Sets the parent path. |
| `PartSize` | number | Yes | Controls the part size value. |
| `PartType` | varies | Yes | Optional part type setting accepted by this method. |
| `Path` | string | Yes | Sets the path. |
| `TargetPath` | string | Yes | Sets the target path. |
| `TextureId` | string or asset | Yes | Texture asset applied to the mesh or part. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddStudioTool`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSupportedGames
> This compatibility method behaves like AddGameSession. Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution. It is kept so scripts written with the older AddSupportedGames name continue to work.
Source: /docs/elements/compatibility-reference/add-supported-games
# `AddSupportedGames` [#addsupportedgames]
`AddSupportedGames` is an alternate name for `AddGameSession`. New code can use [AddGameSession](/docs/elements/advanced-reference/add-game-session).
## What it does [#what-it-does]
This compatibility method behaves like `AddGameSession`. Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution. It is kept so scripts written with the older `AddSupportedGames` name continue to work.
### When to use it [#when-to-use-it]
Use it for multi-place hubs or tools that must preserve their loader across teleports and track recent sessions. Prefer `AddGameSession` in new code so the method name matches the current API.
`ElementFunction:AddSupportedGames(SessionConfig)`
```luau
local Result = Section:AddSupportedGames({
Name = "Example",
})
```
```luau
local Result = Section:AddSupportedGames({
Name = "Example",
AutoExecFile = true, -- optional
AutoExecFolder = true, -- optional
AutoExecName = true, -- optional
AutoExecute = true, -- optional
AutoExecuteFile = true, -- optional
AutoExecuteSource = true, -- optional
AutoExecuteUrl = true, -- optional
AutoReExecute = true, -- optional
GameIds = {}, -- optional
Games = {}, -- optional
Height = 240, -- optional
HistoryFile = "XLQP/Example", -- optional
HistoryLimit = 25, -- optional
IdType = "Default", -- optional
OnJoin = function(value) -- optional
print("OnJoin:", value)
end,
OnLeave = function(value) -- optional
print("OnLeave:", value)
end,
OnRejoin = function(value) -- optional
print("OnRejoin:", value)
end,
OnServerHop = function(value) -- optional
print("OnServerHop:", value)
end,
QueueSource = nil, -- optional
ReExecuteSource = nil, -- optional
ReExecuteUrl = "https://example.com", -- optional
SourceUrl = "https://example.com", -- optional
SupportedGameIds = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `AutoExecFile` | boolean | Yes | Turns auto exec file behavior on or off. |
| `AutoExecFolder` | boolean | Yes | Turns auto exec folder behavior on or off. |
| `AutoExecName` | boolean | Yes | Turns auto exec name behavior on or off. |
| `AutoExecute` | boolean | Yes | Turns auto execute behavior on or off. |
| `AutoExecuteFile` | boolean | Yes | Turns auto execute file behavior on or off. |
| `AutoExecuteSource` | boolean | Yes | Turns auto execute source behavior on or off. |
| `AutoExecuteUrl` | boolean | Yes | Turns auto execute url behavior on or off. |
| `AutoReExecute` | boolean | Yes | Turns auto re execute behavior on or off. |
| `GameIds` | table | Yes | Supplies the game ids collection. |
| `Games` | table | Yes | Supplies the games collection. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `HistoryFile` | string | Yes | Sets the history file. |
| `HistoryLimit` | number | Yes | Controls the history limit value. |
| `IdType` | varies | Yes | Optional id type setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OnJoin` | function | Yes | Runs for the on join event or decision. |
| `OnLeave` | function | Yes | Runs for the on leave event or decision. |
| `OnRejoin` | function | Yes | Runs for the on rejoin event or decision. |
| `OnServerHop` | function | Yes | Runs for the on server hop event or decision. |
| `QueueSource` | varies | Yes | Optional queue source setting accepted by this method. |
| `ReExecuteSource` | varies | Yes | Optional re execute source setting accepted by this method. |
| `ReExecuteUrl` | string | Yes | Sets the re execute url. |
| `SourceUrl` | string | Yes | Source URL used for approved loading or re-execution. |
| `SupportedGameIds` | table | Yes | Supplies the supported game ids collection. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddGameSession`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTable
> This compatibility method behaves like AddTableContents. Adds a structured table-content view with configurable columns and rows. It is kept so scripts written with the older AddTable name continue to work.
Source: /docs/elements/compatibility-reference/add-table
# `AddTable` [#addtable]
`AddTable` is an alternate name for `AddTableContents`. New code can use [AddTableContents](/docs/elements/navigation-reference/add-table-contents).
## What it does [#what-it-does]
This compatibility method behaves like `AddTableContents`. Adds a structured table-content view with configurable columns and rows. It is kept so scripts written with the older `AddTable` name continue to work.
### When to use it [#when-to-use-it]
Use it for tabular information that does not need the full searchable data-table behavior. Prefer `AddTableContents` in new code so the method name matches the current API.
`ElementFunction:AddTable(TableConfig)`
```luau
local Result = Section:AddTable({
Name = "Example",
})
```
```luau
local Result = Section:AddTable({
Name = "Example",
Columns = {{ Name = "Name", Key = "Name" }, { Name = "Value", Key = "Value" }}, -- optional
ConfigCloud = true, -- optional
ConfigCloudKey = "ExampleKey", -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Height = 240, -- optional
RowHeight = 240, -- optional
Rows = { { Name = "Example", Value = 1 } }, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Columns` | table | Yes | Column definitions used to lay out row data. |
| `ConfigCloud` | boolean | Yes | Turns config cloud behavior on or off. |
| `ConfigCloudKey` | varies | Yes | Optional config cloud key setting accepted by this method. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RowHeight` | number | Yes | Controls the row height value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddTableContents`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTheme
> This compatibility method behaves like RegisterTheme. Registers a named theme definition for later selection. It is kept so scripts written with the older AddTheme name continue to work.
Source: /docs/elements/compatibility-reference/add-theme
# `AddTheme` [#addtheme]
`AddTheme` is an alternate name for `RegisterTheme`. New code can use [RegisterTheme](/docs/elements/advanced-reference/register-theme).
## What it does [#what-it-does]
This compatibility method behaves like `RegisterTheme`. Registers a named theme definition for later selection. It is kept so scripts written with the older `AddTheme` name continue to work.
### When to use it [#when-to-use-it]
Use it to add a reusable custom color and style preset before applying it. Prefer `RegisterTheme` in new code so the method name matches the current API.
`XLQPGen1:AddTheme(name,ThemeConfig,applyNow)`
```luau
local Result = Library:AddTheme(
"Example",
{},
)
```
```luau
local Result = Library:AddTheme(
"Example",
{},
false, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------- |
| `name` | string | No | Name assigned to the created or registered object. |
| `ThemeConfig` | table | No | Theme colors and style values to register. |
| `applyNow` | boolean | Yes | Applies the theme immediately after registration. |
Exact signature:
```luau
XLQPGen1:AddTheme(name,ThemeConfig,applyNow)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `RegisterTheme`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddVinylPlayer
> This compatibility method behaves like AddDiscPlayer. Adds a disc-style audio player connected to a playlist or media controller. It is kept so scripts written with the older AddVinylPlayer name continue to work.
Source: /docs/elements/compatibility-reference/add-vinyl-player
# `AddVinylPlayer` [#addvinylplayer]
`AddVinylPlayer` is an alternate name for `AddDiscPlayer`. New code can use [AddDiscPlayer](/docs/elements/media-reference/add-disc-player).
## What it does [#what-it-does]
This compatibility method behaves like `AddDiscPlayer`. Adds a disc-style audio player connected to a playlist or media controller. It is kept so scripts written with the older `AddVinylPlayer` name continue to work.
### When to use it [#when-to-use-it]
Use it when you want music playback controls with a visual spinning-disc presentation. Prefer `AddDiscPlayer` in new code so the method name matches the current API.
`XLQPGen1:AddVinylPlayer(Config)`
```luau
local Result = Library:AddVinylPlayer({
Name = "Example",
})
```
```luau
local Result = Library:AddVinylPlayer({
Name = "Example",
AutoPlay = true, -- optional
Loop = true, -- optional
MediaPlayer = nil, -- optional
Playlist = {}, -- optional
Position = "TopLeft", -- optional
SpinSpeed = 1, -- optional
Volume = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ---------------------------------------------------------------- |
| `AutoPlay` | boolean | Yes | Starts playback automatically after creation. |
| `Loop` | boolean | Yes | Repeats playback after reaching the end. |
| `MediaPlayer` | varies | Yes | Optional media player setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Position` | string | Yes | Sets the position. |
| `SpinSpeed` | number | Yes | Controls the spin speed value. |
| `Volume` | number | Yes | Playback volume used by the media element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDiscPlayer`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateAccordion
> This compatibility method behaves like CreateFAQ. Creates an accordion-style list of questions and answers. It is kept so scripts written with the older CreateAccordion name continue to work.
Source: /docs/elements/compatibility-reference/create-accordion
# `CreateAccordion` [#createaccordion]
`CreateAccordion` is an alternate name for `CreateFAQ`. New code can use [CreateFAQ](/docs/elements/content-reference/create-faq).
## What it does [#what-it-does]
This compatibility method behaves like `CreateFAQ`. Creates an accordion-style list of questions and answers. It is kept so scripts written with the older `CreateAccordion` name continue to work.
### When to use it [#when-to-use-it]
Use it for help content where only one or a few answers should be expanded at a time. Prefer `CreateFAQ` in new code so the method name matches the current API.
`ElementFunction:CreateAccordion(FAQConfig)`
```luau
local Result = Section:CreateAccordion({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateAccordion({
Name = "Example",
Callback = function(value)
print(value)
end,
Exclusive = true, -- optional
Items = { "Item 1", "Item 2" }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Exclusive` | boolean | Yes | Turns exclusive behavior on or off. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateFAQ`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateAreaChart
> This compatibility method behaves like CreateChart. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older CreateAreaChart name continue to work.
Source: /docs/elements/compatibility-reference/create-area-chart
# `CreateAreaChart` [#createareachart]
`CreateAreaChart` is an alternate name for `CreateChart`. New code can use [CreateChart](/docs/elements/data-reference/create-chart).
## What it does [#what-it-does]
This compatibility method behaves like `CreateChart`. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older `CreateAreaChart` name continue to work.
### When to use it [#when-to-use-it]
Use it for trends, time series, or changing numeric values. Prefer `CreateChart` in new code so the method name matches the current API.
`ElementFunction:CreateAreaChart(ChartConfig)`
```luau
local Result = Section:CreateAreaChart({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateAreaChart({
Name = "Example",
Callback = function(value)
print(value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Dots = true, -- optional
Filled = true, -- optional
Height = 240, -- optional
Icon = "home", -- optional
MaxPoints = 100, -- optional
Points = { { Label = "A", Value = 25 }, { Label = "B", Value = 75 } }, -- optional
Prefix = "Example", -- optional
Smooth = true, -- optional
Suffix = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Dots` | boolean | Yes | Turns dots behavior on or off. |
| `Filled` | boolean | Yes | Turns filled behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `MaxPoints` | number | Yes | Controls the max points value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Smooth` | boolean | Yes | Turns smooth behavior on or off. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateChart`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateBanner
> This compatibility method behaves like AddBanner. Adds a prominent message surface with optional artwork and actions. It is kept so scripts written with the older CreateBanner name continue to work.
Source: /docs/elements/compatibility-reference/create-banner
# `CreateBanner` [#createbanner]
`CreateBanner` is an alternate name for `AddBanner`. New code can use [AddBanner](/docs/elements/content-reference/add-banner).
## What it does [#what-it-does]
This compatibility method behaves like `AddBanner`. Adds a prominent message surface with optional artwork and actions. It is kept so scripts written with the older `CreateBanner` name continue to work.
### When to use it [#when-to-use-it]
Use it for announcements, warnings, promotions, or any message that should stand out from normal page content. Prefer `AddBanner` in new code so the method name matches the current API.
`ElementFunction:CreateBanner(BannerConfig)`
```luau
local Result = Section:CreateBanner({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateBanner({
Name = "Example",
Callback = function(value)
print(value)
end,
ActionCallback = function(value) -- optional
print("ActionCallback:", value)
end,
Actions = {{ Name = "Confirm", Callback = function() end }}, -- optional
BackgroundImage = "rbxassetid://0", -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Height = 240, -- optional
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
ImageTransparency = 0.2, -- optional
ShadeTransparency = 0.2, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `ActionCallback` | function | Yes | Runs when the banner or action control is activated. |
| `Actions` | table | Yes | Supplies the actions collection. |
| `BackgroundImage` | varies | Yes | Optional background image setting accepted by this method. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `ImageTransparency` | number | Yes | Image transparency from 0 to 1. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ShadeTransparency` | number | Yes | Controls the shade transparency value. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddBanner`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateCooldownButton
> This compatibility method behaves like AddCooldownButton. Adds an action button that temporarily locks itself after activation. It is kept so scripts written with the older CreateCooldownButton name continue to work.
Source: /docs/elements/compatibility-reference/create-cooldown-button
# `CreateCooldownButton` [#createcooldownbutton]
`CreateCooldownButton` is an alternate name for `AddCooldownButton`. New code can use [AddCooldownButton](/docs/elements/controls-reference/add-cooldown-button).
## What it does [#what-it-does]
This compatibility method behaves like `AddCooldownButton`. Adds an action button that temporarily locks itself after activation. It is kept so scripts written with the older `CreateCooldownButton` name continue to work.
### When to use it [#when-to-use-it]
Use it to prevent rapid repeats for rate-limited actions, teleports, network calls, or expensive operations. Prefer `AddCooldownButton` in new code so the method name matches the current API.
`ElementFunction:CreateCooldownButton(CooldownConfig)`
```luau
local Result = Section:CreateCooldownButton({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateCooldownButton({
Name = "Example",
Callback = function(value)
print(value)
end,
ActionText = "Example text", -- optional
ButtonText = "Example text", -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Cooldown = 1, -- optional
CooldownText = "Example text", -- optional
Desc = "Example", -- optional
Description = "Example text", -- optional
Duration = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `ActionText` | string | Yes | Sets the action text. |
| `ButtonText` | string | Yes | Sets the button text. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Cooldown` | number | Yes | Seconds before the action can be used again. |
| `CooldownText` | string | Yes | Sets the cooldown text. |
| `Desc` | string | Yes | Short-form alias for the supporting description. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddCooldownButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateCopy
> This compatibility method behaves like CreateCopyButton. Creates a button that copies a configured value. It is kept so scripts written with the older CreateCopy name continue to work.
Source: /docs/elements/compatibility-reference/create-copy
# `CreateCopy` [#createcopy]
`CreateCopy` is an alternate name for `CreateCopyButton`. New code can use [CreateCopyButton](/docs/elements/controls-reference/create-copy-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCopyButton`. Creates a button that copies a configured value. It is kept so scripts written with the older `CreateCopy` name continue to work.
### When to use it [#when-to-use-it]
Use it beside codes, identifiers, commands, or URLs that users frequently copy. Prefer `CreateCopyButton` in new code so the method name matches the current API.
`ElementFunction:CreateCopy(CopyConfig)`
```luau
local Result = Section:CreateCopy({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateCopy({
Name = "Example",
Callback = function(value)
print(value)
end,
Description = "Example text", -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCopyButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateCustomTheme
> This compatibility method behaves like RegisterTheme. Registers a named theme definition for later selection. It is kept so scripts written with the older CreateCustomTheme name continue to work.
Source: /docs/elements/compatibility-reference/create-custom-theme
# `CreateCustomTheme` [#createcustomtheme]
`CreateCustomTheme` is an alternate name for `RegisterTheme`. New code can use [RegisterTheme](/docs/elements/advanced-reference/register-theme).
## What it does [#what-it-does]
This compatibility method behaves like `RegisterTheme`. Registers a named theme definition for later selection. It is kept so scripts written with the older `CreateCustomTheme` name continue to work.
### When to use it [#when-to-use-it]
Use it to add a reusable custom color and style preset before applying it. Prefer `RegisterTheme` in new code so the method name matches the current API.
`XLQPGen1:CreateCustomTheme(name,ThemeConfig,applyNow)`
```luau
local Result = Library:CreateCustomTheme(
"Example",
{},
)
```
```luau
local Result = Library:CreateCustomTheme(
"Example",
{},
false, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------- |
| `name` | string | No | Name assigned to the created or registered object. |
| `ThemeConfig` | table | No | Theme colors and style values to register. |
| `applyNow` | boolean | Yes | Applies the theme immediately after registration. |
Exact signature:
```luau
XLQPGen1:CreateCustomTheme(name,ThemeConfig,applyNow)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `RegisterTheme`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateDataTable
> This compatibility method behaves like AddDataTable. Adds a searchable row-and-column data table. It is kept so scripts written with the older CreateDataTable name continue to work.
Source: /docs/elements/compatibility-reference/create-data-table
# `CreateDataTable` [#createdatatable]
`CreateDataTable` is an alternate name for `AddDataTable`. New code can use [AddDataTable](/docs/elements/navigation-reference/add-data-table).
## What it does [#what-it-does]
This compatibility method behaves like `AddDataTable`. Adds a searchable row-and-column data table. It is kept so scripts written with the older `CreateDataTable` name continue to work.
### When to use it [#when-to-use-it]
Use it for structured records such as players, servers, inventory, logs, or configuration entries. Prefer `AddDataTable` in new code so the method name matches the current API.
`ElementFunction:CreateDataTable(TableConfig)`
```luau
local Result = Section:CreateDataTable({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateDataTable({
Name = "Example",
Callback = function(value)
print(value)
end,
Columns = {{ Name = "Name", Key = "Name" }, { Name = "Value", Key = "Value" }}, -- optional
EmptyText = "Example text", -- optional
Height = 240, -- optional
RowHeight = 240, -- optional
Rows = { { Name = "Example", Value = 1 } }, -- optional
SearchPlaceholder = nil, -- optional
Searchable = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Columns` | table | Yes | Column definitions used to lay out row data. |
| `EmptyText` | string | Yes | Sets the empty text. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RowHeight` | number | Yes | Controls the row height value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `SearchPlaceholder` | varies | Yes | Optional search placeholder setting accepted by this method. |
| `Searchable` | boolean | Yes | Shows filtering controls for the rendered data. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDataTable`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateDependencyBox
> This compatibility method behaves like AddDependencyBox. Adds content whose enabled or visible state depends on another control or predicate. It is kept so scripts written with the older CreateDependencyBox name continue to work.
Source: /docs/elements/compatibility-reference/create-dependency-box
# `CreateDependencyBox` [#createdependencybox]
`CreateDependencyBox` is an alternate name for `AddDependencyBox`. New code can use [AddDependencyBox](/docs/elements/controls-reference/add-dependency-box).
## What it does [#what-it-does]
This compatibility method behaves like `AddDependencyBox`. Adds content whose enabled or visible state depends on another control or predicate. It is kept so scripts written with the older `CreateDependencyBox` name continue to work.
### When to use it [#when-to-use-it]
Use it to reveal advanced settings only when their parent feature is enabled or a required value matches. Prefer `AddDependencyBox` in new code so the method name matches the current API.
`ElementFunction:CreateDependencyBox(DependencyConfig)`
```luau
local AdvancedDependency = Controls:CreateDependencyBox({
Name = "Advanced Dependency",
Dependency = UnlockAdvanced,
Value = true
})
```
```luau
local AdvancedDependency = Controls:CreateDependencyBox({
Name = "Advanced Dependency",
Dependency = UnlockAdvanced,
Value = true,
BackgroundTransparency = 0.2, -- optional
Dependencies = {}, -- optional
Element = nil, -- optional
Equals = nil, -- optional
Invert = true, -- optional
Mode = "Default", -- optional
Operator = nil, -- optional
Predicate = function(value) -- optional
print("Predicate:", value)
return true
end,
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------ | -------- | -------------------------------------------------------------- |
| `BackgroundTransparency` | number | Yes | Background transparency from 0 to 1. |
| `Dependencies` | table | Yes | Supplies the dependencies collection. |
| `Dependency` | varies | Yes | Optional dependency setting accepted by this method. |
| `Element` | varies | Yes | Optional element setting accepted by this method. |
| `Equals` | varies | Yes | Optional equals setting accepted by this method. |
| `Invert` | boolean | Yes | Turns invert behavior on or off. |
| `Mode` | string | Yes | Named operating mode that selects a behavior preset. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Operator` | varies | Yes | Optional operator setting accepted by this method. |
| `Predicate` | function | Yes | Runs for the predicate event or decision. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddDependencyBox`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateDownload
> This compatibility method behaves like CreateDownloadProgress. Creates a progress controller specialized for downloads and completion state. It is kept so scripts written with the older CreateDownload name continue to work.
Source: /docs/elements/compatibility-reference/create-download
# `CreateDownload` [#createdownload]
`CreateDownload` is an alternate name for `CreateDownloadProgress`. New code can use [CreateDownloadProgress](/docs/elements/data-reference/create-download-progress).
## What it does [#what-it-does]
This compatibility method behaves like `CreateDownloadProgress`. Creates a progress controller specialized for downloads and completion state. It is kept so scripts written with the older `CreateDownload` name continue to work.
### When to use it [#when-to-use-it]
Use it to show a timed or externally updated download operation. Prefer `CreateDownloadProgress` in new code so the method name matches the current API.
`ElementFunction:CreateDownload(DownloadConfig)`
```luau
local Result = Section:CreateDownload({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateDownload({
Name = "Example",
Callback = function(value)
print(value)
end,
Completed = true, -- optional
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Duration = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Completed` | boolean | Yes | Turns completed behavior on or off. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateDownloadProgress`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateExecutor
> This compatibility method behaves like executerthing. Creates the legacy script-executor interface exposed by the compatibility API. It is kept so scripts written with the older CreateExecutor name continue to work.
Source: /docs/elements/compatibility-reference/create-executor
# `CreateExecutor` [#createexecutor]
`CreateExecutor` is an alternate name for `executerthing`.
## What it does [#what-it-does]
This compatibility method behaves like `executerthing`. Creates the legacy script-executor interface exposed by the compatibility API. It is kept so scripts written with the older `CreateExecutor` name continue to work.
### When to use it [#when-to-use-it]
Use these names only when maintaining scripts that already depend on this legacy executor interface. For new code, use the documented `AddExecutor` constructor page and verify support in your current XLQP build.
`ElementFunction:CreateExecutor()`
```luau
local Result = Section:CreateExecutor()
```
```luau
local Result = Section:CreateExecutor()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
This method does not require a configuration table.
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `executerthing`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateFlip
> This compatibility method behaves like CreateFlipButton. Creates a two-sided button that flips between front and back content. It is kept so scripts written with the older CreateFlip name continue to work.
Source: /docs/elements/compatibility-reference/create-flip
# `CreateFlip` [#createflip]
`CreateFlip` is an alternate name for `CreateFlipButton`. New code can use [CreateFlipButton](/docs/elements/controls-reference/create-flip-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateFlipButton`. Creates a two-sided button that flips between front and back content. It is kept so scripts written with the older `CreateFlip` name continue to work.
### When to use it [#when-to-use-it]
Use it for reveal interactions or controls with two related faces. Prefer `CreateFlipButton` in new code so the method name matches the current API.
`ElementFunction:CreateFlip(FlipConfig)`
```luau
local Result = Section:CreateFlip({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateFlip({
Callback = function(value)
print(value)
end,
Back = nil, -- optional
Front = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Back` | varies | Yes | Optional back setting accepted by this method. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Front` | varies | Yes | Optional front setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateFlipButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateGameSession
> This compatibility method behaves like AddGameSession. Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution. It is kept so scripts written with the older CreateGameSession name continue to work.
Source: /docs/elements/compatibility-reference/create-game-session
# `CreateGameSession` [#creategamesession]
`CreateGameSession` is an alternate name for `AddGameSession`. New code can use [AddGameSession](/docs/elements/advanced-reference/add-game-session).
## What it does [#what-it-does]
This compatibility method behaves like `AddGameSession`. Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution. It is kept so scripts written with the older `CreateGameSession` name continue to work.
### When to use it [#when-to-use-it]
Use it for multi-place hubs or tools that must preserve their loader across teleports and track recent sessions. Prefer `AddGameSession` in new code so the method name matches the current API.
`ElementFunction:CreateGameSession(SessionConfig)`
```luau
local Result = Section:CreateGameSession({
Name = "Example",
})
```
```luau
local Result = Section:CreateGameSession({
Name = "Example",
AutoExecFile = true, -- optional
AutoExecFolder = true, -- optional
AutoExecName = true, -- optional
AutoExecute = true, -- optional
AutoExecuteFile = true, -- optional
AutoExecuteSource = true, -- optional
AutoExecuteUrl = true, -- optional
AutoReExecute = true, -- optional
GameIds = {}, -- optional
Games = {}, -- optional
Height = 240, -- optional
HistoryFile = "XLQP/Example", -- optional
HistoryLimit = 25, -- optional
IdType = "Default", -- optional
OnJoin = function(value) -- optional
print("OnJoin:", value)
end,
OnLeave = function(value) -- optional
print("OnLeave:", value)
end,
OnRejoin = function(value) -- optional
print("OnRejoin:", value)
end,
OnServerHop = function(value) -- optional
print("OnServerHop:", value)
end,
QueueSource = nil, -- optional
ReExecuteSource = nil, -- optional
ReExecuteUrl = "https://example.com", -- optional
SourceUrl = "https://example.com", -- optional
SupportedGameIds = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `AutoExecFile` | boolean | Yes | Turns auto exec file behavior on or off. |
| `AutoExecFolder` | boolean | Yes | Turns auto exec folder behavior on or off. |
| `AutoExecName` | boolean | Yes | Turns auto exec name behavior on or off. |
| `AutoExecute` | boolean | Yes | Turns auto execute behavior on or off. |
| `AutoExecuteFile` | boolean | Yes | Turns auto execute file behavior on or off. |
| `AutoExecuteSource` | boolean | Yes | Turns auto execute source behavior on or off. |
| `AutoExecuteUrl` | boolean | Yes | Turns auto execute url behavior on or off. |
| `AutoReExecute` | boolean | Yes | Turns auto re execute behavior on or off. |
| `GameIds` | table | Yes | Supplies the game ids collection. |
| `Games` | table | Yes | Supplies the games collection. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `HistoryFile` | string | Yes | Sets the history file. |
| `HistoryLimit` | number | Yes | Controls the history limit value. |
| `IdType` | varies | Yes | Optional id type setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OnJoin` | function | Yes | Runs for the on join event or decision. |
| `OnLeave` | function | Yes | Runs for the on leave event or decision. |
| `OnRejoin` | function | Yes | Runs for the on rejoin event or decision. |
| `OnServerHop` | function | Yes | Runs for the on server hop event or decision. |
| `QueueSource` | varies | Yes | Optional queue source setting accepted by this method. |
| `ReExecuteSource` | varies | Yes | Optional re execute source setting accepted by this method. |
| `ReExecuteUrl` | string | Yes | Sets the re execute url. |
| `SourceUrl` | string | Yes | Source URL used for approved loading or re-execution. |
| `SupportedGameIds` | table | Yes | Supplies the supported game ids collection. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddGameSession`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateHoverTag
> This compatibility method behaves like CreateCursorTag. Creates text that follows the pointer as a contextual cursor label. It is kept so scripts written with the older CreateHoverTag name continue to work.
Source: /docs/elements/compatibility-reference/create-hover-tag
# `CreateHoverTag` [#createhovertag]
`CreateHoverTag` is an alternate name for `CreateCursorTag`. New code can use [CreateCursorTag](/docs/elements/content-reference/create-cursor-tag).
## What it does [#what-it-does]
This compatibility method behaves like `CreateCursorTag`. Creates text that follows the pointer as a contextual cursor label. It is kept so scripts written with the older `CreateHoverTag` name continue to work.
### When to use it [#when-to-use-it]
Use it for tool modes, drag hints, or short pointer-adjacent instructions. Prefer `CreateCursorTag` in new code so the method name matches the current API.
`ElementFunction:CreateHoverTag(TagConfig)`
```luau
local Result = Section:CreateHoverTag({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateHoverTag({
Callback = function(value)
print(value)
end,
Height = 240, -- optional
Hint = "Example text", -- optional
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Hint` | string | Yes | Sets the hint. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateCursorTag`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateKeybindList
> This compatibility method behaves like CreateControlPanel. Creates a standalone control panel containing actions or state controls. It is kept so scripts written with the older CreateKeybindList name continue to work.
Source: /docs/elements/compatibility-reference/create-keybind-list
# `CreateKeybindList` [#createkeybindlist]
`CreateKeybindList` is an alternate name for `CreateControlPanel`. New code can use [CreateControlPanel](/docs/elements/navigation-reference/create-control-panel).
## What it does [#what-it-does]
This compatibility method behaves like `CreateControlPanel`. Creates a standalone control panel containing actions or state controls. It is kept so scripts written with the older `CreateKeybindList` name continue to work.
### When to use it [#when-to-use-it]
Use it for compact operational tools that should remain separate from a normal section. Prefer `CreateControlPanel` in new code so the method name matches the current API.
`XLQPGen1:CreateKeybindList(PanelConfig)`
```luau
local Panel = Library:CreateKeybindList({
Name = "ShortcutPanel",
Title = "Active shortcuts",
Icon = "keyboard",
Width = 300,
Height = 390,
Position = UDim2.new(1, -318, 0, 82),
Detached = true,
Pin = true,
Popout = true,
})
```
```luau
local Panel = Library:CreateKeybindList({
Name = "ShortcutPanel",
Title = "Active shortcuts",
Icon = "keyboard",
Width = 300,
Height = 390,
Position = UDim2.new(1, -318, 0, 82),
Detached = true,
Pin = true,
Popout = true,
Parent = workspace, -- optional
DockHeight = 240, -- optional
PopoutPosition = UDim2.fromOffset(320, 180), -- optional
LayoutOrder = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------------------------- | ------------ | -------- | ---------------------------------------------------- |
| `Name` | string | Yes | Stable panel identifier. |
| `Title` | string | Yes | Header text. Defaults to `"Keybind list"`. |
| `Icon` | string | Yes | Header icon. Defaults to `"list"`. |
| `Width` | number | Yes | Floating width. Defaults to `286`. |
| `Height` | number | Yes | Floating height. Defaults to `236`. |
| `Position` | UDim2 | Yes | Floating screen position. |
| `Parent` | Instance | Yes | Container used when the panel is docked. |
| `Detached` | boolean | Yes | Starts the panel as a floating surface when `true`. |
| `DockHeight` | number | Yes | Docked height, clamped from `120` to `620`. |
| `Pin` / `Pinnable` | boolean | Yes | Shows pin behavior. |
| `Popout` / `PopOut` / `Detachable` | boolean | Yes | Allows switching between docked and floating states. |
| `PopoutPosition` | UDim2 | Yes | Position used after popping the panel out. |
| `LayoutOrder` | number | Yes | Order inside a docked container. |
Exact signature:
```luau
XLQPGen1:CreateKeybindList(PanelConfig)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateControlPanel`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateKeybindPanel
> This compatibility method behaves like CreateControlPanel. Creates a standalone control panel containing actions or state controls. It is kept so scripts written with the older CreateKeybindPanel name continue to work.
Source: /docs/elements/compatibility-reference/create-keybind-panel
# `CreateKeybindPanel` [#createkeybindpanel]
`CreateKeybindPanel` is an alternate name for `CreateControlPanel`. New code can use [CreateControlPanel](/docs/elements/navigation-reference/create-control-panel).
## What it does [#what-it-does]
This compatibility method behaves like `CreateControlPanel`. Creates a standalone control panel containing actions or state controls. It is kept so scripts written with the older `CreateKeybindPanel` name continue to work.
### When to use it [#when-to-use-it]
Use it for compact operational tools that should remain separate from a normal section. Prefer `CreateControlPanel` in new code so the method name matches the current API.
`XLQPGen1:CreateKeybindPanel(PanelConfig)`
```luau
local Panel = Library:CreateKeybindPanel({
Name = "ShortcutPanel",
Title = "Active shortcuts",
Icon = "keyboard",
Width = 300,
Height = 390,
Position = UDim2.new(1, -318, 0, 82),
Detached = true,
Pin = true,
Popout = true,
})
```
```luau
local Panel = Library:CreateKeybindPanel({
Name = "ShortcutPanel",
Title = "Active shortcuts",
Icon = "keyboard",
Width = 300,
Height = 390,
Position = UDim2.new(1, -318, 0, 82),
Detached = true,
Pin = true,
Popout = true,
Parent = workspace, -- optional
DockHeight = 240, -- optional
PopoutPosition = UDim2.fromOffset(320, 180), -- optional
LayoutOrder = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------------------------- | ------------ | -------- | ---------------------------------------------------- |
| `Name` | string | Yes | Stable panel identifier. |
| `Title` | string | Yes | Header text. Defaults to `"Keybind list"`. |
| `Icon` | string | Yes | Header icon. Defaults to `"list"`. |
| `Width` | number | Yes | Floating width. Defaults to `286`. |
| `Height` | number | Yes | Floating height. Defaults to `236`. |
| `Position` | UDim2 | Yes | Floating screen position. |
| `Parent` | Instance | Yes | Container used when the panel is docked. |
| `Detached` | boolean | Yes | Starts the panel as a floating surface when `true`. |
| `DockHeight` | number | Yes | Docked height, clamped from `120` to `620`. |
| `Pin` / `Pinnable` | boolean | Yes | Shows pin behavior. |
| `Popout` / `PopOut` / `Detachable` | boolean | Yes | Allows switching between docked and floating states. |
| `PopoutPosition` | UDim2 | Yes | Position used after popping the panel out. |
| `LayoutOrder` | number | Yes | Order inside a docked container. |
Exact signature:
```luau
XLQPGen1:CreateKeybindPanel(PanelConfig)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateControlPanel`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateLabel
> This compatibility method behaves like AddLabel. Adds general-purpose text with optional wrapping, rich text, alignment, and icon styling. It is kept so scripts written with the older CreateLabel name continue to work.
Source: /docs/elements/compatibility-reference/create-label
# `CreateLabel` [#createlabel]
`CreateLabel` is an alternate name for `AddLabel`. New code can use [AddLabel](/docs/elements/content-reference/add-label).
## What it does [#what-it-does]
This compatibility method behaves like `AddLabel`. Adds general-purpose text with optional wrapping, rich text, alignment, and icon styling. It is kept so scripts written with the older `CreateLabel` name continue to work.
### When to use it [#when-to-use-it]
Use it for headings, captions, instructions, and static information that does not need interaction. Prefer `AddLabel` in new code so the method name matches the current API.
`ElementFunction:CreateLabel(LabelConfig)`
```luau
local FeatureLabel = Controls:CreateLabel({
Content = "XLQP Gen1 advanced element examples",
IsRich = true,
Icon = "sparkles",
Font = "GothamBold",
DoesWrap = true
})
```
```luau
local FeatureLabel = Controls:CreateLabel({
Content = "XLQP Gen1 advanced element examples",
IsRich = true,
Icon = "sparkles",
Font = "GothamBold",
DoesWrap = true,
BackgroundTransparency = 0.2, -- optional
Image = "rbxassetid://0", -- optional
Name = "Example", -- optional
RichText = true, -- optional
Size = UDim2.fromOffset(320, 180), -- optional
Text = "Example text", -- optional
TextSize = 24, -- optional
TextXAlignment = "Example text", -- optional
TextYAlignment = "Example text", -- optional
Visible = true, -- optional
Wrap = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------------- | -------- | -------------------------------------------------------- |
| `BackgroundTransparency` | number | Yes | Background transparency from 0 to 1. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DoesWrap` | boolean | Yes | Allows long text to wrap onto additional lines. |
| `Font` | string or Enum.Font | Yes | Font used for the displayed text. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `IsRich` | boolean | Yes | Enables Roblox rich-text rendering. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RichText` | boolean | Yes | Enables Roblox rich-text tags in displayed text. |
| `Size` | number or UDim2 | Yes | Explicit size used by the element. |
| `Text` | string | Yes | Text displayed inside the element. |
| `TextSize` | number | Yes | Size of normal text in pixels. |
| `TextXAlignment` | Enum.TextXAlignment | Yes | Horizontal alignment of displayed text. |
| `TextYAlignment` | Enum.TextYAlignment | Yes | Vertical alignment of displayed text. |
| `Visible` | boolean | Yes | Controls whether the element starts visible. |
| `Wrap` | boolean | Yes | Allows long text to wrap onto additional lines. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddLabel`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateLineChart
> This compatibility method behaves like CreateChart. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older CreateLineChart name continue to work.
Source: /docs/elements/compatibility-reference/create-line-chart
# `CreateLineChart` [#createlinechart]
`CreateLineChart` is an alternate name for `CreateChart`. New code can use [CreateChart](/docs/elements/data-reference/create-chart).
## What it does [#what-it-does]
This compatibility method behaves like `CreateChart`. Creates a configurable line or filled chart with a bounded point history. It is kept so scripts written with the older `CreateLineChart` name continue to work.
### When to use it [#when-to-use-it]
Use it for trends, time series, or changing numeric values. Prefer `CreateChart` in new code so the method name matches the current API.
`ElementFunction:CreateLineChart(ChartConfig)`
```luau
local Result = Section:CreateLineChart({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateLineChart({
Name = "Example",
Callback = function(value)
print(value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Dots = true, -- optional
Filled = true, -- optional
Height = 240, -- optional
Icon = "home", -- optional
MaxPoints = 100, -- optional
Points = { { Label = "A", Value = 25 }, { Label = "B", Value = 75 } }, -- optional
Prefix = "Example", -- optional
Smooth = true, -- optional
Suffix = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Dots` | boolean | Yes | Turns dots behavior on or off. |
| `Filled` | boolean | Yes | Turns filled behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `MaxPoints` | number | Yes | Controls the max points value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Smooth` | boolean | Yes | Turns smooth behavior on or off. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateChart`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateMetric
> This compatibility method behaves like CreateStat. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older CreateMetric name continue to work.
Source: /docs/elements/compatibility-reference/create-metric
# `CreateMetric` [#createmetric]
`CreateMetric` is an alternate name for `CreateStat`. New code can use [CreateStat](/docs/elements/data-reference/create-stat).
## What it does [#what-it-does]
This compatibility method behaves like `CreateStat`. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older `CreateMetric` name continue to work.
### When to use it [#when-to-use-it]
Use it for a single KPI that may change and should emphasize the new value. Prefer `CreateStat` in new code so the method name matches the current API.
`ElementFunction:CreateMetric(StatConfig)`
```luau
local Result = Section:CreateMetric({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateMetric({
Name = "Example",
Callback = function(value)
print(value)
end,
Delta = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Delta` | number | Yes | Controls the delta value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateStat`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateNumber
> This compatibility method behaves like CreateStat. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older CreateNumber name continue to work.
Source: /docs/elements/compatibility-reference/create-number
# `CreateNumber` [#createnumber]
`CreateNumber` is an alternate name for `CreateStat`. New code can use [CreateStat](/docs/elements/data-reference/create-stat).
## What it does [#what-it-does]
This compatibility method behaves like `CreateStat`. Creates an animated statistic with optional delta and duration. It is kept so scripts written with the older `CreateNumber` name continue to work.
### When to use it [#when-to-use-it]
Use it for a single KPI that may change and should emphasize the new value. Prefer `CreateStat` in new code so the method name matches the current API.
`ElementFunction:CreateNumber(StatConfig)`
```luau
local Result = Section:CreateNumber({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateNumber({
Name = "Example",
Callback = function(value)
print(value)
end,
Delta = 1, -- optional
Duration = 1, -- optional
Icon = "home", -- optional
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Delta` | number | Yes | Controls the delta value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateStat`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreatePlayerVisualizer
> This compatibility method behaves like AddPlayerVisualizer. Adds a visual player preview with optional overlay boxes and live coloring. It is kept so scripts written with the older CreatePlayerVisualizer name continue to work.
Source: /docs/elements/compatibility-reference/create-player-visualizer
# `CreatePlayerVisualizer` [#createplayervisualizer]
`CreatePlayerVisualizer` is an alternate name for `AddPlayerVisualizer`. New code can use [AddPlayerVisualizer](/docs/elements/data-reference/add-player-visualizer).
## What it does [#what-it-does]
This compatibility method behaves like `AddPlayerVisualizer`. Adds a visual player preview with optional overlay boxes and live coloring. It is kept so scripts written with the older `CreatePlayerVisualizer` name continue to work.
### When to use it [#when-to-use-it]
Use it for avatar previews, player-selection tools, or visual configuration panels. Prefer `AddPlayerVisualizer` in new code so the method name matches the current API.
`ElementFunction:CreatePlayerVisualizer(PlayerConfig)`
```luau
local Result = Section:CreatePlayerVisualizer({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreatePlayerVisualizer({
Name = "Example",
Callback = function(value)
print(value)
end,
BoxCallback = function(value) -- optional
print("BoxCallback:", value)
end,
Boxes = {}, -- optional
Height = 240, -- optional
LiveColor = true, -- optional
LiveColorSpeed = 1, -- optional
Player = game:GetService("Players").LocalPlayer, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `BoxCallback` | function | Yes | Runs when an overlay box or box item is used. |
| `Boxes` | table | Yes | Supplies the boxes collection. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `LiveColor` | boolean | Yes | Turns live color behavior on or off. |
| `LiveColorSpeed` | number | Yes | Controls the live color speed value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Player` | Player | Yes | Player represented by the visual element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddPlayerVisualizer`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateReadOnlyProgress
> This compatibility method behaves like CreateProgressBar. Creates a progress bar with explicit current value and display formatting. It is kept so scripts written with the older CreateReadOnlyProgress name continue to work.
Source: /docs/elements/compatibility-reference/create-read-only-progress
# `CreateReadOnlyProgress` [#createreadonlyprogress]
`CreateReadOnlyProgress` is an alternate name for `CreateProgressBar`. New code can use [CreateProgressBar](/docs/elements/data-reference/create-progress-bar).
## What it does [#what-it-does]
This compatibility method behaves like `CreateProgressBar`. Creates a progress bar with explicit current value and display formatting. It is kept so scripts written with the older `CreateReadOnlyProgress` name continue to work.
### When to use it [#when-to-use-it]
Use it for loading, completion, health, or quota values controlled by your script. Prefer `CreateProgressBar` in new code so the method name matches the current API.
`ElementFunction:CreateReadOnlyProgress(BarConfig)`
```luau
local Result = Section:CreateReadOnlyProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateReadOnlyProgress({
Name = "Example",
Callback = function(value)
print(value)
end,
CurrentValue = nil, -- optional
Description = "Example text", -- optional
Max = 100, -- optional
Min = 0, -- optional
Suffix = "Example", -- optional
ValueText = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `ValueText` | string | Yes | Custom display text for the current value. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateProgressBar`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateRipple
> This compatibility method behaves like CreateRippleButton. Creates a button with a ripple press effect. It is kept so scripts written with the older CreateRipple name continue to work.
Source: /docs/elements/compatibility-reference/create-ripple
# `CreateRipple` [#createripple]
`CreateRipple` is an alternate name for `CreateRippleButton`. New code can use [CreateRippleButton](/docs/elements/controls-reference/create-ripple-button).
## What it does [#what-it-does]
This compatibility method behaves like `CreateRippleButton`. Creates a button with a ripple press effect. It is kept so scripts written with the older `CreateRipple` name continue to work.
### When to use it [#when-to-use-it]
Use it for primary actions that benefit from clear animated click feedback. Prefer `CreateRippleButton` in new code so the method name matches the current API.
`ElementFunction:CreateRipple(RippleConfig)`
```luau
local Result = Section:CreateRipple({
Name = "Example",
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateRipple({
Name = "Example",
Callback = function(value)
print(value)
end,
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateRippleButton`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateRuntimeMonitor
> This compatibility method behaves like AddRuntimeMonitor. Adds an automatically refreshing set of runtime metrics. It is kept so scripts written with the older CreateRuntimeMonitor name continue to work.
Source: /docs/elements/compatibility-reference/create-runtime-monitor
# `CreateRuntimeMonitor` [#createruntimemonitor]
`CreateRuntimeMonitor` is an alternate name for `AddRuntimeMonitor`. New code can use [AddRuntimeMonitor](/docs/elements/data-reference/add-runtime-monitor).
## What it does [#what-it-does]
This compatibility method behaves like `AddRuntimeMonitor`. Adds an automatically refreshing set of runtime metrics. It is kept so scripts written with the older `CreateRuntimeMonitor` name continue to work.
### When to use it [#when-to-use-it]
Use it for FPS, ping, memory, task status, or custom diagnostics sampled on an interval. Prefer `AddRuntimeMonitor` in new code so the method name matches the current API.
`ElementFunction:CreateRuntimeMonitor(MonitorConfig)`
```luau
local Result = Section:CreateRuntimeMonitor({
Name = "Example",
})
```
```luau
local Result = Section:CreateRuntimeMonitor({
Name = "Example",
AutoStart = true, -- optional
Interval = 1, -- optional
Metrics = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ----------------------------------------------------- |
| `AutoStart` | boolean | Yes | Turns auto start behavior on or off. |
| `Interval` | number | Yes | Delay between automatic refreshes or samples. |
| `Metrics` | table | Yes | Metric definitions sampled by the monitor. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddRuntimeMonitor`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateScriptBlox
> This compatibility method behaves like AddScriptHub. Adds a searchable, sortable script catalog. It is kept so scripts written with the older CreateScriptBlox name continue to work.
Source: /docs/elements/compatibility-reference/create-script-blox
# `CreateScriptBlox` [#createscriptblox]
`CreateScriptBlox` is an alternate name for `AddScriptHub`. New code can use [AddScriptHub](/docs/elements/advanced-reference/add-script-hub).
## What it does [#what-it-does]
This compatibility method behaves like `AddScriptHub`. Adds a searchable, sortable script catalog. It is kept so scripts written with the older `CreateScriptBlox` name continue to work.
### When to use it [#when-to-use-it]
Use it to present an approved set of scripts or tools with metadata and cached images. Prefer `AddScriptHub` in new code so the method name matches the current API.
`ElementFunction:CreateScriptBlox(HubConfig)`
```luau
local Result = Section:CreateScriptBlox({
Name = "Example",
})
```
```luau
local Result = Section:CreateScriptBlox({
Name = "Example",
Collapsed = true, -- optional
Description = "Example text", -- optional
Icon = "home", -- optional
ImageCacheFolder = "rbxassetid://0", -- optional
MaxResults = 100, -- optional
Order = nil, -- optional
SortBy = nil, -- optional
Strict = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------------- |
| `Collapsed` | boolean | Yes | Turns collapsed behavior on or off. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ImageCacheFolder` | string | Yes | Sets the image cache folder. |
| `MaxResults` | number | Yes | Controls the max results value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Order` | varies | Yes | Optional order setting accepted by this method. |
| `SortBy` | varies | Yes | Optional sort by setting accepted by this method. |
| `Strict` | boolean | Yes | Turns strict behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddScriptHub`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateScriptHub
> This compatibility method behaves like AddScriptHub. Adds a searchable, sortable script catalog. It is kept so scripts written with the older CreateScriptHub name continue to work.
Source: /docs/elements/compatibility-reference/create-script-hub
# `CreateScriptHub` [#createscripthub]
`CreateScriptHub` is an alternate name for `AddScriptHub`. New code can use [AddScriptHub](/docs/elements/advanced-reference/add-script-hub).
## What it does [#what-it-does]
This compatibility method behaves like `AddScriptHub`. Adds a searchable, sortable script catalog. It is kept so scripts written with the older `CreateScriptHub` name continue to work.
### When to use it [#when-to-use-it]
Use it to present an approved set of scripts or tools with metadata and cached images. Prefer `AddScriptHub` in new code so the method name matches the current API.
`ElementFunction:CreateScriptHub(HubConfig)`
```luau
local Result = Section:CreateScriptHub({
Name = "Example",
})
```
```luau
local Result = Section:CreateScriptHub({
Name = "Example",
Collapsed = true, -- optional
Description = "Example text", -- optional
Icon = "home", -- optional
ImageCacheFolder = "rbxassetid://0", -- optional
MaxResults = 100, -- optional
Order = nil, -- optional
SortBy = nil, -- optional
Strict = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ------------ | -------- | ----------------------------------------------------------- |
| `Collapsed` | boolean | Yes | Turns collapsed behavior on or off. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ImageCacheFolder` | string | Yes | Sets the image cache folder. |
| `MaxResults` | number | Yes | Controls the max results value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Order` | varies | Yes | Optional order setting accepted by this method. |
| `SortBy` | varies | Yes | Optional sort by setting accepted by this method. |
| `Strict` | boolean | Yes | Turns strict behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddScriptHub`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateScrollIndicator
> This compatibility method behaves like CreateScrollHint. Creates a hint that can prompt or automatically perform a scroll action. It is kept so scripts written with the older CreateScrollIndicator name continue to work.
Source: /docs/elements/compatibility-reference/create-scroll-indicator
# `CreateScrollIndicator` [#createscrollindicator]
`CreateScrollIndicator` is an alternate name for `CreateScrollHint`. New code can use [CreateScrollHint](/docs/elements/content-reference/create-scroll-hint).
## What it does [#what-it-does]
This compatibility method behaves like `CreateScrollHint`. Creates a hint that can prompt or automatically perform a scroll action. It is kept so scripts written with the older `CreateScrollIndicator` name continue to work.
### When to use it [#when-to-use-it]
Use it when more content exists below the visible area and users may not notice it. Prefer `CreateScrollHint` in new code so the method name matches the current API.
`ElementFunction:CreateScrollIndicator(HintConfig)`
```luau
local Result = Section:CreateScrollIndicator({
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateScrollIndicator({
Callback = function(value)
print(value)
end,
AutoScroll = true, -- optional
AutoStart = true, -- optional
Icon = "home", -- optional
ScrollAmount = 1, -- optional
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `AutoScroll` | boolean | Yes | Turns auto scroll behavior on or off. |
| `AutoStart` | boolean | Yes | Turns auto start behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ScrollAmount` | number | Yes | Controls the scroll amount value. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateScrollHint`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateSection
> This compatibility method behaves like AddSection. Adds a titled container that groups elements on a tab or panel. It is kept so scripts written with the older CreateSection name continue to work.
Source: /docs/elements/compatibility-reference/create-section
# `CreateSection` [#createsection]
`CreateSection` is an alternate name for `AddSection`. New code can use [AddSection](/docs/elements/navigation-reference/add-section).
## What it does [#what-it-does]
This compatibility method behaves like `AddSection`. Adds a titled container that groups elements on a tab or panel. It is kept so scripts written with the older `CreateSection` name continue to work.
### When to use it [#when-to-use-it]
Use it as the normal parent for related controls, content, media, or data views. Prefer `AddSection` in new code so the method name matches the current API.
`ElementFunction:CreateSection(SectionConfig)`
```luau
LeftGroup:CreateSection("Scroll hint")
```
```luau
LeftGroup:CreateSection("Scroll hint")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddSection`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateSmoothToggle
> This compatibility method behaves like AddSmoothToggle. Adds an animated boolean toggle with optional live-color styling. It is kept so scripts written with the older CreateSmoothToggle name continue to work.
Source: /docs/elements/compatibility-reference/create-smooth-toggle
# `CreateSmoothToggle` [#createsmoothtoggle]
`CreateSmoothToggle` is an alternate name for `AddSmoothToggle`. New code can use [AddSmoothToggle](/docs/elements/controls-reference/add-smooth-toggle).
## What it does [#what-it-does]
This compatibility method behaves like `AddSmoothToggle`. Adds an animated boolean toggle with optional live-color styling. It is kept so scripts written with the older `CreateSmoothToggle` name continue to work.
### When to use it [#when-to-use-it]
Use it for on/off settings when you want a more expressive transition than a basic checkbox. Prefer `AddSmoothToggle` in new code so the method name matches the current API.
`ElementFunction:CreateSmoothToggle(SmoothConfig)`
```luau
local Result = Section:CreateSmoothToggle({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:CreateSmoothToggle({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Flag = "ExampleKey", -- optional
LiveColor = true, -- optional
LiveColorSpeed = 1, -- optional
LiveColorTheme = nil, -- optional
LiveColors = { Color3.fromRGB(139, 92, 246), Color3.fromRGB(59, 130, 246) }, -- optional
Save = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `LiveColor` | boolean | Yes | Turns live color behavior on or off. |
| `LiveColorSpeed` | number | Yes | Controls the live color speed value. |
| `LiveColorTheme` | varies | Yes | Optional live color theme setting accepted by this method. |
| `LiveColors` | table | Yes | Supplies the live colors collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddSmoothToggle`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateSupportedGames
> This compatibility method behaves like AddGameSession. Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution. It is kept so scripts written with the older CreateSupportedGames name continue to work.
Source: /docs/elements/compatibility-reference/create-supported-games
# `CreateSupportedGames` [#createsupportedgames]
`CreateSupportedGames` is an alternate name for `AddGameSession`. New code can use [AddGameSession](/docs/elements/advanced-reference/add-game-session).
## What it does [#what-it-does]
This compatibility method behaves like `AddGameSession`. Adds game-session controls for supported places, rejoining, server hopping, history, and queued re-execution. It is kept so scripts written with the older `CreateSupportedGames` name continue to work.
### When to use it [#when-to-use-it]
Use it for multi-place hubs or tools that must preserve their loader across teleports and track recent sessions. Prefer `AddGameSession` in new code so the method name matches the current API.
`ElementFunction:CreateSupportedGames(SessionConfig)`
```luau
local Result = Section:CreateSupportedGames({
Name = "Example",
})
```
```luau
local Result = Section:CreateSupportedGames({
Name = "Example",
AutoExecFile = true, -- optional
AutoExecFolder = true, -- optional
AutoExecName = true, -- optional
AutoExecute = true, -- optional
AutoExecuteFile = true, -- optional
AutoExecuteSource = true, -- optional
AutoExecuteUrl = true, -- optional
AutoReExecute = true, -- optional
GameIds = {}, -- optional
Games = {}, -- optional
Height = 240, -- optional
HistoryFile = "XLQP/Example", -- optional
HistoryLimit = 25, -- optional
IdType = "Default", -- optional
OnJoin = function(value) -- optional
print("OnJoin:", value)
end,
OnLeave = function(value) -- optional
print("OnLeave:", value)
end,
OnRejoin = function(value) -- optional
print("OnRejoin:", value)
end,
OnServerHop = function(value) -- optional
print("OnServerHop:", value)
end,
QueueSource = nil, -- optional
ReExecuteSource = nil, -- optional
ReExecuteUrl = "https://example.com", -- optional
SourceUrl = "https://example.com", -- optional
SupportedGameIds = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `AutoExecFile` | boolean | Yes | Turns auto exec file behavior on or off. |
| `AutoExecFolder` | boolean | Yes | Turns auto exec folder behavior on or off. |
| `AutoExecName` | boolean | Yes | Turns auto exec name behavior on or off. |
| `AutoExecute` | boolean | Yes | Turns auto execute behavior on or off. |
| `AutoExecuteFile` | boolean | Yes | Turns auto execute file behavior on or off. |
| `AutoExecuteSource` | boolean | Yes | Turns auto execute source behavior on or off. |
| `AutoExecuteUrl` | boolean | Yes | Turns auto execute url behavior on or off. |
| `AutoReExecute` | boolean | Yes | Turns auto re execute behavior on or off. |
| `GameIds` | table | Yes | Supplies the game ids collection. |
| `Games` | table | Yes | Supplies the games collection. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `HistoryFile` | string | Yes | Sets the history file. |
| `HistoryLimit` | number | Yes | Controls the history limit value. |
| `IdType` | varies | Yes | Optional id type setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `OnJoin` | function | Yes | Runs for the on join event or decision. |
| `OnLeave` | function | Yes | Runs for the on leave event or decision. |
| `OnRejoin` | function | Yes | Runs for the on rejoin event or decision. |
| `OnServerHop` | function | Yes | Runs for the on server hop event or decision. |
| `QueueSource` | varies | Yes | Optional queue source setting accepted by this method. |
| `ReExecuteSource` | varies | Yes | Optional re execute source setting accepted by this method. |
| `ReExecuteUrl` | string | Yes | Sets the re execute url. |
| `SourceUrl` | string | Yes | Source URL used for approved loading or re-execution. |
| `SupportedGameIds` | table | Yes | Supplies the supported game ids collection. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddGameSession`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateTable
> This compatibility method behaves like AddTableContents. Adds a structured table-content view with configurable columns and rows. It is kept so scripts written with the older CreateTable name continue to work.
Source: /docs/elements/compatibility-reference/create-table
# `CreateTable` [#createtable]
`CreateTable` is an alternate name for `AddTableContents`. New code can use [AddTableContents](/docs/elements/navigation-reference/add-table-contents).
## What it does [#what-it-does]
This compatibility method behaves like `AddTableContents`. Adds a structured table-content view with configurable columns and rows. It is kept so scripts written with the older `CreateTable` name continue to work.
### When to use it [#when-to-use-it]
Use it for tabular information that does not need the full searchable data-table behavior. Prefer `AddTableContents` in new code so the method name matches the current API.
`ElementFunction:CreateTable(TableConfig)`
```luau
local Result = Section:CreateTable({
Name = "Example",
})
```
```luau
local Result = Section:CreateTable({
Name = "Example",
Columns = {{ Name = "Name", Key = "Name" }, { Name = "Value", Key = "Value" }}, -- optional
ConfigCloud = true, -- optional
ConfigCloudKey = "ExampleKey", -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
Height = 240, -- optional
RowHeight = 240, -- optional
Rows = { { Name = "Example", Value = 1 } }, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Columns` | table | Yes | Column definitions used to lay out row data. |
| `ConfigCloud` | boolean | Yes | Turns config cloud behavior on or off. |
| `ConfigCloudKey` | varies | Yes | Optional config cloud key setting accepted by this method. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RowHeight` | number | Yes | Controls the row height value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `AddTableContents`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateTheme
> This compatibility method behaves like RegisterTheme. Registers a named theme definition for later selection. It is kept so scripts written with the older CreateTheme name continue to work.
Source: /docs/elements/compatibility-reference/create-theme
# `CreateTheme` [#createtheme]
`CreateTheme` is an alternate name for `RegisterTheme`. New code can use [RegisterTheme](/docs/elements/advanced-reference/register-theme).
## What it does [#what-it-does]
This compatibility method behaves like `RegisterTheme`. Registers a named theme definition for later selection. It is kept so scripts written with the older `CreateTheme` name continue to work.
### When to use it [#when-to-use-it]
Use it to add a reusable custom color and style preset before applying it. Prefer `RegisterTheme` in new code so the method name matches the current API.
`XLQPGen1:CreateTheme(name,ThemeConfig,applyNow)`
```luau
local Result = Library:CreateTheme(
"Example",
{},
)
```
```luau
local Result = Library:CreateTheme(
"Example",
{},
false, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------- |
| `name` | string | No | Name assigned to the created or registered object. |
| `ThemeConfig` | table | No | Theme colors and style values to register. |
| `applyNow` | boolean | Yes | Applies the theme immediately after registration. |
Exact signature:
```luau
XLQPGen1:CreateTheme(name,ThemeConfig,applyNow)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `RegisterTheme`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateWindow
> This compatibility method behaves like MakeWindow. Creates the main XLQP window and initializes its configured appearance, navigation, loading, security, and persistence features. It is kept so scripts written with the older CreateWindow name continue to work.
Source: /docs/elements/compatibility-reference/create-window
# `CreateWindow` [#createwindow]
`CreateWindow` is an alternate name for `MakeWindow`. New code can use [MakeWindow](/docs/elements/navigation-reference/make-window).
## What it does [#what-it-does]
This compatibility method behaves like `MakeWindow`. Creates the main XLQP window and initializes its configured appearance, navigation, loading, security, and persistence features. It is kept so scripts written with the older `CreateWindow` name continue to work.
### When to use it [#when-to-use-it]
Use it once near the start of your script, then keep the returned window to build tabs and control window state. Prefer `MakeWindow` in new code so the method name matches the current API.
`XLQPGen1:CreateWindow(config)`
```luau
local Window = Library:CreateWindow({
Branding = {
Name = "My Hub",
Subtitle = "Powered by XLQP Gen1",
Icon = "home",
},
Config = {
Enabled = true,
Folder = "MyHub",
},
Appearance = {
LiquidGlass = true,
CornerRadius = 18,
GifBackgroundEnabled = false,
GifBackgroundUrl = "",
GifBackgroundTransparency = 0.2,
Size = UDim2.new(0, 860, 0, 560),
},
Loading = {
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Loading...",
IntroDuration = 0.8,
FastLoad = true,
},
Behavior = {
ToggleKey = Enum.KeyCode.RightShift,
UnlockMouse = true,
},
Navigation = {
Enabled = true,
SidebarTab = true,
},
Security = {
AntiLogger = true,
Mode = "Better",
},
})
```
```luau
local Window = Library:CreateWindow({
Branding = {
Name = "My Hub",
Subtitle = "Powered by XLQP Gen1",
Icon = "home",
},
Config = {
Enabled = true,
Folder = "MyHub",
},
Appearance = {
LiquidGlass = true,
CornerRadius = 18,
GifBackgroundEnabled = false,
GifBackgroundUrl = "",
GifBackgroundTransparency = 0.2,
Size = UDim2.new(0, 860, 0, 560),
},
Loading = {
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Loading...",
IntroDuration = 0.8,
FastLoad = true,
},
Behavior = {
ToggleKey = Enum.KeyCode.RightShift,
UnlockMouse = true,
},
Navigation = {
Enabled = true,
SidebarTab = true,
},
Security = {
AntiLogger = true,
Mode = "Better",
},
Typewriter = {}, -- optional
Discord = {}, -- optional
BuiltInTabs = {}, -- optional
KeySystem = {}, -- optional
SearchBar = {}, -- optional
PluginsEnabled = true, -- optional
PluginsFolder = "XLQP/Example", -- optional
PrebuiltPlugins = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Group / field | Type / value | Optional | What it controls |
| ----------------------------------------- | -------------- | -------- | -------------------------------------------------------------------------------------------- |
| `Branding` | table | Yes | Name, subtitle, icon, intro text, and tags. |
| `Config` | table | Yes | Saved-state settings such as `Enabled` and `Folder`. |
| `Appearance` | table | Yes | Size, surfaces, static or animated GIF background, cursor, sidebar, and live-color settings. |
| `Loading` | table | Yes | Intro, progress, timing, and performance settings. |
| `Behavior` | table | Yes | Toggle key, mouse, guide, and editable-element behavior. |
| `Navigation` | table | Yes | Sidebar layout, tab list, logo, and initial tabs. |
| `Typewriter` | table | Yes | Animated branding text and sound. |
| `Discord` | table | Yes | Invite and optional authentication behavior. |
| `Security` | table | Yes | Anti Logger policy; separate from early-load Secure Mode. |
| `BuiltInTabs` | table | Yes | Settings, Security, and optional PVP pages. |
| `KeySystem` | table | Yes | Optional key-gate configuration. |
| `SearchBar` | table | Yes | Search behavior and header layout. |
| `PluginsEnabled` | boolean | Yes | Enables plugin discovery. |
| `PluginsFolder` | string | Yes | Local plugin folder. |
| `PrebuiltPlugins` | table | Yes | Plugin definitions registered at startup. |
| `LoadingTitle` / `LoadingTasks` | string / table | Yes | Top-level loading labels. |
| `GlowEnabled` / `GlowSpeed` / `GlowColor` | varies | Yes | Ambient window glow. |
See [Window configuration](/docs/window) for every nested field and default.
Exact signature:
```luau
XLQPGen1:CreateWindow(config)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `MakeWindow`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakeLoading
> This compatibility method behaves like CreateLoading. Creates a loading controller for stages, tasks, progress, and closing the loading UI. It is kept so scripts written with the older MakeLoading name continue to work.
Source: /docs/elements/compatibility-reference/make-loading
# `MakeLoading` [#makeloading]
`MakeLoading` is an alternate name for `CreateLoading`. New code can use [CreateLoading](/docs/elements/navigation-reference/create-loading).
## What it does [#what-it-does]
This compatibility method behaves like `CreateLoading`. Creates a loading controller for stages, tasks, progress, and closing the loading UI. It is kept so scripts written with the older `MakeLoading` name continue to work.
### When to use it [#when-to-use-it]
Use it when startup work should be reported to the user before the main interface is ready. Prefer `CreateLoading` in new code so the method name matches the current API.
`XLQPGen1:MakeLoading(LoadingConfig)`
```luau
local Loading = Library:MakeLoading({
Name = "My Hub",
HeaderSubtitle = "Module loader",
Icon = "loader",
StageTitle = "Loading modules...",
CurrentStep = "Preparing interface...",
Progress = 0.08,
Tasks = {
"Creating navigation",
"Loading themes",
"Building interface",
"Finalizing",
},
TaskIndex = 1,
Hint = "Modules are prepared and verified in order.",
HideInterface = true,
LoadingProgress = true,
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Starting interface",
IntroIcon = "home",
IntroDuration = 0.8,
})
Loading:SetTask(2, "Loading themes...", 0.5)
Loading:Close()
```
```luau
local Loading = Library:MakeLoading({
Name = "My Hub",
HeaderSubtitle = "Module loader",
Icon = "loader",
StageTitle = "Loading modules...",
CurrentStep = "Preparing interface...",
Progress = 0.08,
Tasks = {
"Creating navigation",
"Loading themes",
"Building interface",
"Finalizing",
},
TaskIndex = 1,
Hint = "Modules are prepared and verified in order.",
HideInterface = true,
LoadingProgress = true,
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Starting interface",
IntroIcon = "home",
IntroDuration = 0.8,
IntroAccentColor = Color3.fromRGB(139, 92, 246), -- optional
})
Loading:SetTask(2, "Loading themes...", 0.5)
Loading:Close()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------ | -------- | ---------------------------------------------------------------- |
| `Name` | string | Yes | Loading-card name. Defaults to `"XLQP Gen1"`. |
| `HeaderSubtitle` | string | Yes | Small text below the card name. |
| `Icon` | string | Yes | Loading-card icon. |
| `StageTitle` | string | Yes | Current stage heading. |
| `CurrentStep` / `Step` | string | Yes | Current task text. |
| `Progress` | number | Yes | Initial progress from `0` to `1`. |
| `Tasks` / `Modules` | table | Yes | Ordered task labels. |
| `TaskIndex` | number | Yes | Initially selected task. |
| `Hint` | string | Yes | Supporting hint below progress. |
| `HideInterface` | boolean | Yes | Hides the main XLQP interface while loading. Defaults to `true`. |
| `LoadingProgress` | boolean | Yes | Shows progress and task state. |
| `IntroEnabled` / `Intro` | boolean | Yes | Enables the opening intro. |
| `IntroText` | string | Yes | Intro heading. |
| `IntroSubtitle` | string | Yes | Intro supporting text. |
| `IntroIcon` | string | Yes | Intro icon. |
| `IntroAccentColor` | Color3 | Yes | Intro icon accent color. |
| `IntroDuration` | number | Yes | Intro animation duration in seconds. |
Exact signature:
```luau
XLQPGen1:MakeLoading(LoadingConfig)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreateLoading`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakePanel
> This compatibility method behaves like CreatePanel. Creates a standalone panel surface. It is kept so scripts written with the older MakePanel name continue to work.
Source: /docs/elements/compatibility-reference/make-panel
# `MakePanel` [#makepanel]
`MakePanel` is an alternate name for `CreatePanel`. New code can use [CreatePanel](/docs/elements/navigation-reference/create-panel).
## What it does [#what-it-does]
This compatibility method behaves like `CreatePanel`. Creates a standalone panel surface. It is kept so scripts written with the older `MakePanel` name continue to work.
### When to use it [#when-to-use-it]
Use it for auxiliary content or tools that should not live directly inside the normal tab hierarchy. Prefer `CreatePanel` in new code so the method name matches the current API.
`XLQPGen1:MakePanel(panelName,PanelConfig)`
```luau
local Result = Library:MakePanel(
"Example Panel",
)
```
```luau
local Result = Library:MakePanel(
"Example Panel",
{}, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------ |
| `panelName` | string | No | Visible name of the panel. |
| `PanelConfig` | table | Yes | Optional panel appearance and behavior settings. |
Exact signature:
```luau
XLQPGen1:MakePanel(panelName,PanelConfig)
```
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreatePanel`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakePopup
> This compatibility method behaves like CreatePopup. Creates a modal popup with a title, description, and action options. It is kept so scripts written with the older MakePopup name continue to work.
Source: /docs/elements/compatibility-reference/make-popup
# `MakePopup` [#makepopup]
`MakePopup` is an alternate name for `CreatePopup`. New code can use [CreatePopup](/docs/elements/navigation-reference/create-popup).
## What it does [#what-it-does]
This compatibility method behaves like `CreatePopup`. Creates a modal popup with a title, description, and action options. It is kept so scripts written with the older `MakePopup` name continue to work.
### When to use it [#when-to-use-it]
Use it for confirmations, decisions, warnings, or short blocking workflows. Prefer `CreatePopup` in new code so the method name matches the current API.
`XLQPGen1:MakePopup(PopupConfig)`
```luau
local Popup = Library:MakePopup({
Title = "Save changes?",
Description = "Choose whether to keep the current settings.",
OutsideClickDismiss = false,
DimBackground = true,
Options = {
{
Text = "Save",
Variant = "Primary",
Value = true,
Callback = function()
print("Settings saved")
end,
},
{
Text = "Cancel",
Variant = "Secondary",
Value = false,
},
},
})
```
```luau
local Popup = Library:MakePopup({
Title = "Save changes?",
Description = "Choose whether to keep the current settings.",
OutsideClickDismiss = false,
DimBackground = true,
Options = {
{
Text = "Save",
Variant = "Primary",
Value = true,
Callback = function()
print("Settings saved")
end,
},
{
Text = "Cancel",
Variant = "Secondary",
Value = false,
},
},
Content = "Example content", -- optional
AutoDismiss = true, -- optional
BackgroundTransparency = 0.2, -- optional
OverlayColor = Color3.fromRGB(139, 92, 246), -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------ | -------- | -------------------------------------------------------------- |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Content` | string | Yes | Alias for popup description text. |
| `Options` | table | Yes | Selectable choices or action definitions shown by the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Name` / `Id` | string | Yes | Stable popup identifier and title fallback. |
| `AutoDismiss` | boolean | Yes | Closes after an option unless explicitly disabled. |
| `OutsideClickDismiss` | boolean | Yes | Allows outside clicks to dismiss the popup. |
| `DimBackground` | boolean | Yes | Dims the interface behind the popup. |
| `BackgroundTransparency` | number | Yes | Popup background transparency. |
| `OverlayColor` | Color3 | Yes | Color of the dimmed overlay. |
## Behavior and return value [#behavior-and-return-value]
This alias forwards to `CreatePopup`, so its options, callbacks, and returned value follow the canonical method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddBadge
> Adds a small colored label for status, category, or emphasis.
Source: /docs/elements/content-reference/add-badge
# `AddBadge` [#addbadge]
## What it does [#what-it-does]
Adds a small colored label for status, category, or emphasis.
### When to use it [#when-to-use-it]
Use it to mark states such as Beta, New, Online, or Premium without adding a full content card.
`ElementFunction:AddBadge(BadgeConfig)`
```luau
Visuals:AddBadge({
Name = "Preview",
Text = "Live",
Color = Color3.fromRGB(73, 230, 133)
})
```
```luau
Visuals:AddBadge({
Name = "Preview",
Text = "Live",
Color = Color3.fromRGB(73, 230, 133),
Content = "Example content", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | --------------- | -------- | ------------------------------------------------------ |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddBanner
> Adds a prominent message surface with optional artwork and actions.
Source: /docs/elements/content-reference/add-banner
# `AddBanner` [#addbanner]
## What it does [#what-it-does]
Adds a prominent message surface with optional artwork and actions.
### When to use it [#when-to-use-it]
Use it for announcements, warnings, promotions, or any message that should stand out from normal page content.
`ElementFunction:AddBanner(BannerConfig)`
```luau
Controls:AddBanner({
Name = "Developer Toolkit",
Content = "Quick access to previews, tools and layout controls.",
Image = "https://wallpapercave.com/wp/wp4575207.jpg",
ImageTransparency = 0.05,
Icon = "sparkles",
Height = 118,
Actions = {
{Name = "Preview", Icon = "eye", IconOnly = true, Callback = function() print("Preview") end},
{Name = "Tools", Icon = "pickaxe", IconOnly = true, Callback = function() print("Tools") end},
{Name = "Expand tabs", Icon = "panel-left-open", IconOnly = true, Callback = function() Window:SetSidebarCollapsed(false) end},
{Name = "Collapse tabs", Icon = "panel-left-close", IconOnly = true, Callback = function() Window:SetSidebarCollapsed(true) end}
}
})
```
```luau
Controls:AddBanner({
Name = "Developer Toolkit",
Content = "Quick access to previews, tools and layout controls.",
Image = "https://wallpapercave.com/wp/wp4575207.jpg",
ImageTransparency = 0.05,
Icon = "sparkles",
Height = 118,
Actions = {
{Name = "Preview", Icon = "eye", IconOnly = true, Callback = function() print("Preview") end},
{Name = "Tools", Icon = "pickaxe", IconOnly = true, Callback = function() print("Tools") end},
{Name = "Expand tabs", Icon = "panel-left-open", IconOnly = true, Callback = function() Window:SetSidebarCollapsed(false) end},
{Name = "Collapse tabs", Icon = "panel-left-close", IconOnly = true, Callback = function() Window:SetSidebarCollapsed(true) end}
},
ActionCallback = function(value) -- optional
print("ActionCallback:", value)
end,
BackgroundImage = "rbxassetid://0", -- optional
Callback = function(value) -- optional
print("Callback:", value)
end,
Description = "Example text", -- optional
ShadeTransparency = 0.2, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `ActionCallback` | function | Yes | Runs when the banner or action control is activated. |
| `Actions` | table | Yes | Supplies the actions collection. |
| `BackgroundImage` | varies | Yes | Optional background image setting accepted by this method. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `ImageTransparency` | number | Yes | Image transparency from 0 to 1. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ShadeTransparency` | number | Yes | Controls the shade transparency value. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCards
> Adds a responsive card grid with optional colors, tags, and actions.
Source: /docs/elements/content-reference/add-cards
# `AddCards` [#addcards]
## What it does [#what-it-does]
Adds a responsive card grid. Each item can show a title, description, color, tag, and action button.
### When to use it [#when-to-use-it]
Use it for feature lists, targets, dashboards, or any compact collection of clickable cards.
`ElementFunction:AddCards(CardsConfig)`
```luau
Megalodon:AddCards({
Name = "Hunt Targets",
Items = {
{Title = "Megalodon", Description = "Rare spawn near the trench.", ButtonText = "Track"},
{Title = "Great White", Description = "Common in open water.", ButtonText = "Track"}
}
})
```
```luau
Megalodon:AddCards({
Name = "Hunt Targets",
Columns = 2,
CardHeight = 124,
ShowTitle = true,
Items = {
{Title = "Megalodon", Description = "Rare spawn near the trench.", Color = "Indigo", ButtonText = "Track", Tag = {Text = "RARE", Variant = "New"}, Callback = function(card) print(card.Title) end},
{Title = "Great White", Description = "Common in open water.", Color = "Sky", ButtonText = "Track"},
{Title = "Hammerhead", Description = "Shallow reefs at night.", Color = "Teal", ButtonText = "Track"},
{Title = "Owner Card", Description = "Only visible to the LockedTo list.", Color = "Rose", LockedTo = {12376412}, ButtonText = "Secret"}
},
Callback = function(card)
print("card selected", card.Title)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------------ | --------------- | -------- | ------------------------------------ |
| `Name` | string | Yes | Card-grid heading. |
| `Items` / `Cards` | table | Yes | Card definitions to render. |
| `Columns` | number (1–4) | Yes | Number of grid columns. |
| `CardHeight` | number | Yes | Card height in pixels. |
| `ShowTitle` | boolean | Yes | Shows or hides the grid heading. |
| `Callback` | function | Yes | Runs when a card action is selected. |
| Item `Title` | string | Yes | Card title. |
| Item `Description` / `Content` | string | Yes | Supporting card text. |
| Item `Color` | color value | Yes | Card accent color. |
| Item `Image` | string or asset | Yes | Card image or Roblox asset. |
| Item `ButtonText` | string | Yes | Action button label. |
| Item `Tag` | table | Yes | Tag shown on the card. |
## Behavior and return value [#behavior-and-return-value]
The returned card controller exposes the created card collection and is registered for normal XLQP updates and cleanup.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddChangelogParagraph
> Adds a clickable changelog paragraph with entries that can focus other elements.
Source: /docs/elements/content-reference/add-changelog-paragraph
# `AddChangelogParagraph` [#addchangelogparagraph]
## What it does [#what-it-does]
Adds a changelog paragraph with structured entries. Entries can call a callback or jump to another element with Goto, GoTo, Redirect, Target, or Element.
`ElementFunction:AddChangelogParagraph(ChangeConfig)`
```luau
TagsTab:AddChangelogParagraph({
Name = "Changelog",
Content = "Recent updates",
Entries = {
{Text = "Added a toggle", Description = "New setting available."},
{Text = "Fixed a bug", Description = "Safer loading."}
}
})
```
```luau
TagsTab:AddChangelogParagraph({
Name = "Changelog",
Content = "Every entry can focus its related element.",
RichText = true,
Color = "Blue",
Accent = "#8b5cf6",
Entries = {
{
Text = "Added Enable Feature",
Description = "Click to jump to the toggle.",
Goto = function() return NewFeatureToggle end,
Tag = {Text = "NEW", Variant = "New"},
Icon = "sparkles",
FocusOptions = {OpenSections = true, Scroll = true}
}
},
Callback = function(entry)
print("entry clicked", entry.Text)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------------------------------------------------- | ------------------------------- | -------- | -------------------------------------------- |
| `Name` | string | Yes | Heading. |
| `Content` / `Description` / `Desc` | string | Yes | Introductory text. |
| `Entries` / `Logs` / `Items` | table | Yes | Changelog entry definitions. |
| `RichText` | boolean | Yes | Enables rich text rendering where supported. |
| `Color` / `Accent` | color value | Yes | Changelog accent. |
| `Callback` | function | Yes | Runs when an entry is selected. |
| Entry `Text` | string | Yes | Entry title. |
| Entry `Description` | string | Yes | Entry details. |
| Entry `Goto` / `GoTo` / `Redirect` / `Target` / `Element` | function, string, or controller | Yes | Target to focus when selected. |
| Entry `Tag` | table | Yes | Entry tag configuration. |
| Entry `Icon` | string | Yes | Entry icon. |
| Entry `FocusOptions` | table | Yes | Focus and scroll behavior. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller if entries need to be refreshed or inspected later.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Full example](/docs/examples)
---
# AddChangelog
> Adds a structured list of releases, changes, or dated updates.
Source: /docs/elements/content-reference/add-changelog
# `AddChangelog` [#addchangelog]
## What it does [#what-it-does]
Adds a structured list of releases, changes, or dated updates.
### When to use it [#when-to-use-it]
Use it to show version history inside the interface instead of maintaining a plain text paragraph.
`ElementFunction:AddChangelog(ChangeConfig)`
```luau
RightGroup:AddChangelog({
Name = "Group Changelog",
Content = "Reusable changelog element.",
Logs = {
"Discord paragraph support",
"Discord image card",
"Changelog element"
}
})
```
```luau
RightGroup:AddChangelog({
Name = "Group Changelog",
Content = "Reusable changelog element.",
Logs = {
"Discord paragraph support",
"Discord image card",
"Changelog element"
},
Height = 240, -- optional
Items = { "Item 1", "Item 2" }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | --------------- | -------- | ------------------------------------------------------ |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Logs` | table | Yes | Supplies the logs collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCode
> Adds a formatted source-code or response block.
Source: /docs/elements/content-reference/add-code
# `AddCode` [#addcode]
## What it does [#what-it-does]
Adds a formatted source-code or response block.
### When to use it [#when-to-use-it]
Use it to display scripts, commands, generated output, or language-labeled examples in the UI.
`ElementFunction:AddCode(Text, Content)`
```luau
RightGroup:AddCode({
Name = "Quick code",
Language = "lua",
Content = "print(game.PlaceId)"
})
```
```luau
RightGroup:AddCode({
Name = "Quick code",
Language = "lua",
Content = "print(game.PlaceId)",
Description = "Example text", -- optional
response = nil, -- optional
src = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Language` | string | Yes | Sets the language. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `response` | varies | Yes | Optional response setting accepted by this method. |
| `src` | varies | Yes | Optional src setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCopyBox
> Adds read-only text with a convenient copy action.
Source: /docs/elements/content-reference/add-copy-box
# `AddCopyBox` [#addcopybox]
## What it does [#what-it-does]
Adds read-only text with a convenient copy action.
### When to use it [#when-to-use-it]
Use it for invite codes, IDs, commands, URLs, or any value the user should copy instead of edit.
`ElementFunction:AddCopyBox(CopyConfig)`
```luau
LeftGroup:AddCopyBox({
Name = "Server JobId",
Content = game.JobId
})
```
```luau
LeftGroup:AddCopyBox({
Name = "Server JobId",
Content = game.JobId,
Callback = function(value) -- optional
print("Callback:", value)
end,
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDivider
> Adds a visual divider between neighboring groups of content.
Source: /docs/elements/content-reference/add-divider
# `AddDivider` [#adddivider]
## What it does [#what-it-does]
Adds a visual divider between neighboring groups of content.
### When to use it [#when-to-use-it]
Use it to separate topics without creating another titled section.
`ElementFunction:AddDivider(DividerConfig)`
```luau
LeftGroup:AddDivider("Toggle Settings")
```
```luau
LeftGroup:AddDivider("Toggle Settings")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------ | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDraggableLabel
> Adds a text label that can be repositioned.
Source: /docs/elements/content-reference/add-draggable-label
# `AddDraggableLabel` [#adddraggablelabel]
## What it does [#what-it-does]
Adds a text label that can be repositioned.
### When to use it [#when-to-use-it]
Use it for movable annotations, overlays, or user-customizable information labels.
`XLQPGen1:AddDraggableLabel(Text)`
```luau
local Watermark = Library:AddDraggableLabel(
"Example text",
)
```
```luau
local Watermark = Library:AddDraggableLabel(
"Example text",
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ----------- | -------------- | -------- | -------------------------------------------------------------------------- |
| `Text` | string / table | No | Text displayed by the created label, or a configuration table. |
| `Text.Text` | string | Yes | Label text when a table is passed. `Name` works as an alias. |
| `Text.fps` | boolean | Yes | Appends live FPS and ping to the label. `FPS` and `ShowStats` are aliases. |
Exact signature:
```luau
XLQPGen1:AddDraggableLabel(Text)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
The label parents to the XLQP root GUI, which exists as soon as the source finishes loading, so this may be called before `MakeWindow`. The returned controller provides:
| Method | What it does |
| -------------------------- | -------------------------------------------------------------------------------------- |
| `SetText(text)` | Replaces the base text, keeping the stats suffix when `fps` is on |
| `SetStatsVisible(visible)` | Shows or hides the live FPS and ping suffix |
| `SetVisible(visible)` | Shows or hides the label frame |
| `Destroy()` | Unregisters the label from the stats refresh loop and removes it. `Remove` is an alias |
`AddLabelGui` is an alias for this method.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddInfoCard
> Adds a compact card with a title, description, icon, and accent.
Source: /docs/elements/content-reference/add-info-card
# `AddInfoCard` [#addinfocard]
## What it does [#what-it-does]
Adds a compact card with a title, description, icon, and accent.
### When to use it [#when-to-use-it]
Use it to summarize a feature, status, instruction, or important piece of information.
`ElementFunction:AddInfoCard(CardConfig)`
```luau
RightGroup:AddInfoCard({
Name = "Useful Info Card",
Content = "Info cards are compact status panels for tabs, groupboxes, and tabboxes.",
Icon = "info",
Color = Color3.fromRGB(90, 140, 255)
})
```
```luau
RightGroup:AddInfoCard({
Name = "Useful Info Card",
Content = "Info cards are compact status panels for tabs, groupboxes, and tabboxes.",
Icon = "info",
Color = Color3.fromRGB(90, 140, 255),
Description = "Example text", -- optional
Image = "rbxassetid://0", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddItem
> Adds an item to a list-like controller such as a pinned list or FAQ.
Source: /docs/elements/content-reference/add-item
# `AddItem` [#additem]
## What it does [#what-it-does]
Adds one item to a list controller after the parent element has been created. This is a controller method, not a standalone visual constructor.
`Controller:AddItem(ItemConfig)`
```luau
FAQ:AddItem({
Question = "Does this work on mobile?",
Answer = "Yes."
})
```
```luau
FAQ:AddItem({
Question = "Can this be changed later?",
Answer = "Yes, use the returned item controller.",
Name = "Optional display name",
Content = "Optional answer alias",
StrokeTransparency = 0.55
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------------- | ------------ | -------- | ------------------------- |
| `Question` | string | Yes | Question or item title. |
| `Answer` | string | Yes | Answer or item body. |
| `Name` | string | Yes | Alternate item title. |
| `Content` | string | Yes | Alternate item body. |
| `StrokeTransparency` | number | Yes | Item border transparency. |
## Related reference [#related-reference]
* [CreateFAQ](/docs/elements/content-reference/create-faq)
* [CreatePinnedList](/docs/elements/content-reference/create-pinned-list)
* [Controller methods](/docs/reference/controllers)
---
# AddKeyValueList
> Adds a compact list of labels paired with their values.
Source: /docs/elements/content-reference/add-key-value-list
# `AddKeyValueList` [#addkeyvaluelist]
## What it does [#what-it-does]
Adds a compact list of labels paired with their values.
### When to use it [#when-to-use-it]
Use it for metadata, environment details, configuration summaries, or diagnostic readouts.
`ElementFunction:AddKeyValueList(ListConfig)`
```luau
DataPage:AddKeyValueList({
Name = "Runtime",
Items = {
{Key = "Executor", Value = "Supported"},
{Key = "FPS", Value = "144"},
{Key = "Ping", Value = "42 ms"}
}
})
```
```luau
DataPage:AddKeyValueList({
Name = "Runtime",
Items = {
{Key = "Executor", Value = "Supported"},
{Key = "FPS", Value = "144"},
{Key = "Ping", Value = "42 ms"}
}
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLabelGui
> Adds a label-oriented GUI element to a supported container.
Source: /docs/elements/content-reference/add-label-gui
# `AddLabelGui` [#addlabelgui]
## What it does [#what-it-does]
Adds a label-oriented GUI element to a supported container.
### When to use it [#when-to-use-it]
Use it when you need the label presentation exposed by the GUI compatibility API.
`XLQPGen1:AddLabelGui(Text)`
```luau
local Result = Library:AddLabelGui(
"Example text",
)
```
```luau
local Result = Library:AddLabelGui(
"Example text",
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ------------------------------------ |
| `Text` | string | No | Text displayed by the created label. |
Exact signature:
```luau
XLQPGen1:AddLabelGui(Text)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLabel
> Adds general-purpose text with optional wrapping, rich text, alignment, and icon styling.
Source: /docs/elements/content-reference/add-label
# `AddLabel` [#addlabel]
## What it does [#what-it-does]
Adds general-purpose text with optional wrapping, rich text, alignment, and icon styling.
### When to use it [#when-to-use-it]
Use it for headings, captions, instructions, and static information that does not need interaction.
`ElementFunction:AddLabel(LabelConfig)`
```luau
LeftGroup:AddLabel("Core controls")
```
```luau
LeftGroup:AddLabel("Core controls")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------------- | -------- | -------------------------------------------------------- |
| `BackgroundTransparency` | number | Yes | Background transparency from 0 to 1. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DoesWrap` | boolean | Yes | Allows long text to wrap onto additional lines. |
| `Font` | string or Enum.Font | Yes | Font used for the displayed text. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `IsRich` | boolean | Yes | Enables Roblox rich-text rendering. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RichText` | boolean | Yes | Enables Roblox rich-text tags in displayed text. |
| `Size` | number or UDim2 | Yes | Explicit size used by the element. |
| `Text` | string | Yes | Text displayed inside the element. |
| `TextSize` | number | Yes | Size of normal text in pixels. |
| `TextXAlignment` | Enum.TextXAlignment | Yes | Horizontal alignment of displayed text. |
| `TextYAlignment` | Enum.TextYAlignment | Yes | Vertical alignment of displayed text. |
| `Visible` | boolean | Yes | Controls whether the element starts visible. |
| `Wrap` | boolean | Yes | Allows long text to wrap onto additional lines. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLog
> Adds a log-style text surface for messages or runtime output.
Source: /docs/elements/content-reference/add-log
# `AddLog` [#addlog]
## What it does [#what-it-does]
Adds a log-style text surface for messages or runtime output.
### When to use it [#when-to-use-it]
Use it for diagnostics, activity history, command output, or continuously appended status text.
`ElementFunction:AddLog(LogConfig)`
```luau
LogsPage:AddLog({
Text = '[Log]: GUI loaded',
DoesWrap = true,
Size = 14
})
```
```luau
LogsPage:AddLog({
Text = '[Log]: GUI loaded',
DoesWrap = true,
Size = 14,
IsRich = true, -- optional
RichText = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | --------------- | -------- | ------------------------------------------------ |
| `DoesWrap` | boolean | Yes | Allows long text to wrap onto additional lines. |
| `IsRich` | boolean | Yes | Enables Roblox rich-text rendering. |
| `RichText` | boolean | Yes | Enables Roblox rich-text tags in displayed text. |
| `Size` | number or UDim2 | Yes | Explicit size used by the element. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddNotice
> Adds a short highlighted notice message.
Source: /docs/elements/content-reference/add-notice
# `AddNotice` [#addnotice]
## What it does [#what-it-does]
Adds a short highlighted notice message.
### When to use it [#when-to-use-it]
Use it for tips, warnings, or contextual information that should be more visible than a label.
`ElementFunction:AddNotice(NoticeConfig)`
```luau
MainPage:AddNotice({
Name = "Inside Tabbox",
Content = "This notice is inside a tabbox page.",
Color = Color3.fromRGB(230, 190, 73)
})
```
```luau
MainPage:AddNotice({
Name = "Inside Tabbox",
Content = "This notice is inside a tabbox page.",
Color = Color3.fromRGB(230, 190, 73),
Text = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | --------------- | -------- | ------------------------------------------------------ |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddNotify
> Adds an in-page control that can create a configured notification.
Source: /docs/elements/content-reference/add-notify
# `AddNotify` [#addnotify]
## What it does [#what-it-does]
Adds an in-page control that can create a configured notification.
### When to use it [#when-to-use-it]
Use it when a page action should demonstrate or trigger XLQP notifications.
`ElementFunction:AddNotify(NotifyConfig)`
```luau
RightGroup:AddNotify({
Name = "Notify Element",
Content = "Sends a notification with a synced progress line.",
ButtonText = "Send Notify",
Time = 5,
Pos = "BottomRight",
Buttons = {
{Name = "OK", Callback = function() print("notify ok") end}
}
})
```
```luau
RightGroup:AddNotify({
Name = "Notify Element",
Content = "Sends a notification with a synced progress line.",
ButtonText = "Send Notify",
Time = 5,
Pos = "BottomRight",
Buttons = {
{Name = "OK", Callback = function() print("notify ok") end}
},
Callback = function(value) -- optional
print("Callback:", value)
end,
Description = "Example text", -- optional
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
NotifyContent = true, -- optional
NotifyName = true, -- optional
Seconds = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `ButtonText` | string | Yes | Sets the button text. |
| `Buttons` | table | Yes | Button definitions, usually containing labels and callbacks. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `NotifyContent` | boolean | Yes | Turns notify content behavior on or off. |
| `NotifyName` | boolean | Yes | Turns notify name behavior on or off. |
| `Pos` | varies | Yes | Optional pos setting accepted by this method. |
| `Seconds` | number | Yes | Controls the seconds value. |
| `Time` | number | Yes | Display duration in seconds. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddParagraph
> Adds a titled paragraph with rich content and optional profile or image presentation.
Source: /docs/elements/content-reference/add-paragraph
# `AddParagraph` [#addparagraph]
## What it does [#what-it-does]
Adds a titled paragraph with rich content and optional profile or image presentation.
### When to use it [#when-to-use-it]
Use it for explanations, help text, user cards, and longer content than a normal label.
`ElementFunction:AddParagraph(Text, Content)`
```luau
LeftQuickMenu:AddParagraph({
Name = "Left sidebar menu",
Content = "This menu sits beside the detached tab list and can be resized from its bottom-right corner.",
DoesWrap = true
})
```
```luau
LeftQuickMenu:AddParagraph({
Name = "Left sidebar menu",
Content = "This menu sits beside the detached tab list and can be resized from its bottom-right corner.",
DoesWrap = true,
Color = Color3.fromRGB(139, 92, 246), -- optional
DontAskAgain = true, -- optional
ImageSize = 24, -- optional
Locked = true, -- optional
Premium = true, -- optional
RichText = true, -- optional
UserProfile = true, -- optional
discordpar = nil, -- optional
image = "rbxassetid://0", -- optional
opena = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | --------------- | -------- | --------------------------------------------------------- |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DoesWrap` | boolean | Yes | Allows long text to wrap onto additional lines. |
| `DontAskAgain` | boolean | Yes | Turns dont ask again behavior on or off. |
| `ImageSize` | number | Yes | Controls the image size value. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Premium` | boolean | Yes | Applies the library’s premium or restricted presentation. |
| `RichText` | boolean | Yes | Enables Roblox rich-text tags in displayed text. |
| `UserProfile` | boolean | Yes | Turns user profile behavior on or off. |
| `discordpar` | varies | Yes | Optional discordpar setting accepted by this method. |
| `image` | varies | Yes | Optional image setting accepted by this method. |
| `opena` | varies | Yes | Optional opena setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPillList
> Adds a wrapped list of pill-shaped values.
Source: /docs/elements/content-reference/add-pill-list
# `AddPillList` [#addpilllist]
## What it does [#what-it-does]
Adds a wrapped list of pill-shaped values.
### When to use it [#when-to-use-it]
Use it for tags, filters, capabilities, or other short labels displayed as a collection.
`ElementFunction:AddPillList(PillConfig)`
```luau
local Result = Section:AddPillList({
Name = "Example",
})
```
```luau
local Result = Section:AddPillList({
Name = "Example",
Height = 240, -- optional
Items = { "Item 1", "Item 2" }, -- optional
Tags = { "Example" }, -- optional
Width = 320, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------- | ------------ | -------- | ----------------------------------------------------- |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Tags` | table | Yes | Supplies the tags collection. |
| `Width` | number | Yes | Requested horizontal size in pixels. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddShortcutHint
> Adds a compact hint showing a key or bind and what it does.
Source: /docs/elements/content-reference/add-shortcut-hint
# `AddShortcutHint` [#addshortcuthint]
## What it does [#what-it-does]
Adds a compact hint showing a key or bind and what it does.
### When to use it [#when-to-use-it]
Use it to teach keyboard shortcuts beside the feature they control.
`ElementFunction:AddShortcutHint(HintConfig)`
```luau
RightGroup:AddShortcutHint({
Name = "Open UI",
Key = "RightShift",
Content = "Fast reminder for the current window toggle key."
})
```
```luau
RightGroup:AddShortcutHint({
Name = "Open UI",
Key = "RightShift",
Content = "Fast reminder for the current window toggle key.",
Bind = Enum.KeyCode.RightShift, -- optional
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ---------------------- | -------- | ----------------------------------------------------------- |
| `Bind` | string or Enum.KeyCode | Yes | Keyboard binding displayed or used by the element. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Key` | string or Enum.KeyCode | Yes | Keyboard key represented or handled by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSpace
> Adds empty vertical space to the current layout.
Source: /docs/elements/content-reference/add-space
# `AddSpace` [#addspace]
## What it does [#what-it-does]
Adds empty vertical space to the current layout.
### When to use it [#when-to-use-it]
Use it to create intentional breathing room between neighboring elements.
`ElementFunction:AddSpace(size)`
```luau
local Space = Section:AddSpace()
```
```luau
local Space = Section:AddSpace(
24, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ------------------------------------------------------------------- |
| `size` | number | Yes | Vertical space in pixels. Defaults to `10` when omitted or invalid. |
Exact signature:
```luau
ElementFunction:AddSpace(size)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSpacer
> Adds empty vertical space to the current layout.
Source: /docs/elements/content-reference/add-spacer
# `AddSpacer` [#addspacer]
## What it does [#what-it-does]
Adds empty vertical space to the current layout.
### When to use it [#when-to-use-it]
Use it to create intentional breathing room between neighboring elements.
`ElementFunction:AddSpacer(SpacerConfig)`
```luau
local Spacer = Section:AddSpacer({
Size = 18,
})
Spacer:Set(24)
```
```luau
local Spacer = Section:AddSpacer({
Size = 18,
Height = 240, -- optional
})
Spacer:Set(24)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------- | --------------- | -------- | ---------------------------------- |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Size` | number or UDim2 | Yes | Explicit size used by the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTagCloud
> Adds a wrapped cloud of tags with configurable sizing.
Source: /docs/elements/content-reference/add-tag-cloud
# `AddTagCloud` [#addtagcloud]
## What it does [#what-it-does]
Adds a wrapped cloud of tags with configurable sizing.
### When to use it [#when-to-use-it]
Use it to visualize categories, keywords, features, or selectable labels.
`ElementFunction:AddTagCloud(TagConfig)`
```luau
RightGroup:AddTagCloud({
Name = "Feature Tags",
Tags = {
{Text = "New UI", Color = Color3.fromRGB(73, 130, 230)},
{Text = "AI"},
{Text = "Discord"},
{Text = "Configs"},
{Text = "Premium"}
}
})
```
```luau
RightGroup:AddTagCloud({
Name = "Feature Tags",
Tags = {
{Text = "New UI", Color = Color3.fromRGB(73, 130, 230)},
{Text = "AI"},
{Text = "Discord"},
{Text = "Configs"},
{Text = "Premium"}
},
Height = 240, -- optional
Items = { "Item 1", "Item 2" }, -- optional
TagWidth = 320, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ----------------------------------------------------- |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Tags` | table | Yes | Supplies the tags collection. |
| `TagWidth` | number | Yes | Controls the tag width value. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTag
> Adds a tag to an element or tag row and returns its tag controller.
Source: /docs/elements/content-reference/add-tag
# `AddTag` [#addtag]
## What it does [#what-it-does]
Adds a tag to an existing element. Tags can be read, replaced, hidden, refreshed, or removed through the returned object.
`Element:AddTag(TagConfig)`
```luau
local tag = LiveTagDemo:AddTag({Text = "NEW"})
```
```luau
local tag = LiveTagDemo:AddTag({
Text = "BETA",
Variant = "New",
Color = "Purple",
TextColor = "White",
Position = "right",
Icon = "sparkles"
})
tag:SetText("UPDATED")
tag:SetIcon("check")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------------------------- | ------------ | -------- | ---------------------------- |
| `Text` / `Title` | string | Yes | Visible tag text. |
| `Variant` | string | Yes | Built-in tag style. |
| `Color` | color value | Yes | Tag background/accent color. |
| `TextColor` | color value | Yes | Tag text color. |
| `Position` / `Placement` / `Align` | string | Yes | Tag row placement. |
| `Icon` | string | Yes | Tag icon. |
## Related reference [#related-reference]
* [AddTagCloud](/docs/elements/content-reference/add-tag-cloud)
* [CreateCursorTag](/docs/elements/content-reference/create-cursor-tag)
* [All element options](/docs/reference/element-options)
---
# AddTimeline
> Adds an ordered timeline of events or log entries.
Source: /docs/elements/content-reference/add-timeline
# `AddTimeline` [#addtimeline]
## What it does [#what-it-does]
Adds an ordered timeline of events or log entries.
### When to use it [#when-to-use-it]
Use it for release history, activity feeds, setup steps, or chronological status changes.
`ElementFunction:AddTimeline(TimelineConfig)`
```luau
RightGroup:AddTimeline({
Name = "Update Timeline",
Items = {
{Title = "Corner Sync", Description = "Settings GUI and Settings tab now share corner controls.", Time = "Now", Color = Color3.fromRGB(73, 230, 133)},
{Title = "Nested Elements", Description = "Checklist and Timeline work inside groups and tabboxes.", Time = "New", Color = Color3.fromRGB(90, 140, 255)}
}
})
```
```luau
RightGroup:AddTimeline({
Name = "Update Timeline",
Items = {
{Title = "Corner Sync", Description = "Settings GUI and Settings tab now share corner controls.", Time = "Now", Color = Color3.fromRGB(73, 230, 133)},
{Title = "Nested Elements", Description = "Checklist and Timeline work inside groups and tabboxes.", Time = "New", Color = Color3.fromRGB(90, 140, 255)}
},
Color = Color3.fromRGB(139, 92, 246), -- optional
Logs = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Logs` | table | Yes | Supplies the logs collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateCursorTag
> Creates text that follows the pointer as a contextual cursor label.
Source: /docs/elements/content-reference/create-cursor-tag
# `CreateCursorTag` [#createcursortag]
## What it does [#what-it-does]
Creates text that follows the pointer as a contextual cursor label.
### When to use it [#when-to-use-it]
Use it for tool modes, drag hints, or short pointer-adjacent instructions.
`ElementFunction:CreateCursorTag(TagConfig)`
```luau
local HoverTag = LeftGroup:CreateCursorTag({
Text = "XLQP UI",
Hint = "Move your mouse here to see the live cursor tag.",
Height = 92,
Callback = function(visible)
print("cursor tag", visible)
end
})
```
```luau
local HoverTag = LeftGroup:CreateCursorTag({
Text = "XLQP UI",
Hint = "Move your mouse here to see the live cursor tag.",
Height = 92,
Callback = function(visible)
print("cursor tag", visible)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Hint` | string | Yes | Sets the hint. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateFAQ
> Creates an accordion-style list of questions and answers.
Source: /docs/elements/content-reference/create-faq
# `CreateFAQ` [#createfaq]
## What it does [#what-it-does]
Creates an accordion-style list of questions and answers.
### When to use it [#when-to-use-it]
Use it for help content where only one or a few answers should be expanded at a time.
`ElementFunction:CreateFAQ(FAQConfig)`
```luau
local FAQ = RightGroup:CreateFAQ({
Name = "Frequently Asked Questions",
Exclusive = true,
Items = {
{
Question = "Why was this fanmade Gen 2 created?",
Answer = "So people can experience a Gen 2 style Rayfield right now instead of waiting for the official release. It is a fan project built from zero, not a replacement for the real thing."
},
{
Question = "Will my existing Rayfield scripts work?",
Answer = "Yes. The compatibility API keeps familiar window, tab, and element methods while using the Verbal Hub layout and themes."
},
{
Question = "Can more than one answer stay open?",
Answer = "Set Exclusive to false or AllowMultiple to true. By default, opening one answer closes the others."
},
{
Question = "Can questions be changed later?",
Answer = "Yes. Use FAQ.Items[index]:Set(), FAQ:AddItem(), FAQ:Open(), FAQ:Close(), FAQ:Toggle(), or FAQ:SetItems()."
},
{
Question = "Does it work on mobile?",
Answer = "Yes. The full question card uses Activated input, wraps long text, recalculates its height, and animates on touch and mouse."
}
},
Callback = function(index, opened, item)
print("FAQ", index, opened, item.Question)
end
})
```
```luau
local FAQ = RightGroup:CreateFAQ({
Name = "Frequently Asked Questions",
Exclusive = true,
Items = {
{
Question = "Why was this fanmade Gen 2 created?",
Answer = "So people can experience a Gen 2 style Rayfield right now instead of waiting for the official release. It is a fan project built from zero, not a replacement for the real thing."
},
{
Question = "Will my existing Rayfield scripts work?",
Answer = "Yes. The compatibility API keeps familiar window, tab, and element methods while using the Verbal Hub layout and themes."
},
{
Question = "Can more than one answer stay open?",
Answer = "Set Exclusive to false or AllowMultiple to true. By default, opening one answer closes the others."
},
{
Question = "Can questions be changed later?",
Answer = "Yes. Use FAQ.Items[index]:Set(), FAQ:AddItem(), FAQ:Open(), FAQ:Close(), FAQ:Toggle(), or FAQ:SetItems()."
},
{
Question = "Does it work on mobile?",
Answer = "Yes. The full question card uses Activated input, wraps long text, recalculates its height, and animates on touch and mouse."
}
},
Callback = function(index, opened, item)
print("FAQ", index, opened, item.Question)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Exclusive` | boolean | Yes | Turns exclusive behavior on or off. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreatePinnedList
> Creates a list that separates pinned items from the rest.
Source: /docs/elements/content-reference/create-pinned-list
# `CreatePinnedList` [#createpinnedlist]
## What it does [#what-it-does]
Creates a list that separates pinned items from the rest.
### When to use it [#when-to-use-it]
Use it when important or favorite entries must stay easy to reach.
`ElementFunction:CreatePinnedList(ListConfig)`
```luau
local FavoriteTools = LeftGroup:CreatePinnedList({
Title = "All tools",
PinnedTitle = "Pinned tools",
Items = {
{Name = "Auto Farm", Description = "Farming automation", Icon = "sparkles", Pinned = true},
{Name = "Player ESP", Description = "Visual player helper", Icon = "eye"},
{Name = "Server Hop", Description = "Find another server", Icon = "server"}
},
Callback = function(name, pinned)
print("pinned list", name, pinned)
end
})
```
```luau
local FavoriteTools = LeftGroup:CreatePinnedList({
Title = "All tools",
PinnedTitle = "Pinned tools",
Items = {
{Name = "Auto Farm", Description = "Farming automation", Icon = "sparkles", Pinned = true},
{Name = "Player ESP", Description = "Visual player helper", Icon = "eye"},
{Name = "Server Hop", Description = "Find another server", Icon = "server"}
},
Callback = function(name, pinned)
print("pinned list", name, pinned)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `PinnedTitle` | string | Yes | Sets the pinned title. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateScrollHint
> Creates a hint that can prompt or automatically perform a scroll action.
Source: /docs/elements/content-reference/create-scroll-hint
# `CreateScrollHint` [#createscrollhint]
## What it does [#what-it-does]
Creates a hint that can prompt or automatically perform a scroll action.
### When to use it [#when-to-use-it]
Use it when more content exists below the visible area and users may not notice it.
`ElementFunction:CreateScrollHint(HintConfig)`
```luau
local LiveScrollHint = LeftGroup:CreateScrollHint({
Text = "Scroll to see more",
Icon = "arrow-down",
AutoScroll = true,
ScrollAmount = 220,
AutoStart = true,
Callback = function(text)
print("scroll hint", text)
end
})
```
```luau
local LiveScrollHint = LeftGroup:CreateScrollHint({
Text = "Scroll to see more",
Icon = "arrow-down",
AutoScroll = true,
ScrollAmount = 220,
AutoStart = true,
Callback = function(text)
print("scroll hint", text)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `AutoScroll` | boolean | Yes | Turns auto scroll behavior on or off. |
| `AutoStart` | boolean | Yes | Turns auto start behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `ScrollAmount` | number | Yes | Controls the scroll amount value. |
| `Text` | string | Yes | Text displayed inside the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakeToast
> Displays a lightweight toast message.
Source: /docs/elements/content-reference/make-toast
# `MakeToast` [#maketoast]
## What it does [#what-it-does]
Displays a lightweight toast message.
### When to use it [#when-to-use-it]
Use it for brief feedback that should disappear without interrupting the current task.
`XLQPGen1:MakeToast(ToastConfig)`
```luau
Library:MakeToast()
```
```luau
Library:MakeToast(
{ Name = "Example", Content = "Example text" }, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------- |
| `ToastConfig` | table | Yes | Toast name, content, timing, and presentation settings. |
Exact signature:
```luau
XLQPGen1:MakeToast(ToastConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddActionRow
> Adds a horizontal row of related action buttons to the current container.
Source: /docs/elements/controls-reference/add-action-row
# `AddActionRow` [#addactionrow]
## What it does [#what-it-does]
Adds a horizontal row of related action buttons to the current container.
### When to use it [#when-to-use-it]
Use it for compact toolbars, confirm/cancel actions, or several commands that belong together.
`ElementFunction:AddActionRow(RowConfig)`
```luau
LeftGroup:AddActionRow({
Name = "Progress Actions",
Outline = true,
Buttons = {
{Name = "Start", Callback = function() FakeDownload:Download(5) end},
{Name = "Pause", Callback = function() FakeDownload:Pause() end},
{Name = "Resume", Callback = function() FakeDownload:Resume() end},
{Name = "Reset", Callback = function() FakeDownload:Cancel(true) end}
}
})
```
```luau
LeftGroup:AddActionRow({
Name = "Progress Actions",
Outline = true,
Buttons = {
{Name = "Start", Callback = function() FakeDownload:Download(5) end},
{Name = "Pause", Callback = function() FakeDownload:Pause() end},
{Name = "Resume", Callback = function() FakeDownload:Resume() end},
{Name = "Reset", Callback = function() FakeDownload:Cancel(true) end}
},
Moveable = true, -- optional
OutlineColor = Color3.fromRGB(139, 92, 246), -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | --------------------------------------------------------------------- |
| `Buttons` | table | Yes | Button definitions, usually containing labels and callbacks. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Outline` | boolean | Yes | Turns outline behavior on or off. |
| `OutlineColor` | Color3 | Yes | Sets the outline color. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddBind
> Adds a keybind control that lets the user choose or trigger a keyboard shortcut.
Source: /docs/elements/controls-reference/add-bind
# `AddBind` [#addbind]
## What it does [#what-it-does]
Adds a keybind control that lets the user choose or trigger a keyboard shortcut.
### When to use it [#when-to-use-it]
Use it when a feature needs a configurable key, including optional hold-to-activate behavior.
`ElementFunction:AddBind(BindConfig)`
```luau
local Result = Section:AddBind({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddBind({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
Flag = "ExampleKey", -- optional
Hold = true, -- optional
Image = "rbxassetid://0", -- optional
Locked = true, -- optional
Save = true, -- optional
UIBind = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Hold` | boolean | Yes | Treats the bind as active only while its key is held. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `UIBind` | boolean | Yes | Turns ui bind behavior on or off. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddButton
> Adds a clickable button that runs a callback when pressed.
Source: /docs/elements/controls-reference/add-button
# `AddButton` [#addbutton]
## What it does [#what-it-does]
Adds a clickable button that runs a callback when pressed.
### When to use it [#when-to-use-it]
Use it for one-time actions such as opening a menu, copying a value, refreshing data, or running a command.
`ElementFunction:AddButton(ButtonConfig)`
```luau
RightQuickMenu:AddButton({
Name = "Close Menu",
Callback = function()
RightQuickMenu:Close()
end
})
```
```luau
RightQuickMenu:AddButton({
Name = "Close Menu",
Callback = function()
RightQuickMenu:Close()
end,
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
Locked = true, -- optional
Moveable = true, -- optional
Premium = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | --------------- | -------- | --------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Premium` | boolean | Yes | Applies the library’s premium or restricted presentation. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddChecklist
> Adds a list of independently selectable checklist items.
Source: /docs/elements/controls-reference/add-checklist
# `AddChecklist` [#addchecklist]
## What it does [#what-it-does]
Adds a list of independently selectable checklist items.
### When to use it [#when-to-use-it]
Use it when users may select several tasks or requirements at the same time.
`ElementFunction:AddChecklist(CheckConfig)`
```luau
RightGroup:AddChecklist({
Name = "Setup Checklist",
Items = {
{Text = "Window loaded", Checked = true},
{Text = "Tabs synced", Checked = true},
{Text = "Configs saved", Checked = false}
},
Callback = function(index, checked, text)
print(index, checked, text)
end
})
```
```luau
RightGroup:AddChecklist({
Name = "Setup Checklist",
Items = {
{Text = "Window loaded", Checked = true},
{Text = "Tabs synced", Checked = true},
{Text = "Configs saved", Checked = false}
},
Callback = function(index, checked, text)
print(index, checked, text)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddColorpicker
> Adds a color picker, with optional transparency and live preview behavior.
Source: /docs/elements/controls-reference/add-colorpicker
# `AddColorpicker` [#addcolorpicker]
## What it does [#what-it-does]
Adds a color picker, with optional transparency and live preview behavior.
### When to use it [#when-to-use-it]
Use it for theme editors, drawing tools, accent selection, or any feature that accepts a Color3 value.
`ElementFunction:AddColorpicker(ColorpickerConfig)`
```luau
RightGroup:AddColorpicker({
Name = "Accent",
Default = Color3.fromRGB(73, 130, 230),
Transparency = 0,
Callback = function(color, transparency)
print(color, transparency)
end
})
```
```luau
RightGroup:AddColorpicker({
Name = "Accent",
Default = Color3.fromRGB(73, 130, 230),
Transparency = 0,
Callback = function(color, transparency)
print(color, transparency)
end,
Alpha = true, -- optional
Flag = "ExampleKey", -- optional
Image = "rbxassetid://0", -- optional
Live = true, -- optional
LiveDelay = 1, -- optional
Locked = true, -- optional
Save = true, -- optional
ThemePicker = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Alpha` | boolean | Yes | Turns alpha behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Live` | boolean | Yes | Turns live behavior on or off. |
| `LiveDelay` | number | Yes | Controls the live delay value. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `ThemePicker` | boolean | Yes | Turns theme picker behavior on or off. |
| `Transparency` | number | Yes | Transparency from 0 (opaque) to 1 (invisible). |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCommandBar
> Adds a text command entry with a submit button.
Source: /docs/elements/controls-reference/add-command-bar
# `AddCommandBar` [#addcommandbar]
## What it does [#what-it-does]
Adds a text command entry with a submit button.
### When to use it [#when-to-use-it]
Use it for consoles, command palettes, prompts, or short text-driven actions.
`ElementFunction:AddCommandBar(CommandConfig)`
```luau
LeftGroup:AddCommandBar({
Name = "Quick Command",
Placeholder = "say hello",
ButtonText = "Run",
Callback = function(text)
print("command:", text)
end
})
```
```luau
LeftGroup:AddCommandBar({
Name = "Quick Command",
Placeholder = "say hello",
ButtonText = "Run",
Callback = function(text)
print("command:", text)
end,
Default = false, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `ButtonText` | string | Yes | Sets the button text. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Placeholder` | string | Yes | Hint shown while a text field is empty. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCooldownButton
> Adds an action button that temporarily locks itself after activation.
Source: /docs/elements/controls-reference/add-cooldown-button
# `AddCooldownButton` [#addcooldownbutton]
## What it does [#what-it-does]
Adds an action button that temporarily locks itself after activation.
### When to use it [#when-to-use-it]
Use it to prevent rapid repeats for rate-limited actions, teleports, network calls, or expensive operations.
`ElementFunction:AddCooldownButton(CooldownConfig)`
```luau
local ServerActionCooldown = LeftGroup:AddCooldownButton({
Name = "Refresh Server Data",
Description = "Prevents repeated requests while data refreshes.",
ButtonText = "Refresh",
CooldownText = "Ready in",
Duration = 5,
Callback = function()
RuntimeMonitor:Refresh()
RefreshPlayerDataTable()
Library:MakeToast({Title="Server data",Content="Runtime and player data refreshed.",Variant="Success",Icon="refresh",Time=2})
end
})
```
```luau
local ServerActionCooldown = LeftGroup:AddCooldownButton({
Name = "Refresh Server Data",
Description = "Prevents repeated requests while data refreshes.",
ButtonText = "Refresh",
CooldownText = "Ready in",
Duration = 5,
Callback = function()
RuntimeMonitor:Refresh()
RefreshPlayerDataTable()
Library:MakeToast({Title="Server data",Content="Runtime and player data refreshed.",Variant="Success",Icon="refresh",Time=2})
end,
ActionText = "Example text", -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
Cooldown = 1, -- optional
Desc = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `ActionText` | string | Yes | Sets the action text. |
| `ButtonText` | string | Yes | Sets the button text. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Cooldown` | number | Yes | Seconds before the action can be used again. |
| `CooldownText` | string | Yes | Sets the cooldown text. |
| `Desc` | string | Yes | Short-form alias for the supporting description. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCustomSlider
> Create a compact styled slider with optional named stops and plugin hooks.
Source: /docs/elements/controls-reference/add-custom-slider
# AddCustomSlider [#addcustomslider]
Creates a normal [AddSlider](/docs/elements/controls-reference/add-slider) with `Preset = "Compact"` when no preset is supplied. It supports all numeric-slider and named-parameter options. Aliases: `CreateCustomSlider` and `CustomSlider`.
```luau
local Effort = Tab:AddCustomSlider({
Name = "Effort",
Parameters = {
{Name = "Instant", Value = "Instant", Description = "Quick answers"},
{Name = "Balanced", Value = "Balanced", Description = "Normal planning"},
{Name = "Deep", Value = "Deep", Description = "More context"},
},
Default = "Balanced",
ShowDots = true,
Callback = function(value, parameter, index)
print(value, parameter.Name, index)
end,
})
Effort:SetParameter("Deep")
```
The Compact preset also accepts `Thin` and `ChatGPT` names, case-insensitively. By default it keeps a minimum usable height and handle size; `AllowSmall` / `AllowMini` opts out of that minimum.
For full style fields, plugin hooks, and controller methods, see [Current API additions](/docs/reference/october-update).
---
# AddDependencyBox
> Adds content whose enabled or visible state depends on another control or predicate.
Source: /docs/elements/controls-reference/add-dependency-box
# `AddDependencyBox` [#adddependencybox]
## What it does [#what-it-does]
Adds content whose enabled or visible state depends on another control or predicate.
### When to use it [#when-to-use-it]
Use it to reveal advanced settings only when their parent feature is enabled or a required value matches.
`ElementFunction:AddDependencyBox(DependencyConfig)`
```luau
local Result = Section:AddDependencyBox({
Name = "Example",
})
```
```luau
local Result = Section:AddDependencyBox({
Name = "Example",
BackgroundTransparency = 0.2, -- optional
Dependencies = {}, -- optional
Dependency = nil, -- optional
Element = nil, -- optional
Equals = nil, -- optional
Invert = true, -- optional
Mode = "Default", -- optional
Operator = nil, -- optional
Predicate = function(value) -- optional
print("Predicate:", value)
return true
end,
Value = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------ | -------- | -------------------------------------------------------------- |
| `BackgroundTransparency` | number | Yes | Background transparency from 0 to 1. |
| `Dependencies` | table | Yes | Supplies the dependencies collection. |
| `Dependency` | varies | Yes | Optional dependency setting accepted by this method. |
| `Element` | varies | Yes | Optional element setting accepted by this method. |
| `Equals` | varies | Yes | Optional equals setting accepted by this method. |
| `Invert` | boolean | Yes | Turns invert behavior on or off. |
| `Mode` | string | Yes | Named operating mode that selects a behavior preset. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Operator` | varies | Yes | Optional operator setting accepted by this method. |
| `Predicate` | function | Yes | Runs for the predicate event or decision. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDraggableButton
> Adds a button that can also be repositioned by the user.
Source: /docs/elements/controls-reference/add-draggable-button
# `AddDraggableButton` [#adddraggablebutton]
## What it does [#what-it-does]
Adds a button that can also be repositioned by the user.
### When to use it [#when-to-use-it]
Use it for floating actions or layouts where users should customize where a control sits.
`XLQPGen1:AddDraggableButton(text, callback, noScale, icon, iconPosition)`
```luau
local Result = Library:AddDraggableButton(
"Example",
function() print("Activated") end,
)
```
```luau
local Result = Library:AddDraggableButton(
"Example",
function() print("Activated") end,
false, -- optional
"home", -- optional
"Left", -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------ |
| `text` | string | No | Text displayed on the button. |
| `callback` | function | No | Runs when the button is activated. |
| `noScale` | boolean | Yes | Disables the normal press or hover scale effect. |
| `icon` | string | Yes | Optional supported icon name or asset value. |
| `iconPosition` | string | Yes | Places the optional icon relative to the text. |
Exact signature:
```luau
XLQPGen1:AddDraggableButton(text, callback, noScale, icon, iconPosition)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDropdown
> Adds a single- or multi-select dropdown, with optional search and player-aware modes.
Source: /docs/elements/controls-reference/add-dropdown
# `AddDropdown` [#adddropdown]
## What it does [#what-it-does]
Adds a single- or multi-select dropdown, with optional search and player-aware modes.
### When to use it [#when-to-use-it]
Use it when users must choose from a list without keeping every choice visible on the page.
`ElementFunction:AddDropdown(DropdownConfig)`
```luau
RightQuickMenu:AddDropdown({
Name = "Theme",
Options = {"Verbal Ember", "Default", "Dark", "Light", "Mocha", "Aqua", "Rose", "DeepBlack"},
Default = "Verbal Ember",
Search = true,
MaxElements = 5,
Callback = function(value)
Library:SetTheme(value)
end
})
```
```luau
RightQuickMenu:AddDropdown({
Name = "Theme",
Options = {"Verbal Ember", "Default", "Dark", "Light", "Mocha", "Aqua", "Rose", "DeepBlack"},
Default = "Verbal Ember",
Search = true,
MaxElements = 5,
Callback = function(value)
Library:SetTheme(value)
end,
Advanced = true, -- optional
AdvancedDrop = true, -- optional
Fill = true, -- optional
FillColor = Color3.fromRGB(139, 92, 246), -- optional
FillTransparency = 0.2, -- optional
Flag = "ExampleKey", -- optional
Image = "rbxassetid://0", -- optional
Locked = true, -- optional
Moveable = true, -- optional
MultiSelect = true, -- optional
Outline = true, -- optional
OutlineColor = Color3.fromRGB(139, 92, 246), -- optional
Players = true, -- optional
Premium = true, -- optional
PVP = false, -- optional
Save = true, -- optional
Whitelist = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ---------------- | -------- | --------------------------------------------------------------------- |
| `Advanced` | boolean | Yes | Turns advanced behavior on or off. |
| `AdvancedDrop` | boolean | Yes | Turns advanced drop behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Fill` | boolean | Yes | Turns fill behavior on or off. |
| `FillColor` | Color3 | Yes | Sets the fill color. |
| `FillTransparency` | number | Yes | Fill transparency from 0 to 1. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `MaxElements` | number | Yes | Controls the max elements value. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `MultiSelect` | boolean | Yes | Allows more than one dropdown option to be selected. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Options` | table | Yes | Selectable choices or action definitions shown by the element. |
| `Outline` | boolean | Yes | Turns outline behavior on or off. |
| `OutlineColor` | Color3 | Yes | Sets the outline color. |
| `Players` | boolean or table | Yes | Enables or supplies player-based choices. |
| `Premium` | boolean | Yes | Applies the library’s premium or restricted presentation. |
| `PVP` | boolean | Yes | Turns pvp behavior on or off. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `Search` | boolean | Yes | Enables search within the available entries. |
| `Whitelist` | table | Yes | Entries explicitly allowed by the feature. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddFilterList
> Adds a searchable or filterable list of selectable items.
Source: /docs/elements/controls-reference/add-filter-list
# `AddFilterList` [#addfilterlist]
## What it does [#what-it-does]
Adds a searchable or filterable list of selectable items.
### When to use it [#when-to-use-it]
Use it for long collections where users need to narrow visible entries quickly.
`ElementFunction:AddFilterList(FilterConfig)`
```luau
RightGroup:AddFilterList({
Name = "Command Finder",
Placeholder = "Search actions...",
Items = {
{Name = "Auto Farm", Description = "Toggle farming helpers", Callback = function() AutoFarm:Set(true) end},
{Name = "Clear Players", Description = "Clear selected player targets", Callback = function() PlayerDropdown:Clear() end},
{Name = "Copy Job", Description = "Copy the current JobId", Callback = function() if setclipboard then setclipboard(game.JobId) end end},
{Name = "Select Everyone", Description = "Select all player dropdown rows", Callback = function() PlayerDropdown:SelectAll() end}
},
Callback = function(item)
print("picked", item.Name or item.Text)
end
})
```
```luau
RightGroup:AddFilterList({
Name = "Command Finder",
Placeholder = "Search actions...",
Items = {
{Name = "Auto Farm", Description = "Toggle farming helpers", Callback = function() AutoFarm:Set(true) end},
{Name = "Clear Players", Description = "Clear selected player targets", Callback = function() PlayerDropdown:Clear() end},
{Name = "Copy Job", Description = "Copy the current JobId", Callback = function() if setclipboard then setclipboard(game.JobId) end end},
{Name = "Select Everyone", Description = "Select all player dropdown rows", Callback = function() PlayerDropdown:SelectAll() end}
},
Callback = function(item)
print("picked", item.Name or item.Text)
end,
Height = 240, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Placeholder` | string | Yes | Hint shown while a text field is empty. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddKeyPicker
> Adds a key picker with optional hold behavior and keybind-menu visibility.
Source: /docs/elements/controls-reference/add-key-picker
# `AddKeyPicker` [#addkeypicker]
## What it does [#what-it-does]
Adds the current key-picker form of `AddBind`. It supports saved flags, hold behavior, UI toggle binding, and visibility in XLQP's keybind menu.
`ElementFunction:AddKeyPicker(KeyPickerConfig)`
```luau
local Picker = Controls:AddKeyPicker({
Name = "Open menu",
Default = Enum.KeyCode.K,
Callback = function(key)
print("Selected key:", key)
end,
})
```
```luau
local Picker = Controls:AddKeyPicker({
Name = "Open menu",
Default = Enum.KeyCode.K,
Hold = false,
MenuVisible = true,
UIBind = false,
Flag = "OpenMenuKey",
Save = true,
Locked = false,
Image = "keyboard",
Callback = function(key)
print("Selected key:", key)
end,
})
Picker:SetMenuVisibility(true)
print(Picker:GetMenuVisibility())
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | What it controls |
| ------------- | ------------------------- | ---------------------------------------------- |
| `Name` | `string` | Visible label. |
| `Default` | `Enum.KeyCode` / `string` | Initial binding. |
| `Hold` | `boolean` | Keeps the bind active only while held. |
| `MenuVisible` | `boolean` | Includes the picker in keybind/control panels. |
| `UIBind` | `boolean` | Uses the key as the XLQP UI toggle key. |
| `Flag` | `string` | Stable saved-state key. |
| `Save` | `boolean` | Persists the selected key. |
| `Locked` | `boolean` | Prevents user changes. |
| `Image` | `string` | Optional icon or asset. |
| `Callback` | `function` | Runs when the selected key is used or changed. |
## Controller methods [#controller-methods]
* `Set(key)` changes the selected binding.
* `SetMenuVisibility(visible)` updates keybind-menu visibility and refreshes related panels.
* `GetMenuVisibility()` returns the current menu visibility.
`KeyPicker` is a compatibility alias for the same constructor behavior.
## Related reference [#related-reference]
* [AddBind](/docs/elements/controls-reference/add-bind)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddMiniButtons
> Adds a compact collection of small buttons.
Source: /docs/elements/controls-reference/add-mini-buttons
# `AddMiniButtons` [#addminibuttons]
## What it does [#what-it-does]
Adds a compact collection of small buttons.
### When to use it [#when-to-use-it]
Use it for secondary actions that need less visual weight than full-size buttons.
`ElementFunction:AddMiniButtons(RowConfig)`
```luau
AutoFarm:AddMiniButtons({
Name = "Toggle Actions",
Buttons = {
{Name = "Start", Callback = function() print("start") end},
{Name = "Stop", Callback = function() print("stop") end}
}
})
```
```luau
AutoFarm:AddMiniButtons({
Name = "Toggle Actions",
Buttons = {
{Name = "Start", Callback = function() print("start") end},
{Name = "Stop", Callback = function() print("stop") end}
}
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ------------------------------------------------------------ |
| `Buttons` | table | Yes | Button definitions, usually containing labels and callbacks. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddQuickToggleRow
> Adds several compact toggles on one row.
Source: /docs/elements/controls-reference/add-quick-toggle-row
# `AddQuickToggleRow` [#addquicktogglerow]
## What it does [#what-it-does]
Adds several compact toggles on one row.
### When to use it [#when-to-use-it]
Use it for a small group of frequently changed boolean settings.
`ElementFunction:AddQuickToggleRow(RowConfig)`
```luau
Visuals:AddQuickToggleRow({
Name = "Visual Mode",
Options = {"Clean", "Glass", "Debug"},
Default = "Glass",
Callback = function(value)
print("visual mode", value)
end
})
```
```luau
Visuals:AddQuickToggleRow({
Name = "Visual Mode",
Options = {"Clean", "Glass", "Debug"},
Default = "Glass",
Callback = function(value)
print("visual mode", value)
end,
Items = { "Item 1", "Item 2" }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Options` | table | Yes | Selectable choices or action definitions shown by the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRadioGroup
> Adds a single-choice radio group with flags, saving, and callbacks.
Source: /docs/elements/controls-reference/add-radio-group
# `AddRadioGroup` [#addradiogroup]
## What it does [#what-it-does]
Adds a group of mutually exclusive options. Options may be strings or tables with Name, Value, and Disabled fields.
`ElementFunction:AddRadioGroup(RadioConfig)`
```luau
local Mode = WidgetsLeft:AddRadioGroup({
Name = "Operation Mode",
Options = {"Safe", "Balanced", "Aggressive"},
Default = "Balanced"
})
```
```luau
local Mode = WidgetsLeft:AddRadioGroup({
Name = "Operation Mode",
Options = {
{Name = "Safe", Value = "safe"},
{Name = "Balanced", Value = "balanced"},
{Name = "Aggressive", Value = "aggressive"},
{Name = "Unavailable", Value = "disabled", Disabled = true}
},
Default = "balanced",
Flag = "ExampleOperationMode",
Save = true,
Callback = function(value, index) print(value, index) end
})
Mode:Set("safe")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------------- | --------------- | -------- | ------------------------------ |
| `Name` / `Title` | string | Yes | Group label. |
| `Options` / `Values` | table | Yes | Radio options. |
| `Default` | string or value | Yes | Initially selected option. |
| `Flag` | string | Yes | Saved/configuration key. |
| `Save` | boolean | Yes | Persists the selected value. |
| `Callback` | function | Yes | Runs when selection changes. |
| Option `Name` | string | Yes | Visible option label. |
| Option `Value` | any | Yes | Value returned to callbacks. |
| Option `Disabled` | boolean | Yes | Prevents selecting the option. |
## Related reference [#related-reference]
* [AddDropdown](/docs/elements/controls-reference/add-dropdown)
* [All element options](/docs/reference/element-options)
* [Full example](/docs/examples)
---
# AddRating
> Adds a star rating control with optional clearing, colors, and persistence.
Source: /docs/elements/controls-reference/add-rating
# `AddRating` [#addrating]
## What it does [#what-it-does]
Adds a bounded rating control. The selected value is available through callbacks and the returned controller.
`ElementFunction:AddRating(RatingConfig)`
```luau
local Rating = WidgetsLeft:AddRating({
Name = "Rate this UI",
Max = 5,
Default = 4
})
```
```luau
local Rating = WidgetsLeft:AddRating({
Name = "Rate These Widgets",
Max = 5,
Default = 4,
AllowClear = true,
Color = Color3.fromRGB(255, 184, 77),
Flag = "ExampleWidgetRating",
Save = true,
Callback = function(value) print(value) end
})
Rating:Set(5)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------- | -------- | ----------------------------- |
| `Name` / `Title` | string | Yes | Rating label. |
| `Max` | number (1–10) | Yes | Maximum rating value. |
| `Default` / `Value` | number | Yes | Initial rating. |
| `AllowClear` | boolean | Yes | Allows clearing the rating. |
| `Color` | color value | Yes | Star/accent color. |
| `Flag` | string | Yes | Saved/configuration key. |
| `Save` | boolean | Yes | Persists the selected value. |
| `Callback` | function | Yes | Runs when the rating changes. |
## Related reference [#related-reference]
* [AddSlider](/docs/elements/controls-reference/add-slider)
* [All element options](/docs/reference/element-options)
* [Full example](/docs/examples)
---
# AddSegmentedControl
> Adds a compact single-choice segmented control.
Source: /docs/elements/controls-reference/add-segmented-control
# `AddSegmentedControl` [#addsegmentedcontrol]
## What it does [#what-it-does]
Adds horizontally grouped options for quick mode or layout selection.
`ElementFunction:AddSegmentedControl(SegmentConfig)`
```luau
local Target = WidgetsLeft:AddSegmentedControl({
Name = "Layout Target",
Options = {"Phone", "Desktop", "TV"},
Default = "Desktop"
})
```
```luau
local Target = WidgetsLeft:AddSegmentedControl({
Name = "Layout Target",
Options = {
{Name = "Phone", Value = "mobile"},
{Name = "Desktop", Value = "desktop"},
{Name = "TV", Value = "console"}
},
Default = "desktop",
Flag = "ExampleLayoutTarget",
Save = true,
Callback = function(value) print(value) end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------------- | --------------- | -------- | ---------------------------- |
| `Name` / `Title` | string | Yes | Control label. |
| `Options` / `Values` | table | Yes | Segments to render. |
| `Default` | string or value | Yes | Initially selected segment. |
| `Flag` | string | Yes | Saved/configuration key. |
| `Save` | boolean | Yes | Persists the selected value. |
| `Callback` | function | Yes | Runs when selection changes. |
## Related reference [#related-reference]
* [AddRadioGroup](/docs/elements/controls-reference/add-radio-group)
* [All element options](/docs/reference/element-options)
* [Full example](/docs/examples)
---
# AddSlider
> Adds a numeric control constrained by minimum, maximum, and increment values.
Source: /docs/elements/controls-reference/add-slider
# `AddSlider` [#addslider]
## What it does [#what-it-does]
Adds a numeric control constrained by minimum, maximum, and increment values.
### When to use it [#when-to-use-it]
Use it for volume, speed, distance, opacity, size, or any bounded number.
`ElementFunction:AddSlider(SliderConfig)`
```luau
AutoFarm:AddSlider({
Name = "Speed",
Min = 1,
Max = 100,
Default = 25,
Increment = 1,
input = true,
Callback = function(value)
print(value)
end
})
```
```luau
AutoFarm:AddSlider({
Name = "Speed",
Min = 1,
Max = 100,
Default = 25,
Increment = 1,
input = true,
Callback = function(value)
print(value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Color2 = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
DisplayFormattedInput = true, -- optional
Flag = "ExampleKey", -- optional
FormatValue = function(value) -- optional
print("FormatValue:", value)
end,
Input = true, -- optional
Locked = true, -- optional
Moveable = true, -- optional
ParseValue = function(value) -- optional
print("ParseValue:", value)
end,
Premium = true, -- optional
Save = true, -- optional
Smooth = true, -- optional
TextBox = true, -- optional
ValueName = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------------------- | --------------- | -------- | --------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Color2` | Color3 | Yes | Secondary color used by gradients or multi-color visuals. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `DisplayFormattedInput` | boolean | Yes | Turns display formatted input behavior on or off. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `FormatValue` | function | Yes | Converts the raw value into display text. |
| `Increment` | number | Yes | Step size applied when the numeric value changes. |
| `Input` | boolean | Yes | Turns input behavior on or off. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ParseValue` | function | Yes | Converts user-facing input back into a value. |
| `Premium` | boolean | Yes | Applies the library’s premium or restricted presentation. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `Smooth` | boolean | Yes | Turns smooth behavior on or off. |
| `TextBox` | boolean | Yes | Turns text box behavior on or off. |
| `ValueName` | string | Yes | Label or unit shown with the current value. |
## Behavior and return value [#behavior-and-return-value]
### Named parameters, styles, and plugins [#named-parameters-styles-and-plugins]
The current source also supports named stops through `Parameters` / `Points` / `Stops` / `Modes`, compact presets, custom styles, parameter formatting, and plugin hooks. Use [AddCustomSlider](/docs/elements/controls-reference/add-custom-slider) for a compact preset by default.
See [Current API additions](/docs/reference/october-update#named-slider-stops) for a complete named-stop example, all new fields, callback arguments, and methods including `SetParameter`, `GetParameter`, `GetParameters`, `SetDotsVisible`, `UsePlugin`, and `ApplyStyle`.
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSmoothToggle
> Adds an animated boolean toggle with optional live-color styling.
Source: /docs/elements/controls-reference/add-smooth-toggle
# `AddSmoothToggle` [#addsmoothtoggle]
## What it does [#what-it-does]
Adds an animated boolean toggle with optional live-color styling.
### When to use it [#when-to-use-it]
Use it for on/off settings when you want a more expressive transition than a basic checkbox.
`ElementFunction:AddSmoothToggle(SmoothConfig)`
```luau
Controls:AddSmoothToggle({
Name = "Smooth Live Toggle",
Description = "Animated left and right switch",
Default = true,
LiveColor = "Cold Heat",
Flag = "SmoothLiveToggle",
Callback = function(value)
print("Smooth toggle", value)
end
})
```
```luau
Controls:AddSmoothToggle({
Name = "Smooth Live Toggle",
Description = "Animated left and right switch",
Default = true,
LiveColor = "Cold Heat",
Flag = "SmoothLiveToggle",
Callback = function(value)
print("Smooth toggle", value)
end,
Color = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
LiveColorSpeed = 1, -- optional
LiveColorTheme = nil, -- optional
LiveColors = { Color3.fromRGB(139, 92, 246), Color3.fromRGB(59, 130, 246) }, -- optional
Save = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `LiveColor` | boolean | Yes | Turns live color behavior on or off. |
| `LiveColorSpeed` | number | Yes | Controls the live color speed value. |
| `LiveColorTheme` | varies | Yes | Optional live color theme setting accepted by this method. |
| `LiveColors` | table | Yes | Supplies the live colors collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStepper
> Adds a numeric value control with increment and decrement actions.
Source: /docs/elements/controls-reference/add-stepper
# `AddStepper` [#addstepper]
## What it does [#what-it-does]
Adds a numeric value control with increment and decrement actions.
### When to use it [#when-to-use-it]
Use it for small integer choices where buttons are easier than dragging a slider.
`ElementFunction:AddStepper(StepConfig)`
```luau
LeftGroup:AddStepper({
Name = "Farm Priority",
Min = 1,
Max = 10,
Default = 3,
Increment = 1,
Callback = function(value)
print("priority", value)
end
})
```
```luau
LeftGroup:AddStepper({
Name = "Farm Priority",
Min = 1,
Max = 10,
Default = 3,
Increment = 1,
Callback = function(value)
print("priority", value)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Increment` | number | Yes | Step size applied when the numeric value changes. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTextArea
> Adds a multi-line text input.
Source: /docs/elements/controls-reference/add-text-area
# `AddTextArea` [#addtextarea]
## What it does [#what-it-does]
Adds a multi-line text input.
### When to use it [#when-to-use-it]
Use it for notes, scripts, messages, JSON, or any value too long for a one-line textbox.
`ElementFunction:AddTextArea(AreaConfig)`
```luau
LeftGroup:AddTextArea({
Name = "Input Textarea",
Content = "Multi-line command or notes input.",
Default = "",
Placeholder = "Enter Text...",
Height = 120,
Moveable = true,
Callback = function(value)
print("textarea", value)
end
})
```
```luau
LeftGroup:AddTextArea({
Name = "Input Textarea",
Content = "Multi-line command or notes input.",
Default = "",
Placeholder = "Enter Text...",
Height = 120,
Moveable = true,
Callback = function(value)
print("textarea", value)
end,
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | --------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Placeholder` | string | Yes | Hint shown while a text field is empty. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTextbox
> Adds a single-line text input with an optional saved flag and callback.
Source: /docs/elements/controls-reference/add-textbox
# `AddTextbox` [#addtextbox]
## What it does [#what-it-does]
Adds a single-line text input with an optional saved flag and callback.
### When to use it [#when-to-use-it]
Use it for names, IDs, search terms, commands, or short configuration values.
`ElementFunction:AddTextbox(TextboxConfig)`
```luau
LeftGroup:AddTextbox({
Name = "Command",
Default = "hello",
Placeholder = "Type command",
Moveable = true,
Callback = function(value, enterPressed)
if enterPressed then
print(value)
end
end
})
```
```luau
LeftGroup:AddTextbox({
Name = "Command",
Default = "hello",
Placeholder = "Type command",
Moveable = true,
Callback = function(value, enterPressed)
if enterPressed then
print(value)
end
end,
Ai = true, -- optional
Flag = "ExampleKey", -- optional
Gui = true, -- optional
Locked = true, -- optional
Save = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | --------------------------------------------------------------------- |
| `Ai` | boolean | Yes | Turns ai behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Gui` | boolean | Yes | Turns gui behavior on or off. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Placeholder` | string | Yes | Hint shown while a text field is empty. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
## Behavior and return value [#behavior-and-return-value]
### AI agent mode [#ai-agent-mode]
Set `Ai = true` to create the new agent. It accepts `Height`, `PermissionMode`, `Effort`, `AgentPlanner`, `WorkspaceTools`, `ShowContextDetails`, `MultilineInput`, `PromptTransform`, and `OnResponse`. Its controller adds `Send`, `GetLastResponse`, `GetTools`, `CallTool`, `SetPermissionMode`, `SetEffort`, `SetMultiline`, `SetAgentPlanner`, `GetCurrentTask`, and `AskQuestion`. See the [AI agent guide](/docs/ai-agent) for working examples and exact signatures.
The `CreateTextbox`, `Textbox`, `AddInput`, and `CreateInput` compatibility names forward to this constructor.
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddToastAction
> Adds an action that displays a toast-style notification.
Source: /docs/elements/controls-reference/add-toast-action
# `AddToastAction` [#addtoastaction]
## What it does [#what-it-does]
Adds an action that displays a toast-style notification.
### When to use it [#when-to-use-it]
Use it when a button should confirm an operation with short-lived feedback.
`ElementFunction:AddToastAction(ToastConfig)`
```luau
RightGroup:AddToastAction({
Name = "Toast Action",
Content = "Runs a callback and sends a themed notification.",
ButtonText = "Notify",
Callback = function()
print("toast action")
end
})
```
```luau
RightGroup:AddToastAction({
Name = "Toast Action",
Content = "Runs a callback and sends a themed notification.",
ButtonText = "Notify",
Callback = function()
print("toast action")
end,
Description = "Example text", -- optional
Image = "rbxassetid://0", -- optional
Notification = {}, -- optional
NotifyText = true, -- optional
Time = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | --------------- | -------- | ------------------------------------------------------------------- |
| `ButtonText` | string | Yes | Sets the button text. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Notification` | table | Yes | Supplies the notification collection. |
| `NotifyText` | boolean | Yes | Turns notify text behavior on or off. |
| `Time` | number | Yes | Display duration in seconds. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddToggle
> Adds an on/off control with optional saving, keybind, locking, and settings integration.
Source: /docs/elements/controls-reference/add-toggle
# `AddToggle` [#addtoggle]
## What it does [#what-it-does]
Adds an on/off control with optional saving, keybind, locking, and settings integration.
### When to use it [#when-to-use-it]
Use it for any boolean feature that the user should enable or disable.
`ElementFunction:AddToggle(ToggleConfig)`
```luau
RightQuickMenu:AddToggle({
Name = "Animated Window",
Default = true,
Callback = function(value)
print("Animated Window", value)
end
})
```
```luau
RightQuickMenu:AddToggle({
Name = "Animated Window",
Default = true,
Callback = function(value)
print("Animated Window", value)
end,
Binded = true, -- optional
Checkbox = true, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
ConfigCloud = true, -- optional
ConfigCloudAutoSend = true, -- optional
ConfigCloudKey = "ExampleKey", -- optional
Content = "Example content", -- optional
DefaultBind = Enum.KeyCode.RightShift, -- optional
Description = "Example text", -- optional
Flag = "ExampleKey", -- optional
Icon = "star", -- optional
IconSize = 18, -- optional
Locked = true, -- optional
Moveable = true, -- optional
Premium = true, -- optional
Save = true, -- optional
Settings = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------------- | ---------------------- | -------- | --------------------------------------------------------------------- |
| `Binded` | boolean | Yes | Turns binded behavior on or off. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Checkbox` | boolean | Yes | Turns checkbox behavior on or off. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `ConfigCloud` | boolean | Yes | Turns config cloud behavior on or off. |
| `ConfigCloudAutoSend` | boolean | Yes | Turns config cloud auto send behavior on or off. |
| `ConfigCloudKey` | varies | Yes | Optional config cloud key setting accepted by this method. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `DefaultBind` | string or Enum.KeyCode | Yes | Initial keyboard binding. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Icon` | string or number | Yes | Icon name or asset shown with the toggle. |
| `IconSize` | number | Yes | Icon size in pixels; defaults to `18`. |
| `Locked` | boolean | Yes | Prevents normal user interaction while enabled. |
| `Moveable` | boolean | Yes | Allows the element to be repositioned when editable mode supports it. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Premium` | boolean | Yes | Applies the library’s premium or restricted presentation. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `Settings` | table | Yes | Supplies the settings collection. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateCheckbox
> Creates a checkbox control with an optional saved flag.
Source: /docs/elements/controls-reference/create-checkbox
# `CreateCheckbox` [#createcheckbox]
## What it does [#what-it-does]
Creates a checkbox control with an optional saved flag.
### When to use it [#when-to-use-it]
Use it for a simple boolean choice where a checkmark is clearer than a switch.
`ElementFunction:CreateCheckbox(CheckboxConfig)`
```luau
local PlainCheckbox = LeftGroup:CreateCheckbox({
Name = "Plain Checkbox",
CurrentValue = false,
Flag = "PlainCheckboxDemo",
Save = true,
Callback = function(value)
print("plain checkbox", value)
end
})
```
```luau
local PlainCheckbox = LeftGroup:CreateCheckbox({
Name = "Plain Checkbox",
CurrentValue = false,
Flag = "PlainCheckboxDemo",
Save = true,
Callback = function(value)
print("plain checkbox", value)
end,
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateCopyButton
> Creates a button that copies a configured value.
Source: /docs/elements/controls-reference/create-copy-button
# `CreateCopyButton` [#createcopybutton]
## What it does [#what-it-does]
Creates a button that copies a configured value.
### When to use it [#when-to-use-it]
Use it beside codes, identifiers, commands, or URLs that users frequently copy.
`ElementFunction:CreateCopyButton(CopyConfig)`
```luau
local CopyInvite = LeftGroup:CreateCopyButton({
Name = "Copy Discord Invite",
Description = "Copies the current invite in one click.",
Icon = "link",
Value = "https://discord.gg/QEW8ap3MuV",
Callback = function(value, success)
print("copy invite", value, success)
end
})
```
```luau
local CopyInvite = LeftGroup:CreateCopyButton({
Name = "Copy Discord Invite",
Description = "Copies the current invite in one click.",
Icon = "link",
Value = "https://discord.gg/QEW8ap3MuV",
Callback = function(value, success)
print("copy invite", value, success)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateFlipButton
> Creates a two-sided button that flips between front and back content.
Source: /docs/elements/controls-reference/create-flip-button
# `CreateFlipButton` [#createflipbutton]
## What it does [#what-it-does]
Creates a two-sided button that flips between front and back content.
### When to use it [#when-to-use-it]
Use it for reveal interactions or controls with two related faces.
`ElementFunction:CreateFlipButton(FlipConfig)`
```luau
local FlipDemo = LeftGroup:CreateFlipButton({
Front = "Hover me",
Back = "Now click me",
Callback = function(text, showingBack)
print("flip button", text, showingBack)
end
})
```
```luau
local FlipDemo = LeftGroup:CreateFlipButton({
Front = "Hover me",
Back = "Now click me",
Callback = function(text, showingBack)
print("flip button", text, showingBack)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Back` | varies | Yes | Optional back setting accepted by this method. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Front` | varies | Yes | Optional front setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateRippleButton
> Creates a button with a ripple press effect.
Source: /docs/elements/controls-reference/create-ripple-button
# `CreateRippleButton` [#createripplebutton]
## What it does [#what-it-does]
Creates a button with a ripple press effect.
### When to use it [#when-to-use-it]
Use it for primary actions that benefit from clear animated click feedback.
`ElementFunction:CreateRippleButton(RippleConfig)`
```luau
local RippleDemo = LeftGroup:CreateRippleButton({
Name = "Ripple Button",
Description = "The ripple begins exactly where you press.",
Callback = function()
Library:MakeToast({Title = "Ripple pressed", Variant = "Success", Icon = "mouse-pointer-click", Time = 2})
end
})
```
```luau
local RippleDemo = LeftGroup:CreateRippleButton({
Name = "Ripple Button",
Description = "The ripple begins exactly where you press.",
Callback = function()
Library:MakeToast({Title = "Ripple pressed", Variant = "Success", Icon = "mouse-pointer-click", Time = 2})
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddClock
> Adds a live clock whose display format can be configured.
Source: /docs/elements/data-reference/add-clock
# `AddClock` [#addclock]
## What it does [#what-it-does]
Adds a live clock whose display format can be configured.
### When to use it [#when-to-use-it]
Use it for dashboards, session tools, or pages that need continuously updated local time.
`ElementFunction:AddClock(ClockConfig)`
```luau
RightGroup:AddClock({
Name = "Local Clock"
})
```
```luau
RightGroup:AddClock({
Name = "Local Clock",
Description = "Example text", -- optional
Format = "%s", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ----------------------------------------------------------- |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Format` | string | Yes | Display format used for the generated text or time. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddCountdown
> Adds a countdown timer with controls and a completion callback.
Source: /docs/elements/data-reference/add-countdown
# `AddCountdown` [#addcountdown]
## What it does [#what-it-does]
Adds a countdown that can start automatically, display days, and notify your code when it reaches zero.
`ElementFunction:AddCountdown(CountConfig)`
```luau
local StormTimer = Weather:AddCountdown({
Name = "Next storm",
Duration = 3725,
AutoStart = true
})
```
```luau
local StormTimer = Weather:AddCountdown({
Name = "Next storm",
Content = "Counts down and fires when finished.",
Duration = 3725,
ShowDays = false,
Color = "Sky",
AutoStart = true,
OnTick = function(remaining) print(remaining) end,
OnFinished = function() print("storm arrived") end,
Callback = function(remaining) print("countdown", remaining) end
})
StormTimer:Pause()
StormTimer:Resume()
StormTimer:Add(60)
StormTimer:Set(3725)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------------- | ------------ | -------- | ----------------------------------- |
| `Name` / `Title` | string | Yes | Timer heading. |
| `Content` / `Description` | string | Yes | Supporting text. |
| `Duration` / `Seconds` / `Time` | number | Yes | Initial countdown duration. |
| `ShowDays` | boolean | Yes | Shows a days segment when true. |
| `Color` | color value | Yes | Timer accent. |
| `AutoStart` | boolean | Yes | Starts the timer when created. |
| `OnTick` / `Callback` | function | Yes | Runs as the remaining time changes. |
| `OnFinished` | function | Yes | Runs when the timer reaches zero. |
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLoadoutGroup
> Adds a selectable loadout strip with item cards and an equip action.
Source: /docs/elements/data-reference/add-loadout-group
# `AddLoadoutGroup` [#addloadoutgroup]
## What it does [#what-it-does]
Displays a horizontal set of loadout items, keeps one item selected, and runs a separate equip action for that selection.
`ElementFunction:AddLoadoutGroup(LoadoutConfig)`
```luau
local Loadout = Builds:AddLoadoutGroup({
Name = "Defender",
Items = {
{ Name = "Health", Icon = "shield" },
{ Name = "Guard", Icon = "activity" },
{ Name = "Charge", Icon = "star" },
},
})
```
```luau
local Loadout = Builds:AddLoadoutGroup({
Name = "Defender",
Color = Color3.fromRGB(96, 170, 255),
ButtonText = "Equip Defense Build",
Items = {
{ Name = "Health", Icon = "shield" },
{ Name = "Guard", Icon = "activity" },
{ Name = "Charge", Icon = "star" },
},
OnSelect = function(name, index, item, controller)
print("Selected", item.Name, index)
end,
Callback = function(name, item, index, controller)
print("Equipped", item.Name, index)
end,
})
Loadout:SetSelected(2)
Loadout:Equip()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | What it controls |
| ---------------------------------------- | ------------ | ------------------------------------------------------------------------- |
| `Name` / `Title` | `string` | Loadout heading. |
| `Color` | `Color3` | Accent for selection and item icons. |
| `ButtonText` | `string` | Equip-button label. |
| `Items` / `Icons` | `table` | Item rows with `Name`, `Icon`, optional `Color`, and optional `Callback`. |
| `OnSelect` | `function` | Runs when an item card is selected. |
| `Callback` / `OnEquip` / `EquipCallback` | `function` | Runs when the equip button is pressed. |
## Controller methods [#controller-methods]
| Method | Result |
| ---------------------- | --------------------------------------------- |
| `AddItem(spec)` | Appends and returns an item. |
| `SetItems(items)` | Replaces every item. |
| `SetSelected(index)` | Selects an existing item. |
| `GetSelected()` | Returns the selected item and index. |
| `SetTitle(value)` | Changes the heading. |
| `SetButtonText(value)` | Changes the equip label. |
| `Equip()` | Runs the equip callback for the current item. |
Compatibility aliases: `AddLoadout` and `CreateLoadout`.
## Related reference [#related-reference]
* [Controller methods](/docs/reference/controllers)
* [All elements](/docs/reference/all-elements)
* [Full example](/docs/examples)
---
# AddMeterGroup
> Adds several related meters in one compact group.
Source: /docs/elements/data-reference/add-meter-group
# `AddMeterGroup` [#addmetergroup]
## What it does [#what-it-does]
Adds several related meters in one compact group.
### When to use it [#when-to-use-it]
Use it for health, resources, performance values, or other measurements that should be compared together.
`ElementFunction:AddMeterGroup(MeterConfig)`
```luau
local Result = Section:AddMeterGroup({
Name = "Example",
})
```
```luau
local Result = Section:AddMeterGroup({
Name = "Example",
Color = Color3.fromRGB(139, 92, 246), -- optional
Items = { "Item 1", "Item 2" }, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPlayerCount
> Adds a live count of players in the current server.
Source: /docs/elements/data-reference/add-player-count
# `AddPlayerCount` [#addplayercount]
## What it does [#what-it-does]
Adds a live count of players in the current server.
### When to use it [#when-to-use-it]
Use it on server dashboards or status pages that need current population information.
`ElementFunction:AddPlayerCount(CountConfig)`
```luau
RightGroup:AddPlayerCount({
Name = "Population"
})
```
```luau
RightGroup:AddPlayerCount({
Name = "Population",
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ----------------------------------------------------------- |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPlayerVisualizer
> Adds a visual player preview with optional overlay boxes and live coloring.
Source: /docs/elements/data-reference/add-player-visualizer
# `AddPlayerVisualizer` [#addplayervisualizer]
## What it does [#what-it-does]
Adds a visual player preview with optional overlay boxes and live coloring.
### When to use it [#when-to-use-it]
Use it for avatar previews, player-selection tools, or visual configuration panels.
`ElementFunction:AddPlayerVisualizer(PlayerConfig)`
```luau
Visuals:AddPlayerVisualizer({
Name = "My Player",
Player = game:GetService("Players").LocalPlayer,
Height = 238,
LiveColor = "Cold Heat",
LiveColorSpeed = 0.24,
BoxCallback = function(enabled, player, box)
print(box.Name, enabled, player.Name)
end,
Callback = function(player)
print("Visualizing", player.Name)
end
})
```
```luau
Visuals:AddPlayerVisualizer({
Name = "My Player",
Player = game:GetService("Players").LocalPlayer,
Height = 238,
LiveColor = "Cold Heat",
LiveColorSpeed = 0.24,
BoxCallback = function(enabled, player, box)
print(box.Name, enabled, player.Name)
end,
Callback = function(player)
print("Visualizing", player.Name)
end,
Boxes = {}, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `BoxCallback` | function | Yes | Runs when an overlay box or box item is used. |
| `Boxes` | table | Yes | Supplies the boxes collection. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `LiveColor` | boolean | Yes | Turns live color behavior on or off. |
| `LiveColorSpeed` | number | Yes | Controls the live color speed value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Player` | Player | Yes | Player represented by the visual element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddProfileCards
> Adds a responsive player/profile card grid with optional server loading.
Source: /docs/elements/data-reference/add-profile-cards
# `AddProfileCards` [#addprofilecards]
## What it does [#what-it-does]
Adds profile cards for a supplied list or the current Roblox server. Profiles can be loaded on demand or refreshed automatically.
`ElementFunction:AddProfileCards(ProfileConfig)`
```luau
local Profiles = NewStuff:AddProfileCards({
Name = "Players In Server",
LoadServer = true
})
```
```luau
local Profiles = NewStuff:AddProfileCards({
Name = "Players In Server",
Columns = 2,
ShowTitle = true,
LoadServer = true,
AutoRefresh = true,
Items = {},
Callback = function(profile)
print(profile.Name, profile.UserId)
end
})
Profiles:LoadServer()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------------------------- | ------------ | -------- | ---------------------------------------- |
| `Name` / `Title` | string | Yes | Grid heading. |
| `Items` / `Players` / `Profiles` | table | Yes | Profile definitions. |
| `Columns` | number (1–4) | Yes | Number of columns. |
| `ShowTitle` | boolean | Yes | Shows or hides the heading. |
| `LoadServer` | boolean | Yes | Loads players from the current server. |
| `AutoRefresh` | boolean | Yes | Refreshes server profiles automatically. |
| `Callback` | function | Yes | Runs when a profile is selected. |
## Related reference [#related-reference]
* [AddPlayerVisualizer](/docs/elements/data-reference/add-player-visualizer)
* [All element options](/docs/reference/element-options)
* [Full example](/docs/examples)
---
# AddProgressBar
> Adds a read-only or controller-driven progress display between a minimum and maximum.
Source: /docs/elements/data-reference/add-progress-bar
# `AddProgressBar` [#addprogressbar]
## What it does [#what-it-does]
Adds a read-only or controller-driven progress display between a minimum and maximum.
### When to use it [#when-to-use-it]
Use it for loading, completion, health, quotas, or any value whose progress should be visible.
`ElementFunction:AddProgressBar(ProgressConfig)`
```luau
DataPage:AddProgressBar({
Name = "Load",
Value = 64,
Max = 100,
Description = "Example progress"
})
```
```luau
DataPage:AddProgressBar({
Name = "Load",
Value = 64,
Max = 100,
Description = "Example progress",
Color = Color3.fromRGB(139, 92, 246), -- optional
Default = false, -- optional
Desc = "Example", -- optional
Min = 0, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Desc` | string | Yes | Short-form alias for the supporting description. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRevenueCard
> Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics.
Source: /docs/elements/data-reference/add-revenue-card
# `AddRevenueCard` [#addrevenuecard]
## What it does [#what-it-does]
Adds an animated metric card with trends, prefixes, suffixes, and supporting mini-statistics.
### When to use it [#when-to-use-it]
Use it for dashboard KPIs such as revenue, usage, balances, or growth.
`ElementFunction:AddRevenueCard(RevenueConfig)`
```luau
local RevenueCard = Metrics:AddRevenueCard({
Name = "Revenue",
Value = 30858,
Prefix = "$",
Change = "+10.4%",
Color = Color3.fromRGB(20, 210, 145),
Duration = 0.75,
MiniStats = {
{Name = "Health", Value = "100 HP", Change = "+∞", Status = "Good"},
{Name = "FPS", Value = 185, Change = "+29", Status = "Good"},
{Name = "Speed", Value = "83 WS", Change = "+1", Status = "Medium"},
{Name = "Players", Value = 14, Change = "0", Status = "Bad"}
}
})
```
```luau
local RevenueCard = Metrics:AddRevenueCard({
Name = "Revenue",
Value = 30858,
Prefix = "$",
Change = "+10.4%",
Color = Color3.fromRGB(20, 210, 145),
Duration = 0.75,
MiniStats = {
{Name = "Health", Value = "100 HP", Change = "+∞", Status = "Good"},
{Name = "FPS", Value = 185, Change = "+29", Status = "Good"},
{Name = "Speed", Value = "83 WS", Change = "+1", Status = "Medium"},
{Name = "Players", Value = 14, Change = "0", Status = "Bad"}
},
Callback = function(value) -- optional
print("Callback:", value)
end,
Decimals = 1, -- optional
Icon = "home", -- optional
Image = "rbxassetid://0", -- optional
Items = { "Item 1", "Item 2" }, -- optional
StartValue = 1, -- optional
Stats = {}, -- optional
Suffix = "Example", -- optional
Trend = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------ | --------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Change` | number | Yes | Controls the change value. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Decimals` | number | Yes | Controls the decimals value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Items` | table | Yes | Item definitions rendered by the element. |
| `MiniStats` | table | Yes | Supplies the mini stats collection. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `StartValue` | number | Yes | Controls the start value value. |
| `Stats` | table | Yes | Supplies the stats collection. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `Trend` | varies | Yes | Optional trend setting accepted by this method. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRuntimeMonitor
> Adds an automatically refreshing set of runtime metrics.
Source: /docs/elements/data-reference/add-runtime-monitor
# `AddRuntimeMonitor` [#addruntimemonitor]
## What it does [#what-it-does]
Adds an automatically refreshing set of runtime metrics.
### When to use it [#when-to-use-it]
Use it for FPS, ping, memory, task status, or custom diagnostics sampled on an interval.
`ElementFunction:AddRuntimeMonitor(MonitorConfig)`
```luau
local RuntimeMonitor = RightGroup:AddRuntimeMonitor({
Name = "Live Runtime",
Interval = 1,
Metrics = {"FPS", "Ping", "Memory", "Players"}
})
```
```luau
local RuntimeMonitor = RightGroup:AddRuntimeMonitor({
Name = "Live Runtime",
Interval = 1,
Metrics = {"FPS", "Ping", "Memory", "Players"},
AutoStart = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ----------------------------------------------------- |
| `AutoStart` | boolean | Yes | Turns auto start behavior on or off. |
| `Interval` | number | Yes | Delay between automatic refreshes or samples. |
| `Metrics` | table | Yes | Metric definitions sampled by the monitor. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStatCard
> Adds a compact statistic card with a value and supporting description.
Source: /docs/elements/data-reference/add-stat-card
# `AddStatCard` [#addstatcard]
## What it does [#what-it-does]
Adds a compact statistic card with a value and supporting description.
### When to use it [#when-to-use-it]
Use it for one important number that does not need a full chart.
`ElementFunction:AddStatCard(StatConfig)`
```luau
Metrics:AddStatCard({
Name = "Players",
Value = tostring(#game:GetService("Players"):GetPlayers()),
Description = "Players online"
})
```
```luau
Metrics:AddStatCard({
Name = "Players",
Value = tostring(#game:GetService("Players"):GetPlayers()),
Description = "Players online",
Desc = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
| `Desc` | string | Yes | Short-form alias for the supporting description. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStatusBox
> Adds a larger status message with title, icon, variant, and custom height.
Source: /docs/elements/data-reference/add-status-box
# `AddStatusBox` [#addstatusbox]
## What it does [#what-it-does]
Adds a larger status message with title, icon, variant, and custom height.
### When to use it [#when-to-use-it]
Use it for errors, success states, connection health, or detailed system messages.
`ElementFunction:AddStatusBox(StatusConfig)`
```luau
GroupMain:AddStatusBox({Variant = "success", Title = "Success", Content = "The requested module loaded correctly."})
```
```luau
GroupMain:AddStatusBox({Variant = "success", Title = "Success", Content = "The requested module loaded correctly.",
Content = "Example content", -- optional
Description = "Example text", -- optional
Height = 240, -- optional
Icon = "home", -- optional
Kind = "Default", -- optional
Message = "Example text", -- optional
Name = "Example", -- optional
Status = "Default", -- optional
Text = "Example text", -- optional
Title = "Example", -- optional
Type = "Default", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | -------------------------------------------------------------- |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Kind` | string | Yes | Semantic kind used to select presentation and behavior. |
| `Message` | string | Yes | Sets the message. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Status` | string | Yes | Current status label displayed by the element. |
| `Text` | string | Yes | Text displayed inside the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Type` | string | Yes | Named type or presentation style. |
| `Variant` | string | Yes | Visual or semantic variant such as success, warning, or error. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddStatusDot
> Adds a label paired with a colored status indicator.
Source: /docs/elements/data-reference/add-status-dot
# `AddStatusDot` [#addstatusdot]
## What it does [#what-it-does]
Adds a label paired with a colored status indicator.
### When to use it [#when-to-use-it]
Use it for concise online/offline, healthy/unhealthy, or active/inactive states.
`ElementFunction:AddStatusDot(StatusConfig)`
```luau
local Result = Section:AddStatusDot({
Name = "Example",
})
```
```luau
local Result = Section:AddStatusDot({
Name = "Example",
Color = Color3.fromRGB(139, 92, 246), -- optional
Content = "Example content", -- optional
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateBarChart
> Creates a bar chart from labeled points.
Source: /docs/elements/data-reference/create-bar-chart
# `CreateBarChart` [#createbarchart]
## What it does [#what-it-does]
Creates a bar chart from labeled points.
### When to use it [#when-to-use-it]
Use it to compare discrete categories or values side by side.
`ElementFunction:CreateBarChart(BarConfig)`
```luau
local KillsChart = Metrics:CreateBarChart({
Name = "Kills per Match",
Icon = "crosshair",
Points = {
{Label = "M1", Value = 2},
{Label = "M2", Value = 3},
{Label = "M3", Value = 5},
{Label = "M4", Value = 6},
{Label = "M5", Value = 4},
{Label = "M6", Value = 3},
{Label = "M7", Value = 2}
},
Callback = function(point)
Library:MakeToast({Title = point.Label, Content = tostring(point.Value) .. " kills", Variant = "Info", Icon = "crosshair", Time = 2})
end
})
```
```luau
local KillsChart = Metrics:CreateBarChart({
Name = "Kills per Match",
Icon = "crosshair",
Points = {
{Label = "M1", Value = 2},
{Label = "M2", Value = 3},
{Label = "M3", Value = 5},
{Label = "M4", Value = 6},
{Label = "M5", Value = 4},
{Label = "M6", Value = 3},
{Label = "M7", Value = 2}
},
Callback = function(point)
Library:MakeToast({Title = point.Label, Content = tostring(point.Value) .. " kills", Variant = "Info", Icon = "crosshair", Time = 2})
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateChart
> Creates a configurable line or filled chart with a bounded point history.
Source: /docs/elements/data-reference/create-chart
# `CreateChart` [#createchart]
## What it does [#what-it-does]
Creates a configurable line or filled chart with a bounded point history.
### When to use it [#when-to-use-it]
Use it for trends, time series, or changing numeric values.
`ElementFunction:CreateChart(ChartConfig)`
```luau
local RevenueChart = Metrics:CreateChart({
Name = "Revenue",
Icon = "coins",
Prefix = "$",
Points = {7200, 8100, 7600, 9300, 8800, 10400, 30858},
Color = Color3.fromRGB(42, 220, 166),
Filled = true,
Smooth = true,
Dots = true,
MaxPoints = 12,
Height = 174,
Callback = function(point)
Library:MakeToast({Title = "Revenue point " .. tostring(point.Index), Content = tostring(point.Text), Variant = "Info", Icon = "coins", Time = 2})
end
})
```
```luau
local RevenueChart = Metrics:CreateChart({
Name = "Revenue",
Icon = "coins",
Prefix = "$",
Points = {7200, 8100, 7600, 9300, 8800, 10400, 30858},
Color = Color3.fromRGB(42, 220, 166),
Filled = true,
Smooth = true,
Dots = true,
MaxPoints = 12,
Height = 174,
Callback = function(point)
Library:MakeToast({Title = "Revenue point " .. tostring(point.Index), Content = tostring(point.Text), Variant = "Info", Icon = "coins", Time = 2})
end,
Suffix = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Dots` | boolean | Yes | Turns dots behavior on or off. |
| `Filled` | boolean | Yes | Turns filled behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `MaxPoints` | number | Yes | Controls the max points value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Points` | table | Yes | Data points rendered by the chart. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Smooth` | boolean | Yes | Turns smooth behavior on or off. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateDownloadProgress
> Creates a progress controller specialized for downloads and completion state.
Source: /docs/elements/data-reference/create-download-progress
# `CreateDownloadProgress` [#createdownloadprogress]
## What it does [#what-it-does]
Creates a progress controller specialized for downloads and completion state.
### When to use it [#when-to-use-it]
Use it to show a timed or externally updated download operation.
`ElementFunction:CreateDownloadProgress(DownloadConfig)`
```luau
local FakeDownload = LeftGroup:CreateDownloadProgress({
Name = "Fake download",
Description = "Animates smoothly from 0 to 100.",
CurrentValue = 0,
Duration = 5,
Callback = function(value)
print("download progress", value)
end,
Completed = function()
Library:MakeToast({Title = "Download complete", Variant = "Success", Icon = "download", Time = 3})
end
})
```
```luau
local FakeDownload = LeftGroup:CreateDownloadProgress({
Name = "Fake download",
Description = "Animates smoothly from 0 to 100.",
CurrentValue = 0,
Duration = 5,
Callback = function(value)
print("download progress", value)
end,
Completed = function()
Library:MakeToast({Title = "Download complete", Variant = "Success", Icon = "download", Time = 3})
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Completed` | boolean | Yes | Turns completed behavior on or off. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateProgressBar
> Creates a progress bar with explicit current value and display formatting.
Source: /docs/elements/data-reference/create-progress-bar
# `CreateProgressBar` [#createprogressbar]
## What it does [#what-it-does]
Creates a progress bar with explicit current value and display formatting.
### When to use it [#when-to-use-it]
Use it for loading, completion, health, or quota values controlled by your script.
`ElementFunction:CreateProgressBar(BarConfig)`
```luau
local Gen3Progress = LeftGroup:CreateProgressBar({
Name = "Level Progress",
Description = "Read only progress with a smooth gradient fill.",
CurrentValue = 340,
Min = 0,
Max = 500,
Suffix = " xp",
ValueText = "{value} xp out of {max}",
Callback = function(value)
print("level progress", value)
end
})
```
```luau
local Gen3Progress = LeftGroup:CreateProgressBar({
Name = "Level Progress",
Description = "Read only progress with a smooth gradient fill.",
CurrentValue = 340,
Min = 0,
Max = 500,
Suffix = " xp",
ValueText = "{value} xp out of {max}",
Callback = function(value)
print("level progress", value)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
| `ValueText` | string | Yes | Custom display text for the current value. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateProgress
> Creates a controller-driven progress element with optional saving and callback behavior.
Source: /docs/elements/data-reference/create-progress
# `CreateProgress` [#createprogress]
## What it does [#what-it-does]
Creates a controller-driven progress element with optional saving and callback behavior.
### When to use it [#when-to-use-it]
Use it when code needs to update a bounded value over time.
`ElementFunction:CreateProgress(ProgressConfig)`
```luau
local StaticProgress = LeftGroup:CreateProgress({
Name = "Static progress",
Icon = "battery-medium",
CurrentValue = 60,
Min = 0,
Max = 100,
Suffix = "%",
Flag = "StaticProgressDemo",
Save = true,
Callback = function(value, percent)
print("static progress", value, percent)
end
})
```
```luau
local StaticProgress = LeftGroup:CreateProgress({
Name = "Static progress",
Icon = "battery-medium",
CurrentValue = 60,
Min = 0,
Max = 100,
Suffix = "%",
Flag = "StaticProgressDemo",
Save = true,
Callback = function(value, percent)
print("static progress", value, percent)
end,
Description = "Example text", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CurrentValue` | varies | Yes | Value displayed when the controller is first created. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Flag` | string | Yes | Unique key used to identify this value for saving and lookup. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Max` | number | Yes | Highest value the control or display accepts. |
| `Min` | number | Yes | Lowest value the control or display accepts. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Save` | boolean | Yes | Persists the value when window configuration saving is enabled. |
| `Suffix` | string | Yes | Text shown after a numeric or formatted value. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateStackedChart
> Creates a stacked chart from multiple named series.
Source: /docs/elements/data-reference/create-stacked-chart
# `CreateStackedChart` [#createstackedchart]
## What it does [#what-it-does]
Creates a stacked chart from multiple named series.
### When to use it [#when-to-use-it]
Use it to compare totals and their component parts across rows or categories.
`ElementFunction:CreateStackedChart(StackConfig)`
```luau
local SpendingChart = Metrics:CreateStackedChart({
Name = "Spending",
Icon = "wallet",
Prefix = "$",
Series = {"Housing", "Food", "Transport"},
Rows = {
{Name = "Anna", Values = {8, 8, 4}},
{Name = "Ben", Values = {12, 10, 8}},
{Name = "Clara", Values = {16, 10, 10}},
{Name = "David", Values = {20, 24, 6}}
},
Callback = function(segment)
print(segment.RowName, segment.SeriesName, segment.Value)
end
})
```
```luau
local SpendingChart = Metrics:CreateStackedChart({
Name = "Spending",
Icon = "wallet",
Prefix = "$",
Series = {"Housing", "Food", "Transport"},
Rows = {
{Name = "Anna", Values = {8, 8, 4}},
{Name = "Ben", Values = {12, 10, 8}},
{Name = "Clara", Values = {16, 10, 10}},
{Name = "David", Values = {20, 24, 6}}
},
Callback = function(segment)
print(segment.RowName, segment.SeriesName, segment.Value)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Prefix` | string | Yes | Text shown before a numeric or formatted value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `Series` | table | Yes | Named data series rendered together. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateStat
> Creates an animated statistic with optional delta and duration.
Source: /docs/elements/data-reference/create-stat
# `CreateStat` [#createstat]
## What it does [#what-it-does]
Creates an animated statistic with optional delta and duration.
### When to use it [#when-to-use-it]
Use it for a single KPI that may change and should emphasize the new value.
`ElementFunction:CreateStat(StatConfig)`
```luau
local CurrencyStat = Metrics:CreateStat({
Name = "Currency",
Icon = "coins",
Value = "$21",
Delta = "+19%",
Duration = 0.55,
Callback = function(value, delta)
print("currency", value, delta)
end
})
```
```luau
local CurrencyStat = Metrics:CreateStat({
Name = "Currency",
Icon = "coins",
Value = "$21",
Delta = "+19%",
Duration = 0.55,
Callback = function(value, delta)
print("currency", value, delta)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Delta` | number | Yes | Controls the delta value. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Value` | varies | Yes | Value displayed, compared, copied, or supplied to the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDraggableMenu
> Creates a movable menu surface at library scope.
Source: /docs/elements/library-reference/add-draggable-menu
# `AddDraggableMenu` [#adddraggablemenu]
## What it does [#what-it-does]
Creates a movable menu surface at library scope.
### When to use it [#when-to-use-it]
Use it for floating tools that should be repositioned independently of the main window.
`XLQPGen1:AddDraggableMenu(titleText)`
```luau
local Result = Library:AddDraggableMenu()
```
```luau
local Result = Library:AddDraggableMenu(
"Example", -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | -------------------------------------- |
| `titleText` | string | Yes | Title displayed by the draggable menu. |
Exact signature:
```luau
XLQPGen1:AddDraggableMenu(titleText)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakeNotification
> Displays a temporary notification with content, position, duration, image, and optional actions.
Source: /docs/elements/library-reference/make-notification
# `MakeNotification` [#makenotification]
## What it does [#what-it-does]
Displays a temporary notification with content, position, duration, image, and optional actions.
### When to use it [#when-to-use-it]
Use it for non-blocking success, error, warning, or informational feedback.
`XLQPGen1:MakeNotification(NotificationConfig)`
```luau
Library:MakeNotification()
```
```luau
Library:MakeNotification(
{ Name = "Example", Content = "Example text" }, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| -------------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `NotificationConfig` | table | Yes | Notification name, content, image, position, duration, and actions. |
Exact signature:
```luau
XLQPGen1:MakeNotification(NotificationConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddBytebeat
> Adds a configurable bytebeat audio generator with playback and visualization controls.
Source: /docs/elements/media-reference/add-bytebeat
# `AddBytebeat` [#addbytebeat]
## What it does [#what-it-does]
Adds a configurable bytebeat audio generator with playback and visualization controls.
### When to use it [#when-to-use-it]
Use it for procedural audio experiments, presets, or music tools driven by compact bytebeat formulas.
`ElementFunction:AddBytebeat(BytebeatConfig)`
```luau
local Result = Section:AddBytebeat({
Name = "Example",
Default = false,
})
```
```luau
local Result = Section:AddBytebeat({
Name = "Example",
Default = false,
DefaultPreset = "Example", -- optional
Duration = 1, -- optional
Hz = 1, -- optional
HzIncrement = 1, -- optional
MaxDuration = 100, -- optional
MaxHz = 100, -- optional
MaxSeconds = 100, -- optional
Mode = "Default", -- optional
Pitch = 1, -- optional
Playlist = {}, -- optional
Seconds = 1, -- optional
Speed = 1, -- optional
Visualizer = true, -- optional
VisualizerBars = 1, -- optional
VisualizerHeight = 240, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ---------------- | -------- | ---------------------------------------------------------------- |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `DefaultPreset` | string | Yes | Sets the default preset. |
| `Duration` | number | Yes | Animation, cooldown, or operation duration in seconds. |
| `Hz` | number | Yes | Controls the hz value. |
| `HzIncrement` | number | Yes | Controls the hz increment value. |
| `MaxDuration` | number | Yes | Controls the max duration value. |
| `MaxHz` | number | Yes | Controls the max hz value. |
| `MaxSeconds` | number | Yes | Controls the max seconds value. |
| `Mode` | string | Yes | Named operating mode that selects a behavior preset. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Pitch` | number | Yes | Playback pitch or speed multiplier. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Seconds` | number | Yes | Controls the seconds value. |
| `Speed` | number | Yes | Controls the speed value. |
| `Visualizer` | boolean or table | Yes | Enables or configures audio-reactive visualization. |
| `VisualizerBars` | number | Yes | Number of bars rendered by the visualizer. |
| `VisualizerHeight` | number | Yes | Maximum height of the visualizer area. |
## Behavior and return value [#behavior-and-return-value]
The current source also accepts `Looped`, `Cache`, `FrameBudget`, and `WriteBlock` for playback and render configuration. Presets may override render settings. See [Current API additions](/docs/reference/october-update#bytebeat-render-settings) for the supported ranges and a working example.
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDiscPlayer
> Adds a disc-style audio player connected to a playlist or media controller.
Source: /docs/elements/media-reference/add-disc-player
# `AddDiscPlayer` [#adddiscplayer]
## What it does [#what-it-does]
Adds a disc-style audio player connected to a playlist or media controller.
### When to use it [#when-to-use-it]
Use it when you want music playback controls with a visual spinning-disc presentation.
`XLQPGen1:AddDiscPlayer(Config)`
```luau
local DiscPlayer = Library:AddDiscPlayer({
Name = "Now Playing",
MediaPlayer = MediaPlayer,
SpinSpeed = 110,
Volume = 0.5,
Loop = true,
AutoPlay = false,
Position = UDim2.new(0, 20, 1, -116),
Playlist = {
{Name = "Chill Track", SoundId = "rbxassetid://1843529631", Image = "rbxassetid://8834748103"},
{Name = "Action Track", SoundId = "rbxassetid://9048375035", Image = "rbxassetid://8834748103"},
{Name = "Soft Loop", SoundId = "rbxassetid://1837467282", Image = "rbxassetid://8834748103"}
}
})
```
```luau
local DiscPlayer = Library:AddDiscPlayer({
Name = "Now Playing",
MediaPlayer = MediaPlayer,
SpinSpeed = 110,
Volume = 0.5,
Loop = true,
AutoPlay = false,
Position = UDim2.new(0, 20, 1, -116),
Playlist = {
{Name = "Chill Track", SoundId = "rbxassetid://1843529631", Image = "rbxassetid://8834748103"},
{Name = "Action Track", SoundId = "rbxassetid://9048375035", Image = "rbxassetid://8834748103"},
{Name = "Soft Loop", SoundId = "rbxassetid://1837467282", Image = "rbxassetid://8834748103"}
}
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ---------------------------------------------------------------- |
| `AutoPlay` | boolean | Yes | Starts playback automatically after creation. |
| `Loop` | boolean | Yes | Repeats playback after reaching the end. |
| `MediaPlayer` | varies | Yes | Optional media player setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Position` | string | Yes | Sets the position. |
| `SpinSpeed` | number | Yes | Controls the spin speed value. |
| `Volume` | number | Yes | Playback volume used by the media element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDrawingGrid
> Adds a cell-based drawing canvas with brush and callback controls.
Source: /docs/elements/media-reference/add-drawing-grid
# `AddDrawingGrid` [#adddrawinggrid]
## What it does [#what-it-does]
Adds a cell-based drawing canvas with brush and callback controls.
### When to use it [#when-to-use-it]
Use it for pixel art, map editors, selection grids, or other interactive cell layouts.
`ElementFunction:AddDrawingGrid(GridConfig)`
```luau
local DrawingGrid = Visuals:AddDrawingGrid({
Name = "Drawing Grid",
Height = 240,
Boxes = true,
Columns = 32,
Rows = 20,
BrushSize = 2,
Color = Color3.fromRGB(255, 255, 255),
Callback = function(grid)
print("drawing grid updated", grid.Tool, grid.Boxes)
end
})
```
```luau
local DrawingGrid = Visuals:AddDrawingGrid({
Name = "Drawing Grid",
Height = 240,
Boxes = true,
Columns = 32,
Rows = 20,
BrushSize = 2,
Color = Color3.fromRGB(255, 255, 255),
Callback = function(grid)
print("drawing grid updated", grid.Tool, grid.Boxes)
end,
BoxHeight = 240, -- optional
BoxWidth = 320, -- optional
CellHeight = 240, -- optional
CellWidth = 320, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------ | ------------ | -------- | ------------------------------------------------------------------- |
| `BoxHeight` | number | Yes | Controls the box height value. |
| `BoxWidth` | number | Yes | Controls the box width value. |
| `Boxes` | table | Yes | Supplies the boxes collection. |
| `BrushSize` | number | Yes | Controls the brush size value. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `CellHeight` | number | Yes | Controls the cell height value. |
| `CellWidth` | number | Yes | Controls the cell width value. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Columns` | table | Yes | Column definitions used to lay out row data. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddImage
> Adds an image surface with sizing, tint, transparency, and scale controls.
Source: /docs/elements/media-reference/add-image
# `AddImage` [#addimage]
## What it does [#what-it-does]
Adds an image surface with sizing, tint, transparency, and scale controls.
### When to use it [#when-to-use-it]
Use it for logos, previews, thumbnails, illustrations, or decorative content.
`ElementFunction:AddImage(ImageConfig)`
```luau
Visuals:AddImage({
Name = "Logo Preview",
Image = "rbxassetid://8834748103",
Height = 120
})
```
```luau
Visuals:AddImage({
Name = "Logo Preview",
Image = "rbxassetid://8834748103",
Height = 120,
Asset = "rbxassetid://0", -- optional
BackgroundTransparency = 0.2, -- optional
Color = Color3.fromRGB(139, 92, 246), -- optional
ScaleType = "Default", -- optional
Transparency = 0.2, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | --------------- | -------- | -------------------------------------------------------- |
| `Asset` | string or asset | Yes | Asset value loaded by the media element. |
| `BackgroundTransparency` | number | Yes | Background transparency from 0 to 1. |
| `Color` | Color3 | Yes | Primary accent or content color. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Image` | string or asset | Yes | Image, Roblox asset ID, or supported secure image value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `ScaleType` | varies | Yes | Optional scale type setting accepted by this method. |
| `Transparency` | number | Yes | Transparency from 0 (opaque) to 1 (invisible). |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddMediaPlayer
> Adds audio playback with playlists, looping, pitch, volume, and optional visualization.
Source: /docs/elements/media-reference/add-media-player
# `AddMediaPlayer` [#addmediaplayer]
## What it does [#what-it-does]
Adds audio playback with playlists, looping, pitch, volume, and optional visualization.
### When to use it [#when-to-use-it]
Use it for music players, sound previews, or any interface that manages several audio tracks.
`ElementFunction:AddMediaPlayer(MediaPlayerConfig)`
```luau
local Result = Section:AddMediaPlayer({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
})
```
```luau
local Result = Section:AddMediaPlayer({
Name = "Example",
Default = false,
Callback = function(value)
print(value)
end,
AutoPlay = true, -- optional
Loop = true, -- optional
NotifySupport = true, -- optional
Pitch = 1, -- optional
Playlist = {}, -- optional
Visualizer = true, -- optional
VisualizerBars = 1, -- optional
VisualizerHeight = 240, -- optional
Volume = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ---------------- | -------- | ------------------------------------------------------------------- |
| `AutoPlay` | boolean | Yes | Starts playback automatically after creation. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Loop` | boolean | Yes | Repeats playback after reaching the end. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `NotifySupport` | boolean | Yes | Turns notify support behavior on or off. |
| `Pitch` | number | Yes | Playback pitch or speed multiplier. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Visualizer` | boolean or table | Yes | Enables or configures audio-reactive visualization. |
| `VisualizerBars` | number | Yes | Number of bars rendered by the visualizer. |
| `VisualizerHeight` | number | Yes | Maximum height of the visualizer area. |
| `Volume` | number | Yes | Playback volume used by the media element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddPassthrough
> Mounts an existing Roblox GUI instance inside the current XLQP layout.
Source: /docs/elements/media-reference/add-passthrough
# `AddPassthrough` [#addpassthrough]
## What it does [#what-it-does]
Mounts an existing Roblox GUI instance inside the current XLQP layout.
### When to use it [#when-to-use-it]
Use it to reuse a custom component without rebuilding it with XLQP constructors.
`ElementFunction:AddPassthrough(PassConfig)`
```luau
Visuals:AddPassthrough({
Name = "Custom Frame",
Height = 44,
Instance = CustomFrame
})
```
```luau
Visuals:AddPassthrough({
Name = "Custom Frame",
Height = 44,
Instance = CustomFrame
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------- |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Instance` | Instance | Yes | Existing Roblox instance mounted or displayed by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddUIPassthrough
> Mounts an existing Roblox GUI instance inside the current XLQP layout.
Source: /docs/elements/media-reference/add-ui-passthrough
# `AddUIPassthrough` [#adduipassthrough]
## What it does [#what-it-does]
Mounts an existing Roblox GUI instance inside the current XLQP layout.
### When to use it [#when-to-use-it]
Use it to reuse a custom component without rebuilding it with XLQP constructors.
`ElementFunction:AddUIPassthrough(PassConfig)`
```luau
local Result = Section:AddUIPassthrough({
Name = "Example",
})
```
```luau
local Result = Section:AddUIPassthrough({
Name = "Example",
Height = 240, -- optional
Instance = workspace, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ------------------------------------------------------------- |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Instance` | Instance | Yes | Existing Roblox instance mounted or displayed by the element. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddVideo
> Adds video playback with height, volume, and looping controls.
Source: /docs/elements/media-reference/add-video
# `AddVideo` [#addvideo]
## What it does [#what-it-does]
Adds video playback with height, volume, and looping controls.
### When to use it [#when-to-use-it]
Use it for demonstrations, animated backgrounds, or supported video assets.
`ElementFunction:AddVideo(VideoConfig)`
```luau
Visuals:AddVideo({
Name = "Video Preview",
Video = "",
Height = 140,
Looped = true
})
```
```luau
Visuals:AddVideo({
Name = "Video Preview",
Video = "",
Height = 140,
Looped = true,
Asset = "rbxassetid://0", -- optional
Volume = 1, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------- | --------------- | -------- | ----------------------------------------------------- |
| `Asset` | string or asset | Yes | Asset value loaded by the media element. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Looped` | boolean | Yes | Repeats playback after reaching the end. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Video` | string or asset | Yes | Video asset assigned to the video frame. |
| `Volume` | number | Yes | Playback volume used by the media element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddViewport
> Adds a 3D viewport for a model or instance with optional camera interaction.
Source: /docs/elements/media-reference/add-viewport
# `AddViewport` [#addviewport]
## What it does [#what-it-does]
Adds a 3D viewport for a model or instance with optional camera interaction.
### When to use it [#when-to-use-it]
Use it for item previews, avatars, meshes, or other rotatable 3D content.
`ElementFunction:AddViewport(ViewportConfig)`
```luau
Visuals:AddViewport({
Name = "Character Preview",
Object = game.Players.LocalPlayer.Character,
Height = 220,
Interactive = true,
AutoFocus = true,
Clone = true
})
```
```luau
Visuals:AddViewport({
Name = "Character Preview",
Object = game.Players.LocalPlayer.Character,
Height = 220,
Interactive = true,
AutoFocus = true,
Clone = true,
BackgroundTransparency = 0.2, -- optional
Camera = workspace.CurrentCamera, -- optional
Instance = workspace, -- optional
Model = workspace:FindFirstChildOfClass("Model"), -- optional
Visible = true, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------ | -------- | ------------------------------------------------------------- |
| `AutoFocus` | boolean | Yes | Turns auto focus behavior on or off. |
| `BackgroundTransparency` | number | Yes | Background transparency from 0 to 1. |
| `Camera` | Camera | Yes | Camera used to render the viewport. |
| `Clone` | boolean | Yes | Turns clone behavior on or off. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Instance` | Instance | Yes | Existing Roblox instance mounted or displayed by the element. |
| `Interactive` | boolean | Yes | Turns interactive behavior on or off. |
| `Model` | Model | Yes | Model displayed in a viewport or visual tool. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Object` | Instance | Yes | Object displayed or controlled by the element. |
| `Visible` | boolean | Yes | Controls whether the element starts visible. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateAudioVisualizer
> Creates an audio-reactive visualizer connected to supported sound data.
Source: /docs/elements/media-reference/create-audio-visualizer
# `CreateAudioVisualizer` [#createaudiovisualizer]
## What it does [#what-it-does]
Creates an audio-reactive visualizer connected to supported sound data.
### When to use it [#when-to-use-it]
Use it when you want playback activity represented by animated bars or levels.
`XLQPGen1:CreateAudioVisualizer(parent,config)`
```luau
local Result = Library:CreateAudioVisualizer(
workspace,
)
```
```luau
local Result = Library:CreateAudioVisualizer(
workspace,
{}, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | --------------------------------------------- |
| `parent` | Instance | No | GUI object that receives the visualizer. |
| `config` | table | Yes | Configuration table accepted by this factory. |
Exact signature:
```luau
XLQPGen1:CreateAudioVisualizer(parent,config)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateBytebeat
> Creates a configurable bytebeat audio generator and returns its playback controller.
Source: /docs/elements/media-reference/create-bytebeat
# `CreateBytebeat` [#createbytebeat]
## What it does [#what-it-does]
Creates a configurable bytebeat audio generator and returns its playback controller.
### When to use it [#when-to-use-it]
Use it for procedural audio when you need the factory form of the bytebeat API.
`XLQPGen1:CreateBytebeat(config)`
```luau
local Bytebeat = Library:CreateBytebeat({
Name = "Bytebeat Lab",
Default = "t*(t>>5|t>>8)",
Mode = "Bytebeat",
Hz = 22050,
Seconds = 3,
MaxSeconds = 300,
Pitch = 1,
Speed = 1,
Visualizer = true,
VisualizerHeight = 150,
Playlist = {
{Name = "Classic Bytebeat", Mode = "Bytebeat", Code = "t*(t>>5|t>>8)", Hz = 22050, Duration = 30},
{Name = "Pulse Bytebeat", Mode = "Bytebeat", Code = "t*(t>>7&t>>12)", Hz = 22050, Duration = 60},
{Name = "Arp Bytebeat", Mode = "Bytebeat", Code = "t*(t>>6|t>>9|t>>13)", Hz = 32000, Duration = 90},
{Name = "Stereo Crunch", Mode = "Bytebeat", Code = [=[vl=t/6|0, vr=(t+240)/6|0,
L=((vl*(vl>>12)&(201*vl/100)&(199*vl/100))&(vl*(vl>>14)&(vl*301/100)&(vl*399/100)))+((vl*(vl>>16)&(vl*202/100)&(vl*198/100))-(vl*(vl>>17)&(vl*302/100)&(vl*298/100))),
R=((vr*(vr>>12)&(201*vr/100)&(199*vr/100))&(vr*(vr>>14)&(vr*301/100)&(vr*399/100)))+((vr*(vr>>16)&(vr*202/100)&(vr*198/100))-(vr*(vr>>17)&(vr*302/100)&(vr*298/100))),
[(L&255)-128, (R&255)-128]]=]},
{Name = "JS Reverb Preset", Mode = "Bytebeat", Code = "T=t,t*=1.2,r=repeat=(x,y)=>Array(x).fill(y).flat(9),lim=limiter=input=>input,Master=pan=>0,[Master(0),Master(1)]"},
{Name = "XLQP Phonk Preset", Mode = "Bytebeat", Code = "[(this.a??=0,r=t/1.25,p=t*2**(parseInt('25259474'[7&r>>13],36)/12)/2.1,a=(a*24+((p%88+p%59*6/4)-64)/((r/'4142'[3&r>>13]%4096+128)**.7)*64)/32,a/12),(this.a??=0,r=t/1.25,p=t*2**(parseInt('25259474'[7&r>>13],36)/12)/2.1,a/12)]"},
{Name = "Float Melody", Mode = "Floatbeat", Code = [=[t==0?(a=b=d=e=0):0,
A='1111100000011111111111111111111111111111111111111111111000001111111001111111110001000000000000001111110000000000000000000111111111111001111110000000000000000000000000000000000',
n=1.23,
m=[5,5,5,8,8,8,10,10,10,10,12,13,13,13,12,12,7,7,7,10,10,[9.8,9.5,9.3,9.1][t>>10&3],8,8,8,8,17,12,12,12,8,8,7,7,7,13,13,13,17,17,17,17,13,13,12,12,13,13,0,0,0,10,10,10,8,8,8,8,5,5,0,0,5,5,5,5,5,8,8,8,10,10,10,10,12,13,13,13,12,12,7,7,7,10,10,[9.8,9.5,9.3,9.1][t>>10&3],8,8,8,8,17,12,12,12,8,8,7,7,7,20,20,20,17,17,17,17,13,13,12,12,13,13,10,10,10,22,22,22,20,20,20,20,17,17,13,12,10,12],
c=a+=b+=(n*2**(m[t>>12&127]/12)-b)/800,
s=[3,3,3,[3,4][t>>13&1]][t>>14&3],
p=[1,s,5,[0,0,0,[-2,0][t>>13&1]][t>>14&3],1,s,5,[8,8,8,[10,12][t>>13&1]][t>>14&3]],
g=d+=e+=(n*2**(p[t>>16&7]/12)-e)/400,
(A[(c*175>>8)%175]/1.3+(A[(g*175>>8)%175]/2+(A[(g/2*175>>8)%175]/3-1)))*((-(t+"00055522227744440005552222774422"[t>>12&31]*4096)>>7&255)/200)+sin(t*n*PI/512)*((-t>>13&1)*.25)]=]},
{Name = "Soft Floatbeat", Mode = "Floatbeat", Code = "sin(t/18)*0.7+sin(t/53)*0.25"},
{Name = "Lua Tone", Mode = "Lua", Code = "return math.sin(t / 22) * 0.8"}
},
Callback = function(player)
print("bytebeat generated", player.Asset)
end
})
```
```luau
local Bytebeat = Library:CreateBytebeat({
Name = "Bytebeat Lab",
Default = "t*(t>>5|t>>8)",
Mode = "Bytebeat",
Hz = 22050,
Seconds = 3,
MaxSeconds = 300,
Pitch = 1,
Speed = 1,
Visualizer = true,
VisualizerHeight = 150,
Playlist = {
{Name = "Classic Bytebeat", Mode = "Bytebeat", Code = "t*(t>>5|t>>8)", Hz = 22050, Duration = 30},
{Name = "Pulse Bytebeat", Mode = "Bytebeat", Code = "t*(t>>7&t>>12)", Hz = 22050, Duration = 60},
{Name = "Arp Bytebeat", Mode = "Bytebeat", Code = "t*(t>>6|t>>9|t>>13)", Hz = 32000, Duration = 90},
{Name = "Stereo Crunch", Mode = "Bytebeat", Code = [=[vl=t/6|0, vr=(t+240)/6|0,
L=((vl*(vl>>12)&(201*vl/100)&(199*vl/100))&(vl*(vl>>14)&(vl*301/100)&(vl*399/100)))+((vl*(vl>>16)&(vl*202/100)&(vl*198/100))-(vl*(vl>>17)&(vl*302/100)&(vl*298/100))),
R=((vr*(vr>>12)&(201*vr/100)&(199*vr/100))&(vr*(vr>>14)&(vr*301/100)&(vr*399/100)))+((vr*(vr>>16)&(vr*202/100)&(vr*198/100))-(vr*(vr>>17)&(vr*302/100)&(vr*298/100))),
[(L&255)-128, (R&255)-128]]=]},
{Name = "JS Reverb Preset", Mode = "Bytebeat", Code = "T=t,t*=1.2,r=repeat=(x,y)=>Array(x).fill(y).flat(9),lim=limiter=input=>input,Master=pan=>0,[Master(0),Master(1)]"},
{Name = "XLQP Phonk Preset", Mode = "Bytebeat", Code = "[(this.a??=0,r=t/1.25,p=t*2**(parseInt('25259474'[7&r>>13],36)/12)/2.1,a=(a*24+((p%88+p%59*6/4)-64)/((r/'4142'[3&r>>13]%4096+128)**.7)*64)/32,a/12),(this.a??=0,r=t/1.25,p=t*2**(parseInt('25259474'[7&r>>13],36)/12)/2.1,a/12)]"},
{Name = "Float Melody", Mode = "Floatbeat", Code = [=[t==0?(a=b=d=e=0):0,
A='1111100000011111111111111111111111111111111111111111111000001111111001111111110001000000000000001111110000000000000000000111111111111001111110000000000000000000000000000000000',
n=1.23,
m=[5,5,5,8,8,8,10,10,10,10,12,13,13,13,12,12,7,7,7,10,10,[9.8,9.5,9.3,9.1][t>>10&3],8,8,8,8,17,12,12,12,8,8,7,7,7,13,13,13,17,17,17,17,13,13,12,12,13,13,0,0,0,10,10,10,8,8,8,8,5,5,0,0,5,5,5,5,5,8,8,8,10,10,10,10,12,13,13,13,12,12,7,7,7,10,10,[9.8,9.5,9.3,9.1][t>>10&3],8,8,8,8,17,12,12,12,8,8,7,7,7,20,20,20,17,17,17,17,13,13,12,12,13,13,10,10,10,22,22,22,20,20,20,20,17,17,13,12,10,12],
c=a+=b+=(n*2**(m[t>>12&127]/12)-b)/800,
s=[3,3,3,[3,4][t>>13&1]][t>>14&3],
p=[1,s,5,[0,0,0,[-2,0][t>>13&1]][t>>14&3],1,s,5,[8,8,8,[10,12][t>>13&1]][t>>14&3]],
g=d+=e+=(n*2**(p[t>>16&7]/12)-e)/400,
(A[(c*175>>8)%175]/1.3+(A[(g*175>>8)%175]/2+(A[(g/2*175>>8)%175]/3-1)))*((-(t+"00055522227744440005552222774422"[t>>12&31]*4096)>>7&255)/200)+sin(t*n*PI/512)*((-t>>13&1)*.25)]=]},
{Name = "Soft Floatbeat", Mode = "Floatbeat", Code = "sin(t/18)*0.7+sin(t/53)*0.25"},
{Name = "Lua Tone", Mode = "Lua", Code = "return math.sin(t / 22) * 0.8"}
},
Callback = function(player)
print("bytebeat generated", player.Asset)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ---------------- | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Hz` | number | Yes | Controls the hz value. |
| `MaxSeconds` | number | Yes | Controls the max seconds value. |
| `Mode` | string | Yes | Named operating mode that selects a behavior preset. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Pitch` | number | Yes | Playback pitch or speed multiplier. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Seconds` | number | Yes | Controls the seconds value. |
| `Speed` | number | Yes | Controls the speed value. |
| `Visualizer` | boolean or table | Yes | Enables or configures audio-reactive visualization. |
| `VisualizerHeight` | number | Yes | Maximum height of the visualizer area. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateMediaPlayer
> Creates a media player controller with playlist, playback, volume, pitch, and visualization options.
Source: /docs/elements/media-reference/create-media-player
# `CreateMediaPlayer` [#createmediaplayer]
## What it does [#what-it-does]
Creates a media player controller with playlist, playback, volume, pitch, and visualization options.
### When to use it [#when-to-use-it]
Use it when media playback needs a standalone factory instead of a section-bound constructor.
`XLQPGen1:CreateMediaPlayer(config)`
```luau
local MediaPlayer = Library:CreateMediaPlayer({
Name = "Music",
Default = "rbxassetid://1843529631",
AutoPlay = false,
Loop = false,
Volume = 0.5,
Pitch = 1,
Preset = "Normal",
Visualizer = true,
VisualizerHeight = 150,
NotifySupport = false,
Playlist = {
{Name = "Chill Track", Url = "rbxassetid://1843529631"},
{Name = "Action Track", Url = "rbxassetid://9048375035"},
{Name = "Soft Loop", Url = "rbxassetid://1837467282"}
},
Callback = function(url)
print(url)
end
})
```
```luau
local MediaPlayer = Library:CreateMediaPlayer({
Name = "Music",
Default = "rbxassetid://1843529631",
AutoPlay = false,
Loop = false,
Volume = 0.5,
Pitch = 1,
Preset = "Normal",
Visualizer = true,
VisualizerHeight = 150,
NotifySupport = false,
Playlist = {
{Name = "Chill Track", Url = "rbxassetid://1843529631"},
{Name = "Action Track", Url = "rbxassetid://9048375035"},
{Name = "Soft Loop", Url = "rbxassetid://1837467282"}
},
Callback = function(url)
print(url)
end
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------ | ---------------- | -------- | ------------------------------------------------------------------- |
| `AutoPlay` | boolean | Yes | Starts playback automatically after creation. |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Default` | varies | Yes | Initial value used when the element is created. |
| `Loop` | boolean | Yes | Repeats playback after reaching the end. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `NotifySupport` | boolean | Yes | Turns notify support behavior on or off. |
| `Pitch` | number | Yes | Playback pitch or speed multiplier. |
| `Playlist` | table | Yes | Ordered collection of tracks or presets available to the player. |
| `Preset` | string | Yes | Sets the preset. |
| `Visualizer` | boolean or table | Yes | Enables or configures audio-reactive visualization. |
| `VisualizerHeight` | number | Yes | Maximum height of the visualizer area. |
| `Volume` | number | Yes | Playback volume used by the media element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddBoxSection
> Adds a bordered, collapsible section that groups related elements.
Source: /docs/elements/navigation-reference/add-box-section
# `AddBoxSection` [#addboxsection]
## What it does [#what-it-does]
Adds a bordered, collapsible section that groups related elements.
### When to use it [#when-to-use-it]
Use it to organize long pages into clearly labeled groups that users can expand only when needed.
`ElementFunction:AddBoxSection(SectionConfig)`
```luau
local BoxSection = LeftGroup:AddBoxSection({
Name = "Box Section",
Content = "Elements can be inside sections",
DefaultOpen = true
})
```
```luau
local BoxSection = LeftGroup:AddBoxSection({
Name = "Box Section",
Content = "Elements can be inside sections",
DefaultOpen = true,
Description = "Example text", -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `DefaultOpen` | boolean | Yes | Turns default open behavior on or off. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDataTable
> Adds a searchable row-and-column data table.
Source: /docs/elements/navigation-reference/add-data-table
# `AddDataTable` [#adddatatable]
## What it does [#what-it-does]
Adds a searchable row-and-column data table.
### When to use it [#when-to-use-it]
Use it for structured records such as players, servers, inventory, logs, or configuration entries.
`ElementFunction:AddDataTable(TableConfig)`
```luau
local PlayerDataTable = GroupPlayers:AddDataTable({
Name = "Player Data",
Searchable = true,
SearchPlaceholder = "Filter players...",
Height = 230,
Columns = {
{Name = "Player", Key = "Player", Width = 1.7},
{Name = "User ID", Key = "UserId", Width = 1},
{Name = "Team", Key = "Team", Width = 1.1}
},
Rows = {},
Callback = function(row)
Library:MakeToast({
Title = "Player selected",
Content = tostring(row.Player) .. " · " .. tostring(row.UserId),
Variant = "Info",
Icon = "users",
Time = 2
})
end
})
```
```luau
local PlayerDataTable = GroupPlayers:AddDataTable({
Name = "Player Data",
Searchable = true,
SearchPlaceholder = "Filter players...",
Height = 230,
Columns = {
{Name = "Player", Key = "Player", Width = 1.7},
{Name = "User ID", Key = "UserId", Width = 1},
{Name = "Team", Key = "Team", Width = 1.1}
},
Rows = {},
Callback = function(row)
Library:MakeToast({
Title = "Player selected",
Content = tostring(row.Player) .. " · " .. tostring(row.UserId),
Variant = "Info",
Icon = "users",
Time = 2
})
end,
EmptyText = "Example text", -- optional
RowHeight = 240, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------- | ------------ | -------- | ------------------------------------------------------------------- |
| `Callback` | function | Yes | Runs when the user interacts with the element or its value changes. |
| `Columns` | table | Yes | Column definitions used to lay out row data. |
| `EmptyText` | string | Yes | Sets the empty text. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RowHeight` | number | Yes | Controls the row height value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `SearchPlaceholder` | varies | Yes | Optional search placeholder setting accepted by this method. |
| `Searchable` | boolean | Yes | Shows filtering controls for the rendered data. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddDropdownPanel
> Adds a titled panel that can open and close like a dropdown.
Source: /docs/elements/navigation-reference/add-dropdown-panel
# `AddDropdownPanel` [#adddropdownpanel]
## What it does [#what-it-does]
Adds a titled panel that can open and close like a dropdown.
### When to use it [#when-to-use-it]
Use it to hide secondary controls while preserving a clear summary header.
`ElementFunction:AddDropdownPanel(PanelConfig)`
```luau
local Result = Section:AddDropdownPanel({
Name = "Example",
})
```
```luau
local Result = Section:AddDropdownPanel({
Name = "Example",
Open = true, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Open` | boolean | Yes | Turns open behavior on or off. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddElementGrid
> Arrange ordinary XLQP controls in responsive columns with automatic height and a scrollable viewport.
Source: /docs/elements/navigation-reference/add-element-grid
# AddElementGrid [#addelementgrid]
Creates a responsive grid of ordinary XLQP controls. Each cell owns its own element container; the grid measures content height, creates columns, and maintains a scrollable viewport. Aliases: `CreateElementGrid`, `ElementGrid`, `AddWidgetGrid`, `CreateWidgetGrid`, and `WidgetGrid`.
```luau
local Grid = Tab:AddElementGrid({Name = "Quick actions", Columns = 2})
Grid:AddButton({Name = "Refresh", Callback = function() print("Refresh") end})
Grid:AddToggle({Name = "Alerts", Default = true, Callback = function(value) print(value) end})
```
```luau
local Grid = Tab:AddElementGrid({
Name = "Dashboard",
Height = 320,
Custom = false,
Width = 500,
Rows = true,
Columns = 0,
CellWidth = 200,
CellHeight = 58,
Spacing = 8,
AutoHeight = true,
MinHeight = 120,
MaxHeight = 400,
Elements = {
{Type = "Button", Config = {Name = "Refresh", Callback = function() print("Refresh") end}},
{Type = "Toggle", Config = {Name = "Alerts", Default = true, Callback = function(value) print(value) end}},
{Type = "Badge", Config = {Name = "Status", Text = "Ready"}},
},
})
local Added = Grid:AddElement("Label", {Text = "New cell"})
Grid:SetColumns(2)
Grid:SetSpacing(6)
```
## Options [#options]
| Field | Default / behavior |
| --------------------------- | -------------------------------------------------------------------------------- |
| `Name` / `Title` | Empty; nonempty text adds a title. |
| `Height`, `Width`, `Custom` | 220, 500, false. Custom mode uses fixed pixel width and height. |
| `Rows` | True; false uses one column. |
| `Columns` | 0 means automatic columns based on the available width. |
| `CellWidth` | 200, minimum 110. |
| `CellHeight` | 58, minimum 42; measured content may require more space. |
| `Spacing` | 4, minimum 0. |
| `AutoHeight` | True; fits measured content between the height limits when custom sizing is off. |
| `MinHeight`, `MaxHeight` | 92 and the configured Height; minimum 70. |
| `Elements` | Initial list using `Type` / `Element` and `Config`. |
## Controller [#controller]
`AddElement(kind, config)` returns the created element and its cell, or nil when unsupported or construction fails. `Remove(element)`, `Clear()`, `SetRows`, `SetColumns`, `SetCellSize(width, height)`, `SetSpacing`, `SetAutoHeight`, `Resize(height, width)`, and `SetCustom` update the grid.
Convenience methods forward Toggle, SmoothToggle, Dropdown, Button, Slider, Textbox, Bind, Label, Paragraph, Colorpicker, RadioGroup, SegmentedControl, Stepper, ProgressBar, InfoCard, Image, Badge, Notice, StatusBox, and ActionRow using their `Add*`, `Create*`, or short names.
For selectable cards, use [AddOptionGrid](/docs/elements/navigation-reference/add-option-grid).
---
# AddKeybindList
> Adds a docked or detachable panel that displays active keybinds.
Source: /docs/elements/navigation-reference/add-keybind-list
# `AddKeybindList` [#addkeybindlist]
## What it does [#what-it-does]
Adds a docked or detachable panel that displays active keybinds.
### When to use it [#when-to-use-it]
Use it to give users a live shortcut reference while they use the interface.
`ElementFunction:AddKeybindList(KeybindConfig)`
```luau
local KeybindList = RightGroup:AddKeybindList({
Title = "Keybind list",
Icon = "list",
Pin = true,
Popout = true,
Detached = false,
DockHeight = 236,
Width = 300,
Height = 390,
PopoutPosition = UDim2.new(1, -318, 0, 82)
})
```
```luau
local KeybindList = RightGroup:AddKeybindList({
Title = "Keybind list",
Icon = "list",
Pin = true,
Popout = true,
Detached = false,
DockHeight = 236,
Width = 300,
Height = 390,
PopoutPosition = UDim2.new(1, -318, 0, 82)
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | ------------ | -------- | ----------------------------------------------------- |
| `Detached` | boolean | Yes | Turns detached behavior on or off. |
| `DockHeight` | number | Yes | Controls the dock height value. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Pin` | boolean | Yes | Turns pin behavior on or off. |
| `Popout` | boolean | Yes | Turns popout behavior on or off. |
| `PopoutPosition` | string | Yes | Sets the popout position. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
| `Width` | number | Yes | Requested horizontal size in pixels. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLeftGroupbox
> Adds a grouped container in the left column of a two-column tab layout.
Source: /docs/elements/navigation-reference/add-left-groupbox
# `AddLeftGroupbox` [#addleftgroupbox]
## What it does [#what-it-does]
Adds a grouped container in the left column of a two-column tab layout.
### When to use it [#when-to-use-it]
Use it to place related controls on the left side of a settings-style page.
`ElementFunction:AddLeftGroupbox(title, icon)`
```luau
local LeftGroup = Controls:AddLeftGroupbox("Automation", "wrench")
```
```luau
local LeftGroup = Controls:AddLeftGroupbox("Automation", "wrench")
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------- |
| `title` | varies | Yes | Optional title setting accepted by this method. |
| `icon` | varies | Yes | Optional icon setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddLeftSidebarMenu
> Adds a detached, resizable sidebar menu docked on the left.
Source: /docs/elements/navigation-reference/add-left-sidebar-menu
# `AddLeftSidebarMenu` [#addleftsidebarmenu]
## What it does [#what-it-does]
Adds a left-side quick menu that can be detached, resized, opened, and closed independently from the main tab list.
`ElementFunction:AddLeftSidebarMenu(MenuConfig)`
```luau
local Tools = Controls:AddLeftSidebarMenu({
Name = "Tools",
Icon = "panel-left"
})
```
```luau
local Tools = Controls:AddLeftSidebarMenu({
Name = "Tools",
Icon = "panel-left",
Width = 320,
Height = 420,
MinWidth = 240,
MinHeight = 220,
MaxWidth = 620,
MaxHeight = 720,
Resizable = true,
Gap = 12,
Detached = true,
DimBackground = false,
CloseOnOutside = false
})
Tools:Open()
Tools:Close()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | --------------- | -------- | -------------------------------------------- |
| `Name` | string | Yes | Menu title. |
| `Icon` / `Image` | string or asset | Yes | Menu icon. |
| `Width` / `Height` | number | Yes | Initial dimensions. |
| `MinWidth` / `MinHeight` | number | Yes | Minimum dimensions. |
| `MaxWidth` / `MaxHeight` | number | Yes | Maximum dimensions. |
| `Resizable` | boolean | Yes | Enables resizing. |
| `Gap` | number | Yes | Spacing between menu and tab list. |
| `Detached` / `External` | boolean | Yes | Places the menu in its own floating surface. |
| `DimBackground` | boolean | Yes | Dims the page while open. |
| `CloseOnOutside` | boolean | Yes | Closes when outside is clicked. |
| `Color` / `TextColor` | color value | Yes | Menu accents. |
## Behavior and return value [#behavior-and-return-value]
The returned menu exposes Open and Close and accepts the same child elements as other XLQP containers.
## Related reference [#related-reference]
* [AddRightSidebarMenu](/docs/elements/navigation-reference/add-right-sidebar-menu)
* [Navigation and windows](/docs/elements/navigation)
* [Full example](/docs/examples)
---
# AddLeftTabbox
> Adds a nested tab box in the left column.
Source: /docs/elements/navigation-reference/add-left-tabbox
# `AddLeftTabbox` [#addlefttabbox]
## What it does [#what-it-does]
Adds a nested tab box in the left column.
### When to use it [#when-to-use-it]
Use it when the left side of a page needs multiple compact subpages.
`ElementFunction:AddLeftTabbox(title)`
```luau
local LeftTabs = Controls:AddLeftTabbox({Name = "Tool Pages", TabSize = 42})
```
```luau
local LeftTabs = Controls:AddLeftTabbox({Name = "Tool Pages", TabSize = 42,
TabSize = 24, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `TabSize` | number | Yes | Controls the tab size value. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddMiniTab
> Adds a compact rail of switchable mini tabs inside a tab or section.
Source: /docs/elements/navigation-reference/add-mini-tab
# `AddMiniTab` [#addminitab]
## What it does [#what-it-does]
Adds a compact navigation rail. Each configured tab exposes its own Elements container for controls and content.
`ElementFunction:AddMiniTab(MiniTabConfig)`
```luau
local Rail = UniversalTab:AddMiniTab({
Name = "Universal",
Tabs = {
{Title = "All"},
{Title = "Movement"}
}
})
```
```luau
local Rail = UniversalTab:AddMiniTab({
Name = "Universal",
Position = "Left",
Width = 132,
Color = "#8b5cf6",
Tabs = {
{Title = "All", Icon = "layers", Badge = 1},
{Title = "Movement", Icon = "footprints"},
{Title = "Character", Icon = "user"},
{Title = "Visuals", Icon = "eye"}
},
Callback = function(_, title) print("mini tab", title) end
})
Rail.Tabs[1].Elements:AddToggle({Name = "Feature", Default = false})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| -------------------- | ---------------- | -------- | --------------------------------- |
| `Name` / `Title` | string | Yes | Rail title. |
| `Tabs` / `Items` | table | Yes | Mini-tab definitions. |
| `Position` / `Side` | string | Yes | Rail placement. |
| `Width` / `Height` | number | Yes | Rail dimensions. |
| `Color` | color value | Yes | Rail accent. |
| `Gap` | number | Yes | Space between mini tabs. |
| `ShowText` | boolean | Yes | Shows labels beside icons. |
| `Callback` | function | Yes | Runs when a mini tab is selected. |
| Tab `Title` | string | Yes | Mini-tab label. |
| Tab `Icon` / `Image` | string or asset | Yes | Mini-tab icon. |
| Tab `Badge` | string or number | Yes | Badge value. |
## Related reference [#related-reference]
* [AddTab](/docs/elements/navigation-reference/add-tab)
* [AddLeftTabbox](/docs/elements/navigation-reference/add-left-tabbox)
* [Full example](/docs/examples)
---
# AddOptionGrid
> Select visual option cards with optional embedded controls and runtime layout settings.
Source: /docs/elements/navigation-reference/add-option-grid
# AddOptionGrid [#addoptiongrid]
Adds selectable option cards with images or embedded XLQP elements. Supports single or multiple selection, automatic columns, a settings popover, and saved flags. Aliases: `CreateOptionGrid` and `OptionGrid`.
```luau
local Options = Tab:AddOptionGrid({
Name = "Mode",
Default = "balanced",
Options = {
{Name = "Instant", Value = "instant"},
{Name = "Balanced", Value = "balanced"},
{Name = "Deep", Value = "deep"},
},
Callback = function(value, entry)
print(value)
end,
})
```
```luau
local Options = Tab:AddOptionGrid({
Name = "Controls",
Icon = "grid-3x3",
SettingsIcon = "settings",
ShowHeaderIcon = true,
ShowSettingsButton = true,
ShowSettingsSummary = true,
Height = 260,
Custom = false,
Width = 500,
Rows = true,
Multi = true,
CardWidth = 120,
CardHeight = 110,
Spacing = 6,
Columns = 0,
Default = {"speed"},
Flag = "control_cards",
Save = true,
Options = {
{
Name = "Speed",
Value = "speed",
Elements = {
{Type = "Slider", Config = {Name = "Speed", Min = 0, Max = 100, Default = 25, Callback = function(value) print(value) end}},
},
},
{
Name = "Alerts",
Value = "alerts",
Build = function(api, content, entry, grid)
api:AddToggle({Name = "Alerts", Default = true, Callback = function(value) print(value) end})
end,
},
{Name = "Unavailable", Value = "locked", Disabled = true},
},
Callback = function(values, entry)
print(table.concat(values, ", "))
end,
})
```
## Options [#options]
| Field | Default / behavior |
| ------------------------------------------------------------- | ------------------------------------------------------------------ |
| `Name` / `Title` | Option Grid. |
| `Options` | List of option tables or scalar values. |
| `Default` / `Value` | Initial selected value; list for multiple selection. |
| `Multi` / `MultiSelect` | False; true returns a selected-value list. |
| `Rows` | True; false selects the vertical list layout. |
| `Height`, `Width`, `Custom` | 260, 500, false. Width is fixed only in custom sizing mode. |
| `CardWidth`, `CardHeight` | 82 each; minimum 54. |
| `Spacing`, `Columns` | 6 and 0. Zero columns means automatic layout. |
| `Icon` / `HeaderIcon`, `SettingsIcon` | Header and settings icons. |
| `ShowHeaderIcon`, `ShowSettingsButton`, `ShowSettingsSummary` | True unless disabled. |
| `Flag`, `Save` | Flag identity and persistence through window configuration saving. |
| `Callback(valueOrValues, entry)` | Selection callback. |
Option entries support `Name`, `Value`, `Image`, `Disabled`, `LayoutOrder`, `Callback`, `Elements`, and `Build` / function-valued `Content`. Element specifications use `{Type = "Slider", Config = {...}}`; a builder receives the element API, content frame, option entry, and grid.
## Controller [#controller]
`AddOption`, `RemoveOption`, `UpdateOption`, `Clear`, `Set(value, silent)`, `Get`, `GetSelected`, `SetMulti`, `SetRows`, `SetCardSize(width, height)`, `SetSpacing`, `SetColumns`, `SetCustom`, `Resize(height, width)`, `SetIcon`, `SetSettingsIcon`, `SetSettingsOpen`, and `ToggleSettings`.
`AddElement(optionValue, elementType, config)` adds a control to an existing option card and returns the created controller when successful.
The callback's first value is a scalar for single selection or a cloned selected-value list for multiple selection. Disabled cards cannot be selected.
---
# AddRightGroupbox
> Adds a grouped container in the right column of a two-column tab layout.
Source: /docs/elements/navigation-reference/add-right-groupbox
# `AddRightGroupbox` [#addrightgroupbox]
## What it does [#what-it-does]
Adds a grouped container in the right column of a two-column tab layout.
### When to use it [#when-to-use-it]
Use it to place related controls on the right side of a settings-style page.
`ElementFunction:AddRightGroupbox(title, icon)`
```luau
local RightGroup = Controls:AddRightGroupbox({
Name = "Information",
Icon = "info",
Pin = true,
Popout = true,
Detached = false,
PopoutWidth = 390,
PopoutHeight = 520,
PopoutPosition = UDim2.new(1, -410, 0, 82)
})
```
```luau
local RightGroup = Controls:AddRightGroupbox({
Name = "Information",
Icon = "info",
Pin = true,
Popout = true,
Detached = false,
PopoutWidth = 390,
PopoutHeight = 520,
PopoutPosition = UDim2.new(1, -410, 0, 82),
title = "Example", -- optional
icon = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------- |
| `title` | varies | Yes | Optional title setting accepted by this method. |
| `icon` | varies | Yes | Optional icon setting accepted by this method. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddRightSidebarMenu
> Adds a detached, resizable sidebar menu docked on the right.
Source: /docs/elements/navigation-reference/add-right-sidebar-menu
# `AddRightSidebarMenu` [#addrightsidebarmenu]
## What it does [#what-it-does]
Adds a right-side quick menu that can be detached, resized, opened, and closed independently from the main tab list.
`ElementFunction:AddRightSidebarMenu(MenuConfig)`
```luau
local Settings = Controls:AddRightSidebarMenu({
Name = "Quick Settings",
Icon = "settings"
})
```
```luau
local Settings = Controls:AddRightSidebarMenu({
Name = "Quick Settings",
Icon = "settings",
Width = 320,
Height = 420,
MinWidth = 240,
MinHeight = 220,
MaxWidth = 620,
MaxHeight = 720,
Resizable = true,
Gap = 12,
Detached = true,
DimBackground = false,
CloseOnOutside = false
})
Settings:Open()
Settings:Close()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | --------------- | -------- | -------------------------------------------- |
| `Name` | string | Yes | Menu title. |
| `Icon` / `Image` | string or asset | Yes | Menu icon. |
| `Width` / `Height` | number | Yes | Initial dimensions. |
| `MinWidth` / `MinHeight` | number | Yes | Minimum dimensions. |
| `MaxWidth` / `MaxHeight` | number | Yes | Maximum dimensions. |
| `Resizable` | boolean | Yes | Enables resizing. |
| `Gap` | number | Yes | Spacing between menu and tab list. |
| `Detached` / `External` | boolean | Yes | Places the menu in its own floating surface. |
| `DimBackground` | boolean | Yes | Dims the page while open. |
| `CloseOnOutside` | boolean | Yes | Closes when outside is clicked. |
| `Color` / `TextColor` | color value | Yes | Menu accents. |
## Related reference [#related-reference]
* [AddLeftSidebarMenu](/docs/elements/navigation-reference/add-left-sidebar-menu)
* [Navigation and windows](/docs/elements/navigation)
* [Full example](/docs/examples)
---
# AddRightTabbox
> Adds a nested tab box in the right column.
Source: /docs/elements/navigation-reference/add-right-tabbox
# `AddRightTabbox` [#addrighttabbox]
## What it does [#what-it-does]
Adds a nested tab box in the right column.
### When to use it [#when-to-use-it]
Use it when the right side of a page needs multiple compact subpages.
`ElementFunction:AddRightTabbox(title)`
```luau
local RightTabs = Controls:AddRightTabbox({Name = "Session Pages", TabSize = 42})
```
```luau
local RightTabs = Controls:AddRightTabbox({Name = "Session Pages", TabSize = 42,
TabSize = 24, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `TabSize` | number | Yes | Controls the tab size value. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSection
> Adds a titled container that groups elements on a tab or panel.
Source: /docs/elements/navigation-reference/add-section
# `AddSection` [#addsection]
## What it does [#what-it-does]
Adds a titled container that groups elements on a tab or panel.
### When to use it [#when-to-use-it]
Use it as the normal parent for related controls, content, media, or data views.
`ElementFunction:AddSection(SectionConfig)`
```luau
BoxSection:AddSection({Name = "Inside Section"})
```
```luau
BoxSection:AddSection({Name = "Inside Section",
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------- | ------------ | -------- | ----------------------------------------------------- |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSideTab
> Adds a tab to a side-oriented navigation container.
Source: /docs/elements/navigation-reference/add-side-tab
# `AddSideTab` [#addsidetab]
## What it does [#what-it-does]
Adds a tab to a side-oriented navigation container.
### When to use it [#when-to-use-it]
Use it when building secondary navigation that lives beside the main content.
`TabFunction:AddSideTab(TabConfig)`
```luau
local ToolsTab = Window:AddSideTab({
Name = "Tools",
Icon = "wrench",
Group = "Utilities",
GroupIcon = "folder",
GroupLayoutOrder = 2,
LayoutOrder = 10,
PremiumOnly = false,
Changelog = {
"Added server tools",
"Improved navigation",
},
Cooldown = 300,
AutoHome = false,
OnSelect = function(tab)
print("Selected:", tab.Name)
end,
})
```
```luau
local ToolsTab = Window:AddSideTab({
Name = "Tools",
Icon = "wrench",
Group = "Utilities",
GroupIcon = "folder",
GroupLayoutOrder = 2,
LayoutOrder = 10,
PremiumOnly = false,
Changelog = {
"Added server tools",
"Improved navigation",
},
Cooldown = 300,
AutoHome = false,
OnSelect = function(tab)
print("Selected:", tab.Name)
end,
FeedbackWebhook = "Example", -- optional
DiscordInvite = "https://example.com", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `Name` / `Title` | string | Yes | Visible tab label. Defaults to `"Tab"`. |
| `Icon` | string | Yes | Tab icon. |
| `Group` / `SideGroup` | string | Yes | Places the tab inside a named sidebar group. |
| `GroupIcon` / `GroupImage` | string | Yes | Icon used by the sidebar group. |
| `GroupLayoutOrder` / `GroupOrder` | number | Yes | Sidebar-group order. |
| `LayoutOrder` | number | Yes | Tab order inside its group. |
| `PremiumOnly` | boolean | Yes | Marks the tab for premium-only behavior. |
| `FeedbackWebhook` | string | Yes | Private feedback destination; never publish a real webhook. |
| `DiscordInvite` | string | Yes | Invite code used by supported home-tab content. |
| `Changelog` | table | Yes | Changelog entries shown by supported home-tab content. |
| `Cooldown` | number | Yes | Feedback cooldown in seconds. Defaults to `300`. |
| `AutoHome` | boolean | Yes | Enables supported automatic home behavior. |
| `OnSelect` | function | Yes | Runs when the tab is selected. |
Exact signature:
```luau
TabFunction:AddSideTab(TabConfig)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddSubTab
> Add a nested tab using an automatically created shared manager.
Source: /docs/elements/navigation-reference/add-sub-tab
# AddSubTab [#addsubtab]
`Container:AddSubTab(config)` creates or reuses the default nested-tab manager for that container, then returns the new page's element API. Aliases: `CreateSubTab` and `SubTab`.
```luau
local General = Tab:AddSubTab({
Name = "General",
Icon = "home",
TabAccent = Color3.fromRGB(90, 140, 255),
})
General:AddLabel({Text = "General settings"})
local More = Tab:AddSubTab({Name = "More", Icon = "layers"})
More:AddButton({Name = "Print", Callback = function() print("More settings") end})
More:Select()
```
All child tab options are listed under [AddSubTabs](/docs/elements/navigation-reference/add-sub-tabs). The first call also seeds the manager's `Height` and `Color` / `TabAccent`. The automatic manager uses fill mode, so its height follows available parent space. Use an explicit `AddSubTabs` manager and `Fill = false` for a fixed height.
The returned page supports normal constructors such as `AddButton`, `AddToggle`, `AddSlider`, and `AddLabel`.
---
# AddSubTabs
> Create nested horizontal tabs inside an XLQP element container.
Source: /docs/elements/navigation-reference/add-sub-tabs
# AddSubTabs [#addsubtabs]
Creates a nested tab manager inside a compatible tab, section, or container. Each child page returns an ordinary element API. Aliases: `CreateSubTabs` and `SubTabs`.
```luau
local Pages = Tab:AddSubTabs({Name = "Settings", Fill = false, Height = 320})
local General = Pages:AddTab({Name = "General", Icon = "settings"})
General:AddToggle({Name = "Enabled", Default = true, Callback = function(value) print(value) end})
local About = Pages:AddTab({Name = "About", Icon = "info"})
About:AddLabel({Text = "XLQP Gen1"})
```
```luau
local Pages = Tab:AddSubTabs({
Name = "Settings",
Height = 430,
Fill = false,
Gap = 8,
ButtonHeight = 34,
Color = Color3.fromRGB(90, 140, 255),
Callback = function(groupName, tabName, elements, manager)
print(groupName, tabName)
end,
})
local General = Pages:AddTab({
Name = "General",
Icon = "home",
Width = 120,
Selected = true,
TabAccent = Color3.fromRGB(90, 140, 255),
BackgroundColor = Color3.fromRGB(28, 30, 40),
BackgroundImage = "rbxassetid://8834748103",
ImageColor = Color3.new(1, 1, 1),
ImageTransparency = 0.82,
SelectedImageTransparency = 0.7,
ImageScaleType = Enum.ScaleType.Crop,
ForceColumns = true,
})
General:AddLabel({Text = "General settings"})
Pages:AddTab({Name = "Advanced", Icon = "sliders-horizontal"})
Pages:Select("General")
```
## Manager options [#manager-options]
| Field | Default / behavior |
| ------------------ | ---------------------------------------------------------------------------------------------- |
| `Name` / `Title` | Empty string; title area is omitted when empty. |
| `Height` | 430, clamped to 220–1400. |
| `Fill` | Enabled unless false; fills the available parent height and responds to resizing. |
| `Gap` | 8, minimum 4. |
| `ButtonHeight` | 34, clamped to 28–52. |
| `Color` / `Accent` | Default blue accent. |
| `Callback` | Receives group name, selected tab name, child element API, and manager after a user selection. |
## Child tab options [#child-tab-options]
`Name` / `Title`, `Icon` / `Image`, `Width` (84–190), `Selected` / `Default`, `TabAccent` / `Color` / `Accent`, `BackgroundColor` / `ButtonColor` / `BaseColor`, `BackgroundImage` / `TabImage` / `CardImage` / `ButtonImage`, `ImageColor` / `TabImageColor` / `BackgroundImageColor`, `ImageTransparency` / `TabImageTransparency` / `BackgroundImageTransparency`, `SelectedImageTransparency`, `ImageScaleType`, and `ForceColumns` / `Columns` / `TwoColumn`.
## Controller [#controller]
`AddTab(config)` / `Tab(config)` returns the child element API. `Select(nameOrIndexOrTab)` changes the active page. `GetSelected()` returns the selected element API and tab information. `SetHeight(number)` disables fill mode; `SetFill(boolean)` and `Refresh()` update the layout.
Child APIs expose `Select()`, `.SubTab`, and `.ParentSubTabs`; the `.SubTab` information object supports `Select()` and `SetName(value)`.
See [AddSubTab](/docs/elements/navigation-reference/add-sub-tab) for an automatic manager.
---
# AddTab
> Adds a navigation tab to the current window or tab container.
Source: /docs/elements/navigation-reference/add-tab
# `AddTab` [#addtab]
## What it does [#what-it-does]
Adds a navigation tab to the current window or tab container.
### When to use it [#when-to-use-it]
Use it to create a distinct top-level page for one feature area.
`TabFunction:AddTab(TabConfig)`
```luau
local GroupMain = GroupTabs:AddTab()
```
```luau
local GroupMain = GroupTabs:AddTab(
{ Name = "Example", Icon = "home" }, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ------------------------------------------------------------ |
| `TabConfig` | table | Yes | Tab name, icon, grouping, and supported navigation settings. |
Exact signature:
```luau
TabFunction:AddTab(TabConfig)
```
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTabbox
> Adds a nested tab box to a group or panel.
Source: /docs/elements/navigation-reference/add-tabbox
# `AddTabbox` [#addtabbox]
## What it does [#what-it-does]
Adds a compact nested tab container. Add child tabs with AddTab and place regular XLQP elements inside each returned tab.
`ElementFunction:AddTabbox(TabboxConfig)`
```luau
local Pages = RightGroup:AddTabbox({Name = "Groupbox Tabs"})
local Main = Pages:AddTab({Name = "Main"})
Main:AddParagraph({Content = "Nested content"})
```
```luau
local Pages = RightGroup:AddTabbox({
Name = "Groupbox Tabs",
TabSize = 38,
IconOnly = true
})
local Main = Pages:AddTab({Name = "Main", Icon = "pickaxe"})
local Players = Pages:AddTab({Name = "Players", Icon = "users"})
local Settings = Pages:AddTab({Name = "Settings", Icon = "settings"})
Players:AddDataTable({Name = "Player Data", Rows = {}})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | --------------------- |
| `Name` | string | Yes | Tabbox heading. |
| `TabSize` | number | Yes | Nested tab size. |
| `IconOnly` | boolean | Yes | Shows only tab icons. |
## Related reference [#related-reference]
* [AddLeftTabbox](/docs/elements/navigation-reference/add-left-tabbox)
* [AddRightTabbox](/docs/elements/navigation-reference/add-right-tabbox)
* [Full example](/docs/examples)
---
# AddTableContents
> Adds a structured table-content view with configurable columns and rows.
Source: /docs/elements/navigation-reference/add-table-contents
# `AddTableContents` [#addtablecontents]
## What it does [#what-it-does]
Adds a structured table-content view with configurable columns and rows.
### When to use it [#when-to-use-it]
Use it for tabular information that does not need the full searchable data-table behavior.
`ElementFunction:AddTableContents(TableConfig)`
```luau
local KeyInformationTable = AITab:AddTableContents({
Name = "Key Information",
Description = "A table showing your key information.",
Height = 170,
ConfigCloud = true,
ConfigCloudKey = "KeyInformationTable",
Columns = {
{Name = "Discord ID", Key = "DiscordId", Width = 155},
{Name = "Executions", Key = "Executions", Width = 120},
{Name = "Seconds Left", Key = "SecondsLeft", Width = 135},
{Name = "User Note", Key = "UserNote", Width = 155},
{Name = "Script Version", Key = "Version", Width = 130}
},
Rows = {
{DiscordId = "98765432112...", Executions = 10234, SecondsLeft = "inf", UserNote = "Not specified", Version = "1.0.0"},
{DiscordId = "12345678901...", Executions = 428, SecondsLeft = 86400, UserNote = "Beta tester", Version = "1.0.0"}
}
})
```
```luau
local KeyInformationTable = AITab:AddTableContents({
Name = "Key Information",
Description = "A table showing your key information.",
Height = 170,
ConfigCloud = true,
ConfigCloudKey = "KeyInformationTable",
Columns = {
{Name = "Discord ID", Key = "DiscordId", Width = 155},
{Name = "Executions", Key = "Executions", Width = 120},
{Name = "Seconds Left", Key = "SecondsLeft", Width = 135},
{Name = "User Note", Key = "UserNote", Width = 155},
{Name = "Script Version", Key = "Version", Width = 130}
},
Rows = {
{DiscordId = "98765432112...", Executions = 10234, SecondsLeft = "inf", UserNote = "Not specified", Version = "1.0.0"},
{DiscordId = "12345678901...", Executions = 428, SecondsLeft = 86400, UserNote = "Beta tester", Version = "1.0.0"}
},
Content = "Example content", -- optional
RowHeight = 240, -- optional
Title = "Example", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------- | --------------- | -------- | ----------------------------------------------------------- |
| `Columns` | table | Yes | Column definitions used to lay out row data. |
| `ConfigCloud` | boolean | Yes | Turns config cloud behavior on or off. |
| `ConfigCloudKey` | varies | Yes | Optional config cloud key setting accepted by this method. |
| `Content` | string or table | Yes | Main text or content payload displayed by the element. |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Height` | number | Yes | Requested vertical size in pixels. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
| `RowHeight` | number | Yes | Controls the row height value. |
| `Rows` | table | Yes | Row data rendered by a table or chart. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# AddTopTab
> Adds a tab to the top-tab navigation layout.
Source: /docs/elements/navigation-reference/add-top-tab
# `AddTopTab` [#addtoptab]
## What it does [#what-it-does]
Adds a tab to the top-tab navigation layout.
### When to use it [#when-to-use-it]
Use it when the selected window design uses horizontal navigation across the top.
`TabFunction:AddTopTab(TabConfig)`
```luau
local Result = Window:AddTopTab({
Name = "Example",
})
```
```luau
local Result = Window:AddTopTab({
Name = "Example",
Effects = {}, -- optional
flames = nil, -- optional
MultiTab = nil, -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ----------------------------------------------------- |
| `Effects` | boolean | Yes | Turns effects behavior on or off. |
| `flames` | varies | Yes | Optional flames setting accepted by this method. |
| `MultiTab` | varies | Yes | Optional multi tab setting accepted by this method. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Call this method on the compatible section, tab, panel, or element container shown by the signature. Store the returned value when you need to update, read, or destroy the element later.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateControlPanel
> Creates a standalone control panel containing actions or state controls.
Source: /docs/elements/navigation-reference/create-control-panel
# `CreateControlPanel` [#createcontrolpanel]
## What it does [#what-it-does]
Creates a standalone control panel containing actions or state controls.
### When to use it [#when-to-use-it]
Use it for compact operational tools that should remain separate from a normal section.
`XLQPGen1:CreateControlPanel(PanelConfig)`
```luau
local Panel = Library:CreateControlPanel({
Name = "ShortcutPanel",
Title = "Active shortcuts",
Icon = "keyboard",
Width = 300,
Height = 390,
Position = UDim2.new(1, -318, 0, 82),
Detached = true,
Pin = true,
Popout = true,
DockHeight = 236,
LayoutOrder = 10,
})
```
```luau
local Panel = Library:CreateControlPanel({
Name = "ShortcutPanel",
Title = "Active shortcuts",
Icon = "keyboard",
Width = 300,
Height = 390,
Position = UDim2.new(1, -318, 0, 82),
Detached = true,
Pin = true,
Popout = true,
DockHeight = 236,
LayoutOrder = 10,
Parent = workspace, -- optional
PopoutPosition = UDim2.fromOffset(320, 180), -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------------------------------- | ------------ | -------- | ---------------------------------------------------- |
| `Name` | string | Yes | Stable panel identifier. |
| `Title` | string | Yes | Header text. Defaults to `"Keybind list"`. |
| `Icon` | string | Yes | Header icon. Defaults to `"list"`. |
| `Width` | number | Yes | Floating width. Defaults to `286`. |
| `Height` | number | Yes | Floating height. Defaults to `236`. |
| `Position` | UDim2 | Yes | Floating screen position. |
| `Parent` | Instance | Yes | Container used when the panel is docked. |
| `Detached` | boolean | Yes | Starts the panel as a floating surface when `true`. |
| `DockHeight` | number | Yes | Docked height, clamped from `120` to `620`. |
| `Pin` / `Pinnable` | boolean | Yes | Shows pin behavior. |
| `Popout` / `PopOut` / `Detachable` | boolean | Yes | Allows switching between docked and floating states. |
| `PopoutPosition` | UDim2 | Yes | Position used after popping the panel out. |
| `LayoutOrder` | number | Yes | Order inside a docked container. |
Exact signature:
```luau
XLQPGen1:CreateControlPanel(PanelConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateGroupBox
> Creates a visually grouped container for related elements.
Source: /docs/elements/navigation-reference/create-group-box
# `CreateGroupBox` [#creategroupbox]
## What it does [#what-it-does]
Creates a visually grouped container for related elements.
### When to use it [#when-to-use-it]
Use it in layouts that need a stronger boundary than a standard section.
`XLQPGen1:CreateGroupBox(tab, icon)`
```luau
local Result = Library:CreateGroupBox(
Tab,
)
```
```luau
local Result = Library:CreateGroupBox(
Tab,
"home", -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| --------- | -------------- | -------- | -------------------------------------------- |
| `tab` | tab controller | No | Existing tab that receives the group box. |
| `icon` | string | Yes | Optional supported icon name or asset value. |
Exact signature:
```luau
XLQPGen1:CreateGroupBox(tab, icon)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateLoading
> Creates a loading controller for stages, tasks, progress, and closing the loading UI.
Source: /docs/elements/navigation-reference/create-loading
# `CreateLoading` [#createloading]
## What it does [#what-it-does]
Creates a loading controller for stages, tasks, progress, and closing the loading UI.
### When to use it [#when-to-use-it]
Use it when startup work should be reported to the user before the main interface is ready.
`XLQPGen1:CreateLoading(LoadingConfig)`
```luau
local Loading = Library:CreateLoading({
Name = "My Hub",
HeaderSubtitle = "Module loader",
Icon = "loader",
StageTitle = "Loading modules...",
CurrentStep = "Preparing interface...",
Progress = 0.08,
Tasks = {
"Creating navigation",
"Loading themes",
"Building interface",
"Finalizing",
},
TaskIndex = 1,
Hint = "Modules are prepared and verified in order.",
HideInterface = true,
LoadingProgress = true,
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Starting interface",
IntroIcon = "home",
IntroDuration = 0.8,
})
Loading:SetTask(2, "Loading themes...", 0.5)
Loading:Close()
```
```luau
local Loading = Library:CreateLoading({
Name = "My Hub",
HeaderSubtitle = "Module loader",
Icon = "loader",
StageTitle = "Loading modules...",
CurrentStep = "Preparing interface...",
Progress = 0.08,
Tasks = {
"Creating navigation",
"Loading themes",
"Building interface",
"Finalizing",
},
TaskIndex = 1,
Hint = "Modules are prepared and verified in order.",
HideInterface = true,
LoadingProgress = true,
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Starting interface",
IntroIcon = "home",
IntroDuration = 0.8,
IntroAccentColor = Color3.fromRGB(139, 92, 246), -- optional
})
Loading:SetTask(2, "Loading themes...", 0.5)
Loading:Close()
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------------------ | ------------ | -------- | ---------------------------------------------------------------- |
| `Name` | string | Yes | Loading-card name. Defaults to `"XLQP Gen1"`. |
| `HeaderSubtitle` | string | Yes | Small text below the card name. |
| `Icon` | string | Yes | Loading-card icon. |
| `StageTitle` | string | Yes | Current stage heading. |
| `CurrentStep` / `Step` | string | Yes | Current task text. |
| `Progress` | number | Yes | Initial progress from `0` to `1`. |
| `Tasks` / `Modules` | table | Yes | Ordered task labels. |
| `TaskIndex` | number | Yes | Initially selected task. |
| `Hint` | string | Yes | Supporting hint below progress. |
| `HideInterface` | boolean | Yes | Hides the main XLQP interface while loading. Defaults to `true`. |
| `LoadingProgress` | boolean | Yes | Shows progress and task state. |
| `IntroEnabled` / `Intro` | boolean | Yes | Enables the opening intro. |
| `IntroText` | string | Yes | Intro heading. |
| `IntroSubtitle` | string | Yes | Intro supporting text. |
| `IntroIcon` | string | Yes | Intro icon. |
| `IntroAccentColor` | Color3 | Yes | Intro icon accent color. |
| `IntroDuration` | number | Yes | Intro animation duration in seconds. |
Exact signature:
```luau
XLQPGen1:CreateLoading(LoadingConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreatePanel
> Creates a standalone panel surface.
Source: /docs/elements/navigation-reference/create-panel
# `CreatePanel` [#createpanel]
## What it does [#what-it-does]
Creates a standalone panel surface.
### When to use it [#when-to-use-it]
Use it for auxiliary content or tools that should not live directly inside the normal tab hierarchy.
`XLQPGen1:CreatePanel(panelName,PanelConfig)`
```luau
local Result = Library:CreatePanel(
"Example Panel",
)
```
```luau
local Result = Library:CreatePanel(
"Example Panel",
{}, -- optional
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | ------------------------------------------------ |
| `panelName` | string | No | Visible name of the panel. |
| `PanelConfig` | table | Yes | Optional panel appearance and behavior settings. |
Exact signature:
```luau
XLQPGen1:CreatePanel(panelName,PanelConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreatePopup
> Creates a modal popup with a title, description, and action options.
Source: /docs/elements/navigation-reference/create-popup
# `CreatePopup` [#createpopup]
## What it does [#what-it-does]
Creates a modal popup with a title, description, and action options.
### When to use it [#when-to-use-it]
Use it for confirmations, decisions, warnings, or short blocking workflows.
`XLQPGen1:CreatePopup(PopupConfig)`
```luau
Window:CreatePopup({
Title = "Risk confirmation",
Description = "Accept stays locked for five seconds.",
Options = {
{text = "Accept", timeout = 5, Accept = true, Callback = function() print("Accepted popup") end},
{text = "Cancel", Callback = function() print("Cancelled popup") end}
}
})
```
```luau
Window:CreatePopup({
Title = "Risk confirmation",
Description = "Accept stays locked for five seconds.",
Options = {
{text = "Accept", timeout = 5, Accept = true, Callback = function() print("Accepted popup") end},
{text = "Cancel", Callback = function() print("Cancelled popup") end}
}
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
| `Description` | string | Yes | Supporting text that explains the element or current state. |
| `Options` | table | Yes | Selectable choices or action definitions shown by the element. |
| `Title` | string | Yes | Primary heading shown by the element or surface. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateTab
> Creates a tab controller for a supported navigation container.
Source: /docs/elements/navigation-reference/create-tab
# `CreateTab` [#createtab]
## What it does [#what-it-does]
Creates a tab controller for a supported navigation container.
### When to use it [#when-to-use-it]
Use it when building navigation through the lower-level factory API.
`TabFunction:CreateTab(TabConfig)`
```luau
local ToolsTab = Window:CreateTab({
Name = "Tools",
Icon = "wrench",
Group = "Utilities",
GroupIcon = "folder",
GroupLayoutOrder = 2,
LayoutOrder = 10,
PremiumOnly = false,
Changelog = {
"Added server tools",
"Improved navigation",
},
Cooldown = 300,
AutoHome = false,
OnSelect = function(tab)
print("Selected:", tab.Name)
end,
})
```
```luau
local ToolsTab = Window:CreateTab({
Name = "Tools",
Icon = "wrench",
Group = "Utilities",
GroupIcon = "folder",
GroupLayoutOrder = 2,
LayoutOrder = 10,
PremiumOnly = false,
Changelog = {
"Added server tools",
"Improved navigation",
},
Cooldown = 300,
AutoHome = false,
OnSelect = function(tab)
print("Selected:", tab.Name)
end,
FeedbackWebhook = "Example", -- optional
DiscordInvite = "https://example.com", -- optional
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| --------------------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `Name` / `Title` | string | Yes | Visible tab label. Defaults to `"Tab"`. |
| `Icon` | string | Yes | Tab icon. |
| `Group` / `SideGroup` | string | Yes | Places the tab inside a named sidebar group. |
| `GroupIcon` / `GroupImage` | string | Yes | Icon used by the sidebar group. |
| `GroupLayoutOrder` / `GroupOrder` | number | Yes | Sidebar-group order. |
| `LayoutOrder` | number | Yes | Tab order inside its group. |
| `PremiumOnly` | boolean | Yes | Marks the tab for premium-only behavior. |
| `FeedbackWebhook` | string | Yes | Private feedback destination; never publish a real webhook. |
| `DiscordInvite` | string | Yes | Invite code used by supported home-tab content. |
| `Changelog` | table | Yes | Changelog entries shown by supported home-tab content. |
| `Cooldown` | number | Yes | Feedback cooldown in seconds. Defaults to `300`. |
| `AutoHome` | boolean | Yes | Enables supported automatic home behavior. |
| `OnSelect` | function | Yes | Runs when the tab is selected. |
Exact signature:
```luau
TabFunction:CreateTab(TabConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# CreateTopTab
> Creates a tab for a top-oriented tab container.
Source: /docs/elements/navigation-reference/create-top-tab
# `CreateTopTab` [#createtoptab]
## What it does [#what-it-does]
Creates a tab for a top-oriented tab container.
### When to use it [#when-to-use-it]
Use it when building horizontal navigation through the factory API.
`TabFunction:CreateTopTab(TabConfig)`
```luau
local MainTabs = Window:CreateTopTab({
Name = "Main",
MultiTab = true,
OnSelect = function(tab)
print("Selected top tab:", tab.Name)
end,
})
```
```luau
local MainTabs = Window:CreateTopTab({
Name = "Main",
MultiTab = true,
OnSelect = function(tab)
print("Selected top tab:", tab.Name)
end,
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ---------------------------------------------------- |
| `Name` | string | Yes | Visible top-tab label. Defaults to `"Top Tab"`. |
| `MultiTab` | boolean | Yes | Allows side tabs to be created beneath this top tab. |
| `OnSelect` | function | Yes | Runs when the top tab is selected. |
Exact signature:
```luau
TabFunction:CreateTopTab(TabConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakeTab
> Creates a primary window tab and returns its tab controller.
Source: /docs/elements/navigation-reference/make-tab
# `MakeTab` [#maketab]
## What it does [#what-it-does]
Creates a primary window tab and returns its tab controller.
### When to use it [#when-to-use-it]
Use it to start a distinct feature page before adding sections and elements.
`TabFunction:MakeTab(TabConfig)`
```luau
local Home = Window:MakeTab({
Name = "Home",
Icon = "home",
Group = "Elements",
GroupIcon = "layers",
AutoHome = true,
FeedbackWebhook = "",
DiscordInvite = "https://discord.gg/QEW8ap3MuV",
Changelog = {
"Added native Home Discord tab.",
"Added native Home Changelog tab.",
"Added premium locked element badges."
}
})
```
```luau
local Home = Window:MakeTab({
Name = "Home",
Icon = "home",
Group = "Elements",
GroupIcon = "layers",
AutoHome = true,
FeedbackWebhook = "",
DiscordInvite = "https://discord.gg/QEW8ap3MuV",
Changelog = {
"Added native Home Discord tab.",
"Added native Home Changelog tab.",
"Added premium locked element badges."
}
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ----------------- | ------------ | -------- | ---------------------------------------------------------- |
| `AutoHome` | boolean | Yes | Turns auto home behavior on or off. |
| `Changelog` | table | Yes | Supplies the changelog collection. |
| `DiscordInvite` | string | Yes | Sets the discord invite. |
| `FeedbackWebhook` | varies | Yes | Optional feedback webhook setting accepted by this method. |
| `Group` | varies | Yes | Optional group setting accepted by this method. |
| `GroupIcon` | varies | Yes | Optional group icon setting accepted by this method. |
| `Icon` | string | Yes | Lucide-style icon name or other supported icon value. |
| `Name` | string | Yes | Visible label or stable display name for the element. |
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakeTopTab
> Creates a primary tab in a top-navigation layout.
Source: /docs/elements/navigation-reference/make-top-tab
# `MakeTopTab` [#maketoptab]
## What it does [#what-it-does]
Creates a primary tab in a top-navigation layout.
### When to use it [#when-to-use-it]
Use it when your window uses horizontal rather than sidebar navigation.
`TabFunction:MakeTopTab(TabConfig)`
```luau
local MainTabs = Window:MakeTopTab({
Name = "Main",
MultiTab = true,
OnSelect = function(tab)
print("Selected top tab:", tab.Name)
end,
})
```
```luau
local MainTabs = Window:MakeTopTab({
Name = "Main",
MultiTab = true,
OnSelect = function(tab)
print("Selected top tab:", tab.Name)
end,
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Field | Type / value | Optional | What it controls |
| ---------- | ------------ | -------- | ---------------------------------------------------- |
| `Name` | string | Yes | Visible top-tab label. Defaults to `"Top Tab"`. |
| `MultiTab` | boolean | Yes | Allows side tabs to be created beneath this top tab. |
| `OnSelect` | function | Yes | Runs when the top tab is selected. |
Exact signature:
```luau
TabFunction:MakeTopTab(TabConfig)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# MakeWindow
> Creates the main XLQP window and initializes its configured appearance, navigation, loading, security, and persistence features.
Source: /docs/elements/navigation-reference/make-window
# `MakeWindow` [#makewindow]
## What it does [#what-it-does]
Creates the main XLQP window and initializes its configured appearance, navigation, loading, security, and persistence features.
### When to use it [#when-to-use-it]
Use it once near the start of your script, then keep the returned window to build tabs and control window state.
`XLQPGen1:MakeWindow(config)`
```luau
local Window = Library:MakeWindow({
Branding = {
Name = "My Hub",
Subtitle = "Powered by XLQP Gen1",
Icon = "home",
},
Config = {
Enabled = true,
Folder = "MyHub",
},
Appearance = {
LiquidGlass = true,
CornerRadius = 18,
GifBackgroundEnabled = false,
GifBackgroundUrl = "",
GifBackgroundTransparency = 0.2,
Size = UDim2.new(0, 860, 0, 560),
},
Loading = {
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Loading...",
IntroDuration = 0.8,
FastLoad = true,
},
Behavior = {
ToggleKey = Enum.KeyCode.RightShift,
UnlockMouse = true,
},
Navigation = {
Enabled = true,
SidebarTab = true,
},
Security = {
AntiLogger = true,
Mode = "Better",
},
})
```
```luau
local Window = Library:MakeWindow({
Branding = {
Name = "My Hub",
Subtitle = "Powered by XLQP Gen1",
Icon = "home",
IntroText = "My Hub",
Tags = {
{ Text = "V1.0.0" },
{
Text = "BETA",
BackgroundColor = Color3.fromRGB(116, 82, 190),
},
},
},
Config = {
Enabled = true,
Folder = "MyHub",
},
SaveUIPosition = true,
SaveUISize = true,
TabButtonsStyle = {
Gap = 4,
Padding = 8,
CornerRadius = 6,
Indicator = true,
IndicatorWidth = 2,
IndicatorHeight = 20,
},
PluginsEnabled = true,
PluginsFolder = "MyHub/plugins",
PrebuiltPlugins = {},
TopBarQuickPanels = {
Enabled = true,
Toggles = true,
Notifications = true,
NotificationLimit = 100,
},
PrivateTabs = {
Enabled = true,
Password = "",
TopName = "Private",
TopIcon = "lock",
EditorName = "Edit",
EditorIcon = "pencil",
EditorWidth = 900,
EditorHeight = 560,
},
LoadingTitle = "Loading modules...",
LoadingTasks = {
"Creating navigation",
"Loading themes and layout",
"Building interface modules",
"Finalizing interface",
},
GlowEnabled = true,
GlowSpeed = 6,
GlowColor = Color3.fromRGB(139, 92, 246),
betabuttonslist = true,
Widgets = {
Enabled = true,
BetaButton = true,
StartOpen = false,
ButtonText = "Widgets",
Icon = "layout-dashboard",
Width = 1020,
Height = 560,
HideMainWindow = true,
},
tablistspacing = 6,
statusbar = {
Region = "US-East",
},
uishadow = false,
Appearance = {
Shiny = true,
NewUI = true,
BigUI = false,
LiquidGlass = true,
AutoResizeText = false,
CustomCursor = false,
CornerRadius = 18,
ResizeHandle = {
Size = 42,
Color = Color3.fromRGB(139, 92, 246),
},
ShowTabInfo = true,
SidebarWidth = 170,
SidebarCollapsedWidth = 76,
LiveColor = true,
LiveColorBackground = false,
LiveColorThemeImages = true,
LiveColorElementBackground = false,
LiveColorElements = true,
LiveColorTheme = "Custom Galaxy Rain",
LiveColorFolder = "XLQPGen1/LiveColors",
LiveColorScriptsEnabled = true,
LiveColorSpeed = 0.22,
RainbowUpdateRate = 20,
LiveColorSettingsBackground = true,
LiveColorTransparency = 0.04,
BackgroundEnabled = true,
BackgroundImage = "rbxassetid://0",
BackgroundTransparency = 0.2,
BackgroundScaleType = "Crop",
GifBackgroundEnabled = false,
GifBackgroundUrl = "",
GifBackgroundTransparency = 0.2,
Size = UDim2.new(0, 860, 0, 560),
},
Loading = {
IntroEnabled = true,
IntroText = "My Hub",
IntroSubtitle = "Loading...",
IntroAccentColor = Color3.fromRGB(139, 92, 246),
IntroDuration = 0.8,
LoadingProgress = true,
FastLoad = true,
AutoInit = false,
Delay = 2.5,
LoadTimeout = 20,
PerformanceMode = true,
},
Behavior = {
ToggleKey = "RightShift",
UnlockMouse = true,
Guide = false,
AutoStartGuide = false,
EditableAllElements = false,
},
Navigation = {
Enabled = true,
SidebarTab = true,
TabList = {
Detached = true,
Width = 168,
Gap = 12,
CornerRadius = 14,
Logo = {
Image = "home",
Text = "MY HUB",
Subtitle = "XLQP GEN1",
Layout = "Horizontal",
Size = 40,
Height = 78,
},
},
Tabs = {
{ Name = "Home", Icon = "home" },
{ Name = "Security", Icon = "shield" },
{ Name = "Settings", Icon = "settings" },
},
},
Typewriter = {
Enabled = true,
Multiple = true,
Text = { "My Hub", "loaded", "ready" },
Speed = 1.2,
SoundDelay = 0.035,
Sound = "rbxassetid://0",
Pitch = 1,
},
Discord = {
Enabled = false,
Invite = "YOUR_INVITE_CODE",
InviteUrl = "https://discord.gg/YOUR_INVITE_CODE",
AuthEnabled = false,
AutoStartAuth = false,
PollInterval = 2.5,
Timeout = 600,
Whitelist = {},
},
Security = {
AntiLogger = true,
Mode = "Better",
DiscordWebhookWhitelist = {
"https://discord.com/api/webhooks/WEBHOOK_ID/WEBHOOK_TOKEN",
},
},
BuiltInTabs = {
Enabled = true,
Group = "Configs",
GroupIcon = "folder",
Settings = {
Enabled = true,
WatermarkText = "MY HUB",
AutoStartAuth = false,
},
Security = {
Enabled = true,
},
PVP = {
Enabled = false,
Icon = "swords",
Risky = true,
RiskTitle = "Risky PVP tools",
RiskDescription = "This tab can affect other players. Continue?",
RiskTimeout = 5,
RememberRisk = true,
RiskDimBackground = false,
},
},
KeySystem = {
Enabled = false,
Title = "My Hub Key",
Subtitle = "Enter your key to continue.",
Note = "Get a key from your community.",
Keys = { "YOUR_KEY" },
Hashes = { "YOUR_HASHED_KEY" },
Save = true,
Skip = true,
FileName = "MyHubKey",
Links = { "https://example.com/get-key" },
},
SearchBar = {
Default = "Search elements",
ClearTextOnFocus = false,
filter = true,
StartOpen = true,
MobileStartOpen = false,
UnlockMouse = true,
Shiny = true,
DesktopBreakpoint = 860,
HeaderRightReserve = 440,
MaxHeaderWidth = 380,
HeaderCenterScale = 0.46,
},
})
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Group / field | Type / value | Optional | What it controls |
| ----------------------------------------- | -------------- | -------- | -------------------------------------------------------------------------------------------- |
| `Branding` | table | Yes | Name, subtitle, icon, intro text, and tags. |
| `Config` | table | Yes | Saved-state settings such as `Enabled` and `Folder`. |
| `SaveUIPosition` / `SaveUISize` | boolean | Yes | Persists window geometry. |
| `TabButtonsStyle` | table | Yes | Controls tab spacing, radius, padding, and indicator. |
| `Appearance` | table | Yes | Size, surfaces, static or animated GIF background, cursor, sidebar, and live-color settings. |
| `Loading` | table | Yes | Intro, progress, timing, and performance settings. |
| `Behavior` | table | Yes | Toggle key, mouse, guide, and editable-element behavior. |
| `Navigation` | table | Yes | Sidebar layout, tab list, logo, and initial tabs. |
| `Typewriter` | table | Yes | Animated branding text and sound. |
| `Discord` | table | Yes | Invite and optional authentication behavior. |
| `Security` | table | Yes | Anti Logger policy; separate from early-load Secure Mode. |
| `BuiltInTabs` | table | Yes | Settings, Security, and optional PVP pages. |
| `KeySystem` | table | Yes | Optional key-gate configuration. |
| `SearchBar` | table | Yes | Search behavior and header layout. |
| `TopBarQuickPanels` | table | Yes | Active-toggle and notification quick panels. |
| `PrivateTabs` | table | Yes | Private-tab editor configuration. |
| `Widgets` | table | Yes | Floating widget dashboard configuration. |
| `PluginsEnabled` | boolean | Yes | Enables plugin discovery. |
| `PluginsFolder` | string | Yes | Local plugin folder. |
| `PrebuiltPlugins` | table | Yes | Plugin definitions registered at startup. |
| `LoadingTitle` / `LoadingTasks` | string / table | Yes | Top-level loading labels. |
| `GlowEnabled` / `GlowSpeed` / `GlowColor` | varies | Yes | Ambient window glow. |
See [Window configuration](/docs/window) for every nested field and default.
Exact signature:
```luau
XLQPGen1:MakeWindow(config)
```
## Behavior and return value [#behavior-and-return-value]
Store the returned controller or object when later code needs to update its state, call its methods, or close it.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# RegisterEditableContainer
> Registers a GUI container with XLQP’s editable-element system.
Source: /docs/elements/navigation-reference/register-editable-container
# `RegisterEditableContainer` [#registereditablecontainer]
## What it does [#what-it-does]
Registers a GUI container with XLQP’s editable-element system.
### When to use it [#when-to-use-it]
Use it when a custom container should participate in move or edit behavior enabled by the window.
`XLQPGen1:RegisterEditableContainer(Container)`
```luau
local Result = Library:RegisterEditableContainer(
Container,
)
```
```luau
local Result = Library:RegisterEditableContainer(
Container,
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| ----------- | ------------ | -------- | ----------------------------------------------- |
| `Container` | Instance | No | GUI container registered for editable behavior. |
Exact signature:
```luau
XLQPGen1:RegisterEditableContainer(Container)
```
## Behavior and return value [#behavior-and-return-value]
Registration connects an existing object or definition to XLQP. Register it after the object exists and before relying on XLQP-managed behavior.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)
---
# RegisterPopupGui
> Registers a popup GUI so XLQP can coordinate its lifecycle and visibility.
Source: /docs/elements/navigation-reference/register-popup-gui
# `RegisterPopupGui` [#registerpopupgui]
## What it does [#what-it-does]
Registers a popup GUI so XLQP can coordinate its lifecycle and visibility.
### When to use it [#when-to-use-it]
Use it for custom popups that need to behave consistently with built-in overlays.
`XLQPGen1:RegisterPopupGui(gui)`
```luau
local Result = Library:RegisterPopupGui(
ScreenGui,
)
```
```luau
local Result = Library:RegisterPopupGui(
ScreenGui,
)
```
### Supported values and optional fields [#supported-values-and-optional-fields]
| Parameter | Type / value | Optional | What it controls |
| --------- | ------------ | -------- | ------------------------------- |
| `gui` | Instance | No | Popup GUI registered with XLQP. |
Exact signature:
```luau
XLQPGen1:RegisterPopupGui(gui)
```
## Behavior and return value [#behavior-and-return-value]
Registration connects an existing object or definition to XLQP. Register it after the object exists and before relying on XLQP-managed behavior.
Fields marked optional may be omitted. XLQP then uses the method’s built-in default or leaves that feature disabled.
## Related reference [#related-reference]
* [All element options](/docs/reference/element-options)
* [Controller methods](/docs/reference/controllers)
* [Full example](/docs/examples)