Skip to main content
Sentivel Endorsed by RayfieldStatus pages and uptime monitoring for whatever you ship. Free to start.Take a look

Tabs

window:CreateTab(props) adds a tab. The first visible tab opens automatically. A tab needs at least one of name or icon. Tabs sit in a strip under the title bar by default, or in a rail down the left with sidebarLayout = true.
string
The tab label.
string | number
An icon shown beside the label.
A tab creates any element, plus sections and groups. It also has Select(noAnimation?), Deselect(noAnimation?), and Remove(). Pass true to select or deselect without the animation.

Sections

A section is a heading that labels the controls beneath it. CreateSection returns a handle that reorders like any element.
window:CreateSection(props) heads the tab rail the way tab:CreateSection heads an element list, grouping the tabs created after it. Same props, and the handle it returns has Remove().
The rail only exists in the sidebar layout. Under the default top strip there is nowhere to hang a heading, so window:CreateSection does nothing there.

Groups

A group arranges its children along one axis. Groups nest, so a row of columns forms a grid. Set direction to "row" (the default) or "column"; "horizontal" and "vertical" work as aliases.
A two-column grid built from nested groups
Rows hold the compact elements (button, toggle, stat) along with sliders, and wrap to a new line when they fill up. Columns also take dropdowns and sections. A group offers CreateSection and CreateGroup of its own.
Input, keybind, and color picker are full-width and live at the tab level. Create those directly on the tab, not inside a group.