# Table of Contents - [Cascade Developer Documentation](#cascade-developer-documentation) - [Interface Guidelines - Cascade Developer Documentation](#interface-guidelines-cascade-developer-documentation) - [Importing the Library - Cascade Developer Documentation](#importing-the-library-cascade-developer-documentation) - [Themes - Cascade Developer Documentation](#themes-cascade-developer-documentation) - [Accents - Cascade Developer Documentation](#accents-cascade-developer-documentation) - [App - Cascade Developer Documentation](#app-cascade-developer-documentation) - [Window - Cascade Developer Documentation](#window-cascade-developer-documentation) - [Example - Cascade Developer Documentation](#example-cascade-developer-documentation) - [Section - Cascade Developer Documentation](#section-cascade-developer-documentation) - [Page - Cascade Developer Documentation](#page-cascade-developer-documentation) - [Tab - Cascade Developer Documentation](#tab-cascade-developer-documentation) - [Form - Cascade Developer Documentation](#form-cascade-developer-documentation) - [Row - Cascade Developer Documentation](#row-cascade-developer-documentation) - [Base Component - Cascade Developer Documentation](#base-component-cascade-developer-documentation) - [VStack - Cascade Developer Documentation](#vstack-cascade-developer-documentation) - [HStack - Cascade Developer Documentation](#hstack-cascade-developer-documentation) - [PageSection - Cascade Developer Documentation](#pagesection-cascade-developer-documentation) - [Label - Cascade Developer Documentation](#label-cascade-developer-documentation) - [TitleStack - Cascade Developer Documentation](#titlestack-cascade-developer-documentation) - [Button - Cascade Developer Documentation](#button-cascade-developer-documentation) - [Symbol - Cascade Developer Documentation](#symbol-cascade-developer-documentation) - [Toggle - Cascade Developer Documentation](#toggle-cascade-developer-documentation) - [Slider - Cascade Developer Documentation](#slider-cascade-developer-documentation) - [TextField - Cascade Developer Documentation](#textfield-cascade-developer-documentation) - [Stepper - Cascade Developer Documentation](#stepper-cascade-developer-documentation) - [KeybindField - Cascade Developer Documentation](#keybindfield-cascade-developer-documentation) - [RadioButtonGroup - Cascade Developer Documentation](#radiobuttongroup-cascade-developer-documentation) - [Notification - Cascade Developer Documentation](#notification-cascade-developer-documentation) - [PopUpButton - Cascade Developer Documentation](#popupbutton-cascade-developer-documentation) - [PullDownButton - Cascade Developer Documentation](#pulldownbutton-cascade-developer-documentation) --- # Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/#welcome) [](https://github.com/biggaboy212/Cascade/edit/main/docs/index.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/index.md "View source of this page") Welcome ======= Welcome to the official API documentation for the [Cascade](https://github.com/biggaboy212/Cascade) UI Library. You can use these docs as reference to build interfaces with the Cascade API, or use it as a reference for your own UI Library. Tip Don't get overwheled with how much info is presented in each component, you can ignore most things besides the example and types. Getting started --------------- * [Importing the Library](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/) * [Creating an Application](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/) * [Example](https://biggaboy212.github.io/Cascade/Getting%20Started/example/) Supporting the project ---------------------- If you'd like to support the project, consider donating via any of these: * **LTC**: `Lcd6pCPiVw9GH2MAaGkR8TX39EtL2LzFoa` * **SOL**: `EfwivXazedEw2kL2et92NKDkT3qrQ6pdxA8Bs7RKYRuN` * **ETH**: `0x85C09A302CBB42a321E737E6E4dDAC0Eebc4ac3E` * **BTC**: `bc1qlhym0f0lejwlhd47gext8g7fgej366j7z85vvx` Back to top --- # Interface Guidelines - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Getting%20Started/interface-guidelines/#interface-guidelines) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Getting%20Started/interface-guidelines.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Getting%20Started/interface-guidelines.md "View source of this page") Interface Guidelines ==================== For more information about Cascade’s Human Interface Guidelines, refer to [Apple’s Official HIG documentation](https://developer.apple.com/design/human-interface-guidelines/) , which Cascade is based on. Why is this important? ---------------------- Following established interface guidelines is essential to building high-quality user interfaces. While visually appealing components are important, it's equally critical to **understand how and when to use them.** Cascade adopts Apple's Human Interface Guidelines to promote consistency, clarity, and intentional design. _By understanding these principles_, you can create polished interfaces that are consistent with a user's everyday interface navigation experience. Knowing how to use components correctly leads to better user experiences and more maintainable UI systems. Back to top --- # Importing the Library - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#importing-the-library) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Getting%20Started/importing-the-library.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Getting%20Started/importing-the-library.md "View source of this page") Importing the Library ===================== Note You can clone the entire Cascade repo into your project with something _similar_ to wally, but there isn't currently a package manager that I know of which smoothly works with non roblox-dependent projects. Pre-built releases ------------------ Cascade also has pre-built `luau` modules. ### Over HTTP This method will download the release dynamically using HttpGet. `[](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-1) local function import(owner, repo, version, file) [](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-2) local tag = (version == "latest" and "latest/download" or "download/"..version) [](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-3) [](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-4) return loadstring(game:HttpGetAsync(("https://github.com/%s/%s/releases/%s/%s"):format(owner, repo, tag, file)), file)() [](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-5) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-7) local cascade = import("biggaboy212", "Cascade", "latest", "dist.luau") [](https://biggaboy212.github.io/Cascade/Getting%20Started/importing-the-library/#__codelineno-0-8) -- If you want to use a specific release (i.e, beta releases), replace 'latest' with it's release tag.` ### Local Build 1. Download a valid release: [Cascade Releases](https://github.com/biggaboy212/Cascade/releases) 2. Place the `luau` module into your project (e.g., under `packages/`). Back to top --- # Themes - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/themes/#themes) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Getting%20Started/The%20API/themes.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Getting%20Started/The%20API/themes.md "View source of this page") Themes ====== Cascade provides presets for setting the overall application-wide theme. | Theme | | --- | | Light **(Default)** | | Dark | Example ------- `[](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/themes/#__codelineno-0-1) application.Theme = cascade.Themes.Dark` Back to top --- # Accents - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/accents/#accents) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Getting%20Started/The%20API/accents.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Getting%20Started/The%20API/accents.md "View source of this page") Accents ======= Cascade provides presets for setting the overall application-wide accent. | Accent | | --- | | Blue **(Default)** | | Red | | Orange | | Yellow | | Green | | Graphite | | Pink | | Purple | Example ------- `[](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/accents/#__codelineno-0-1) application.Accent = cascade.Accents.Red` Back to top --- # App - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#app) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Getting%20Started/The%20API/app.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Getting%20Started/The%20API/app.md "View source of this page") App === You can create a new app by calling the `New` method from the Cascade API. This returns a custom object merged with a `ScreenGui`. The returned object exposes all built-in [Components](https://biggaboy212.github.io/Cascade/Components/) such as [Window](https://biggaboy212.github.io/Cascade/Components/Window/) , [Tab](https://biggaboy212.github.io/Cascade/Components/Tab/) , and others for UI composition. Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | WindowPill | `boolean?` | Whether or not the window minimize/restore pill should be visible. | | Theme | `Theme?` | Light or Dark mode. See [Themes](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/themes/) | | Accent | `Accent?` | Accent color palette. See [Accents](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/accents/) | [View all inherited from ScreenGui](https://create.roblox.com/docs/reference/engine/classes/ScreenGui#summary-properties) ### Methods [View all inherited from ScreenGui](https://create.roblox.com/docs/reference/engine/classes/ScreenGui#summary-methods) ### Events [View all inherited from ScreenGui](https://create.roblox.com/docs/reference/engine/classes/ScreenGui#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-1) type AppProperties = ScreenGui & { [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-2) WindowPill: boolean?, [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-3) Theme: Theme?, [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-4) Accent: Accent?, [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-5) } [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-0-7) type App = AppProperties & Components` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-1-1) function(self, properties: AppProperties): App` Example ------- `[](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-2-1) local app = cascade.New({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-2-2) WindowPill = true, [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-2-3) Theme = cascade.Themes.Light, [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-2-4) Accent = cascade.Accents.Blue, [](https://biggaboy212.github.io/Cascade/Getting%20Started/The%20API/app/#__codelineno-2-5) })` Back to top --- # Window - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Window/#window) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Window.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Window.md "View source of this page") Window ====== `Window` is a high-level container that handles all base interaction with the user for you. Usually this is the first component called and most components stem from here. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_window.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Searching` | `boolean?` | Shows a text field in the title bar which can be used to search pages for content. | | `Draggable` | `boolean?` | Enables window dragging via mouse or touch device. | | `Resizable` | `boolean?` | Enables resizing via sides or corners. | | `Title` | `string?` | Title displayed in the content titlebar. | | `Subtitle` | `string?` | Subtitle displayed under the title. Will be visually disabled if not defined. | | `Maximized` | `boolean?` | Should the window be maximized by default? | | `Minimized` | `boolean?` | Should the window be minimized by default? | | `Dropshadow` | `boolean?` | Enables a dropshadow effect on the window. | | `UIBlur` | `boolean?` | Applies a background blur effect to the sidebar. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-1) type WindowProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-2) Searching: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-3) Draggable: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-4) Resizable: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-5) Title: string?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-6) Subtitle: string?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-7) Maximized: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-8) Minimized: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-9) [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-10) -- These effects can be system resource intensive. [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-11) Dropshadow: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-12) UIBlur: boolean?, -- Detectable in some games. [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-13) } [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-14)[](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-0-15) type Window = BaseComponent & Components & WindowProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-1-1) function(self, properties: WindowProperties): Window` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-1) local window = app:Window({ [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-2) Title = "Cascade", [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-3) Subtitle = "This is my subtitle.", [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-4) }) [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-5)[](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-6) print(window:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-7) print(window.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/Window/#__codelineno-2-8) print(window.Type) --> "Window"` Back to top --- # Example - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#example) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Getting%20Started/example.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Getting%20Started/example.md "View source of this page") Example ======= View a example application that can be made with Cascade. Note You can view a larger test application here which has full keybind minimization and mobile resize already added: [tests/test.luau](https://github.com/biggaboy212/Cascade/blob/main/tests/test.luau) Creating a basic app -------------------- ### Code `[](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-1) -- [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-2)[](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-3) -- Create our main application. [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-4) local app = cascade.New({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-5) Theme = cascade.Themes.Light, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-6) Accent = cascade.Accents.Blue, -- Optional, defaults to Blue [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-7) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-8)[](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-9) do -- Make the main window [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-10) local window = app:Window({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-11) Title = "My Window", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-12) Subtitle = "My window", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-13) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-14) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-15) do -- Make a static tab section [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-16) local section = window:Section({ Title = "Section title" }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-17) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-18) do -- Make our main tab [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-19) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-20) Selected = true, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-21) Title = "Main", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-22) Icon = cascade.Symbols.squareStack3dUp, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-23) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-24) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-25) do [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-26) local form = tab:Form() [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-27) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-28) do -- Make the toggle [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-29) local row = form:Row() [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-30) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-31) -- You can of course add a wrapper to simplify creating page components if you only want a title stack and a component to go along. [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-32) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-33) Title = "Toggle", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-34) Subtitle = "My toggle", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-35) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-36) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-37) row:Right():Toggle() [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-38) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-39) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-40) do -- Make the button [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-41) local row = form:Row() [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-42) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-43) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-44) Title = "Button", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-45) Subtitle = "My button", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-46) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-47) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-48) row:Right():Button({ Label = "Click me" }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-49) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-50) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-51) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-52) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-0-53) end` ### Result ![Basic app result](https://biggaboy212.github.io/Cascade/assets/demoapp.png) Adding a settings page ---------------------- ### Code Add this below the existing tab. `[](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-1) do -- Window [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-2) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-3) Title = "Window", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-4) Icon = cascade.Symbols.sidebarLeft, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-5) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-6) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-7) do -- Appearance [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-8) local form = tab:PageSection({ Title = "Appearance" }):Form() -- [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-9) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-10) do -- Dark mode [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-11) local row = form:Row({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-12) SearchIndex = "Dark mode", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-13) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-14) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-15) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-16) Title = "Dark mode", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-17) Subtitle = "Dark Mode is a application appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-18) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-19) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-20) row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-21) Value = app.Theme == cascade.Themes.Dark, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-22) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-23) app.Theme = value and cascade.Themes.Dark or cascade.Themes.Light [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-24) end, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-25) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-26) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-27) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-28) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-29) do -- Input [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-30) local form = tab:PageSection({ Title = "Input" }):Form() [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-31) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-32) do -- Searching [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-33) local row = form:Row({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-34) SearchIndex = "Searchable", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-35) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-36) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-37) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-38) Title = "Searchable", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-39) Subtitle = "Allows pages to be searched using a text field in the title bar.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-40) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-41) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-42) row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-43) Value = window.Searching, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-44) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-45) window.Searching = value [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-46) end, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-47) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-48) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-49) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-50) do -- Draggable [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-51) local row = form:Row({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-52) SearchIndex = "Draggable", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-53) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-54) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-55) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-56) Title = "Draggable", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-57) Subtitle = "Allows users to move the window with a mouse or touch device.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-58) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-59) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-60) row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-61) Value = window.Draggable, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-62) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-63) window.Draggable = value [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-64) end, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-65) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-66) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-67) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-68) do -- Resizable [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-69) local row = form:Row({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-70) SearchIndex = "Resizable", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-71) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-72) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-73) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-74) Title = "Resizable", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-75) Subtitle = "Allows users to resize the window with a mouse or touch device.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-76) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-77) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-78) row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-79) Value = window.Resizable, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-80) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-81) window.Resizable = value [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-82) end, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-83) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-84) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-85) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-86) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-87) do -- Effects [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-88) local form = tab:PageSection({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-89) Title = "Effects", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-90) Subtitle = "These effects may be resource intensive across different systems.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-91) }):Form() [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-92) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-93) do -- Dropshadow [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-94) local row = form:Row({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-95) SearchIndex = "Dropshadow", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-96) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-97) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-98) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-99) Title = "Dropshadow", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-100) Subtitle = "Enables a dropshadow effect on the window.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-101) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-102) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-103) row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-104) Value = window.Dropshadow, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-105) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-106) window.Dropshadow = value [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-107) end, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-108) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-109) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-110) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-111) do -- UI Blur [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-112) local row = form:Row({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-113) SearchIndex = "Background blur", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-114) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-115) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-116) row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-117) Title = "Background blur", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-118) Subtitle = "Enables a UI background blur effect on the window. This can be detectable in some games.", [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-119) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-120) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-121) row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-122) Value = window.UIBlur, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-123) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-124) window.UIBlur = value [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-125) end, [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-126) }) [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-127) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-128) end [](https://biggaboy212.github.io/Cascade/Getting%20Started/example/#__codelineno-1-129) end` ### Result ![Basic app result with settings](https://biggaboy212.github.io/Cascade/assets/demoapp_2.png) Back to top --- # Section - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Section/#section) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Section.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Section.md "View source of this page") Section ======= A `Section` organizes sidebar content by grouping related tabs together with optional disclosure. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_sidebar.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Title` | `string?` | The displayed section title. | | `Disclosure` | `boolean?` | Whether the section's content should be hideable. Defaults to false. | | `Expanded` | `boolean?` | Whether the section should be expanded by default. Defaults to true. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-1) type SectionProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-2) Title: string?, [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-3) Disclosure: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-4) Expanded: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-5) } [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-0-7) type Section = BaseComponent & Components & SectionProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-1-1) function(self, properties: SectionProperties): Section` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-1) local section = window:Section({ [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-2) Disclosure = true, [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-3) Title = "Settings", [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-4) }) [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-5)[](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-6) print(section:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-7) print(section.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/Section/#__codelineno-2-8) print(section.Type) --> "Section"` Back to top --- # Page - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Page/#page) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Page.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Page.md "View source of this page") Page ==== A `Page` is a container that holds content in a scrollable area. Pages are typically used with [Tabs](https://biggaboy212.github.io/Cascade/Components/Tab/) to create navigable multi-page interfaces, but can also be used standalone. Summary ------- ### Properties [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-0-1) type PageProperties = Frame [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-0-2)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-0-3) type Page = BaseComponent & Components & PageProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-1-1) function(self, properties: PageProperties?): Page` Pages and Tabs -------------- Pages are most commonly used with [Tabs](https://biggaboy212.github.io/Cascade/Components/Tab/) . Each Tab has an associated Page that displays when the tab is selected. When you create a tab, it automatically creates a page for you: ### Tabs with custom pages You can also pass your own page to a tab: `[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-1) local customPage = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-2)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-3) -- Add content to your page [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-4) customPage:Form():PageSection({ Title = "Settings" }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-5)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-6) -- Pass it to the tab [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-7) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-8) Title = "Settings", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-9) Page = customPage, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-2-10) })` ### Page Navigation Use the `Navigate` method on a tab to switch between pages programmatically: `[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-1) local homePage = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-2) local settingsPage = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-3)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-4) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-5) Title = "Routing", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-6) Selected = false, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-7) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-8)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-9) -- Setup home page [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-10) do [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-11) local form = homePage:Form() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-12) form:Row():Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-13) Label = "Go to Settings", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-14) Pushed = function() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-15) tab:Navigate(settingsPage) -- Switch to settings page [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-16) end, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-17) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-18) end [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-19)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-20) -- Setup settings page [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-21) do [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-22) local form = settingsPage:Form() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-23) form:Row():Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-24) Label = "Back to Home", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-25) Pushed = function() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-26) tab:Navigate(homePage) -- Switch back to home page [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-27) end, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-28) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-29) end [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-30)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-31) -- Show home page initially [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-3-32) tab:Navigate(homePage)` Examples -------- `[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-1) local app = cascade.New({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-2) Theme = cascade.Themes.Light, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-3) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-4)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-5) local window = app:Window({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-6) Title = "My App", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-7) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-8)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-9) local section = window:Section({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-10) Disclosure = false, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-11) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-12)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-13) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-14) Title = "Navigation", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-15) Icon = cascade.Symbols.squareStack3dUp, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-16) Selected = false, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-17) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-18)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-19) -- Create pages [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-20) local page1 = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-21) local page2 = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-22)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-23) -- Setup page 1 [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-24) do [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-25) local form = page1:Form() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-26) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-27) form:Row():Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-28) Title = "Home Page", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-29) Subtitle = "Welcome to the app", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-30) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-31) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-32) form:Row():Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-33) Label = "Go to Next Page", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-34) Pushed = function() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-35) tab:Navigate(page2) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-36) end, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-37) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-38) end [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-39)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-40) -- Setup page 2 [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-41) do [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-42) local form = page2:Form() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-43) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-44) form:Row():Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-45) Title = "Second Page", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-46) Subtitle = "You've navigated here", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-47) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-48) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-49) form:Row():Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-50) Label = "Back to Home", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-51) State = "Secondary", [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-52) Pushed = function() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-53) tab:Navigate(page1) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-54) end, [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-55) }) [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-56) end [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-57)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-58) -- Show page 1 initially [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-4-59) tab:Navigate(page1)` `[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-5-1) local page = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-5-2)[](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-5-3) print(page:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-5-4) print(page.ClassName) --> "ScrollingFrame" [](https://biggaboy212.github.io/Cascade/Components/Page/#__codelineno-5-5) print(page.Type) --> "Page"` Back to top --- # Tab - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Tab/#tab) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Tab.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Tab.md "View source of this page") Tab === A `Tab` separates content into different pages, and lets users navigate between them using a button on the sidebar. Each tab has an associated [Page](https://biggaboy212.github.io/Cascade/Components/Page/) that displays when the tab is selected. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_sidebar.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Title` | `string?` | The tab's display title. | | `Icon` | `string?` | The `rbxassetid://` of the image to display. You can use cascade.Symbols for pre-made symbols. | | `Indentation` | `number?` | The tab indentation level/how far right it is. This is automatically increased by `1` when you nest a tab on another tab. | | `Selected` | `boolean?` | Whether or not the tab is selected by default. Defaults to false. Only one tab in a section should be selected. | | `Page` | `Page?` | A custom page component to use for this tab. If not provided, a default page is automatically created. See [Page](https://biggaboy212.github.io/Cascade/Components/Page/)
for more information. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods | Method | Signature | Description | | --- | --- | --- | | `Navigate` | `(self: Tab, page: Page) -> nil` | Switch the tab's displayed page to a different page. Useful for multi-step workflows or navigating between different views within a tab. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-1) type TabProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-2) Title: string?, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-3) Icon: string?, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-4) Indentation: number?, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-5) Selected: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-6) Page: Page?, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-7) } [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-8)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-9) type Tab = BaseComponent & Components & TabProperties & { [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-10) Navigate: (self: Tab, page: Page) -> nil, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-0-11) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-1-1) function(self, properties: TabProperties?): Tab` Creating Tabs ------------- `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-2-1) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-2-2) Title = "Settings", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-2-3) Icon = cascade.Symbols.gear, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-2-4) })` ### Tab with Custom Page Tabs automatically make pages for you, but you can pass a custom one. `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-1) local customPage = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-2)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-3) -- Add content to the page [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-4) customPage:Form():Row():Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-5) Value = false, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-6) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-7)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-8) -- Use the page in a tab [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-9) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-10) Title = "Settings", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-11) Page = customPage, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-3-12) })` Navigating between Pages ------------------------ The `Navigate` method allows you to switch pages within a tab. This is useful for multi-step workflows or progressive disclosure: `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-1) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-2) Title = "Workflow", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-3) Selected = true, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-4) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-5)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-6) local page1 = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-7) local page2 = app:Page() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-8)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-9) -- Setup pages with navigation buttons [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-10) do [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-11) local form = page1:Form() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-12) form:Row():Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-13) Label = "Next", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-14) Pushed = function() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-15) tab:Navigate(page2) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-16) end, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-17) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-18) end [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-19)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-20) do [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-21) local form = page2:Form() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-22) form:Row():Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-23) Label = "Back", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-24) State = "Secondary", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-25) Pushed = function() [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-26) tab:Navigate(page1) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-27) end, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-28) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-29) end [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-30)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-31) -- Show page 1 initially [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-4-32) tab:Navigate(page1)` Nested Tabs ----------- Tabs can be nested for hierarchical navigation. Indentation is automatically handled: `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-1) local mainTab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-2) Title = "Main", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-3) Icon = cascade.Symbols.squareStack3dUp, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-4) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-5)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-6) -- Chain additional tabs to create indentation [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-7) mainTab:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-8) Title = "Sub 1", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-9) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-10)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-11) mainTab:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-12) Title = "Sub 2", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-5-13) })` Tab Selection ------------- Only one tab in a section can be selected at a time. Clicking a tab automatically deselects others: `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-1) local tab1 = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-2) Title = "Tab 1", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-3) Selected = true, -- This tab starts selected [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-4) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-5)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-6) local tab2 = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-7) Title = "Tab 2", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-8) Selected = false, -- Defaults to false [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-9) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-10)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-6-11) -- When tab2 is clicked, tab1 is automatically deselected` Manually change the selected state: `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-7-1) local tab1 = section:Tab({ Title = "Tab 1" }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-7-2) local tab2 = section:Tab({ Title = "Tab 2" }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-7-3)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-7-4) -- Later in your code [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-7-5) tab2.Selected = true -- Selects tab2 [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-7-6) -- tab1 is automatically deselected by the system` Examples -------- `[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-1) local tab = section:Tab({ [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-2) Selected = true, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-3) Title = "Tab", [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-4) Icon = cascade.Symbols.squareStack3dUp, [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-5) }) [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-6)[](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-7) print(tab:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-8) print(tab.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/Tab/#__codelineno-8-9) print(tab.Type) --> "Tab"` Back to top --- # Form - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Form/#form) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Form.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Form.md "View source of this page") Form ==== A `Form` is a vertical container that organizes interface elements into clearly separated rows, using consistent styling like dividers to emphasize structure. Summary ------- ### Properties [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-0-1) type FormProperties = Frame [](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-0-2)[](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-0-3) type Form = BaseComponent & Components & FormProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-1-1) function(self, properties: FormProperties): Form` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-2-1) local form = section:Form() [](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-2-2)[](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-2-3) print(form:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-2-4) print(form.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/Form/#__codelineno-2-5) print(form.Type) --> "Form"` Back to top --- # Row - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Row/#row) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Row.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Row.md "View source of this page") Row === A `Row` is a horizontal container that splits its contents into `Left` and `Right` sections, providing a clear visual distinction between primary and secondary elements. Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `SearchIndex` | `string?` | A string that determines what the user has to type in to show this row in their search query | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods | Method | Signature | Description | | --- | --- | --- | | `Left` | `() -> Row` | Returns a shallow clone of `Row` with the container set to the row's **left** container. | | `Right` | `() -> Row` | Returns a shallow clone of `Row` with the container set to the row's **right** container. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-1) type RowProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-2) SearchIndex: string?, [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-3) } [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-4)[](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-5) type Row = BaseComponent & Components & RowProperties & { [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-6) Left: (self: Row) -> Row, [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-7) Right: (self: Row) -> Row, [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-0-8) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-1-1) function(self, properties: RowProperties): Row` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-1) local row = section:Row({ [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-2) SearchIndex = "Cool Row" [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-3) }) [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-4)[](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-5) print(row:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-6) print(row.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/Row/#__codelineno-2-7) print(row.Type) --> "Row"` Back to top --- # Base Component - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/#base-component) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/index.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/index.md "View source of this page") Base Component ============== `BaseComponent` is the base class from which all Cascade components inherit. It provides core fields such as `Type`, `Theme`, and `Structures`. * * * Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Type` | `string` | **\[Read-only\]** Defines the Component's class. | | `Theme` | `string` | **\[Read-only\]** Inherited theme from the calling component. | | `Structures` | `{[string]: Instance?}` | **\[Read-only\]** Table of defined component structures. | Warning Note that to access a component's actual instance, you will need to index `__instance` on it, this will return the actual roblox object instead of a merged metatable with the custom object. * * * Types ----- `[](https://biggaboy212.github.io/Cascade/Components/#__codelineno-0-1) export type BaseComponent = { [](https://biggaboy212.github.io/Cascade/Components/#__codelineno-0-2) Type: string, [](https://biggaboy212.github.io/Cascade/Components/#__codelineno-0-3) Theme: Theme, [](https://biggaboy212.github.io/Cascade/Components/#__codelineno-0-4) Structures: { [string]: Instance | { any } }, [](https://biggaboy212.github.io/Cascade/Components/#__codelineno-0-5) }` Back to top --- # VStack - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/VStack/#vstack) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/VStack.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/VStack.md "View source of this page") VStack ====== A `VStack` is a frame that vertically sorts content. Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Padding` | `UDim?` | The padding between objects. | | `HorizontalAlignment` | `Enum.HorizontalAlignment?` | The content X axis alignment. | | `VerticalAlignment` | `Enum.VerticalAlignment?` | The content Y axis alignment. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-1) type StackProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-2) Padding: UDim?, [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-3) HorizontalAlignment: Enum.HorizontalAlignment?, [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-4) VerticalAlignment: Enum.VerticalAlignment?, [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-5) } [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-0-7) type Stack = BaseComponent & Components & StackProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-1-1) function(self, properties: StackProperties): Stack` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-2-1) local vStack = row:Right():VStack() [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-2-2)[](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-2-3) print(vStack:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-2-4) print(vStack.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/VStack/#__codelineno-2-5) print(vStack.Type) --> "VStack"` Back to top --- # HStack - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/HStack/#hstack) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/HStack.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/HStack.md "View source of this page") HStack ====== A `HStack` is a frame that horizontally sorts content. Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Padding` | `UDim?` | The padding between objects. | | `HorizontalAlignment` | `Enum.HorizontalAlignment?` | The content X axis alignment. | | `VerticalAlignment` | `Enum.VerticalAlignment?` | The content Y axis alignment. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-1) type StackProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-2) Padding: UDim?, [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-3) HorizontalAlignment: Enum.HorizontalAlignment?, [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-4) VerticalAlignment: Enum.VerticalAlignment?, [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-5) } [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-0-7) type Stack = BaseComponent & Components & StackProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-1-1) function(self, properties: StackProperties): Stack` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-2-1) local hStack = row:Right():HStack() [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-2-2)[](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-2-3) print(hStack:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-2-4) print(hStack.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/HStack/#__codelineno-2-5) print(hStack.Type) --> "HStack"` Back to top --- # PageSection - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/PageSection/#pagesection) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/PageSection.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/PageSection.md "View source of this page") PageSection =========== A `PageSection` separates content in a page into digestible sections via a Title stack. For example, a settings page might have: * Appearance * Input * Effects ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_sidebar.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Title` | `string?` | The section's title. | | `Subtitle` | `string?` | The section's sub-title. If left nil, the subtitle will be non-visible. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-0-1) type PageSectionProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-0-2) Title: string?, [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-0-3) Subtitle: string?, [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-0-4) } [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-0-5)[](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-0-6) type PageSection = BaseComponent & Components & PageSectionProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-1-1) function(self, properties: PageSectionProperties): PageSection` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-1) local pageSection = tab:PageSection({ [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-2) Title = "Effects", [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-3) Subtitle = "These effects may be resource intensive across different systems.", [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-4) }) [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-5)[](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-6) print(pageSection:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-7) print(pageSection.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/PageSection/#__codelineno-2-8) print(pageSection.Type) --> "PageSection"` Back to top --- # Label - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Label/#label) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Label.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Label.md "View source of this page") Label ===== A `Label` is a static piece of text that people can read, but not edit. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_label.png) Summary ------- ### Properties [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `TextLabel`](https://create.roblox.com/docs/reference/engine/classes/TextLabel#summary-properties) ### Methods [View all inherited from `TextLabel`](https://create.roblox.com/docs/reference/engine/classes/TextLabel#summary-methods) ### Events [View all inherited from `TextLabel`](https://create.roblox.com/docs/reference/engine/classes/TextLabel#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-0-1) type LabelProperties = TextLabel [](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-0-2)[](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-0-3) type Label = BaseComponent & Components & FormProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-1-1) function(self, properties: LabelProperties): Label` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-1) local label = row:Right():Label({ [](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-2) Text = "Label" [](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-3) }) [](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-4)[](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-5) print(label:IsA("TextLabel")) --> true [](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-6) print(label.ClassName) --> "TextLabel" [](https://biggaboy212.github.io/Cascade/Components/Label/#__codelineno-2-7) print(label.Type) --> "Label"` Back to top --- # TitleStack - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/TitleStack/#titlestack) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/TitleStack.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/TitleStack.md "View source of this page") TitleStack ========== A `TitleStack` is a vertical stack with title and subtitle label's that people can read, but not edit. Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Title` | `string?` | The text content of the title label | | `Subtitle` | `string?` | The text content of the subtitle label. Subtitle becomes non visible if left nil. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-0-1) type TitleStackProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-0-2) Title: string?, [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-0-3) Subtitle: string?, [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-0-4) } [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-0-5)[](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-0-6) type TitleStack = BaseComponent & Components & TitleStackProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-1-1) function(self, properties: TitleStackProperties): TitleStack` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-1) local titleStack = row:Left():TitleStack({ [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-2) Title = "Toggle (Off)", [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-3) Subtitle = "Lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.", [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-4) }) [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-5)[](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-6) print(titleStack:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-7) print(titleStack.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/TitleStack/#__codelineno-2-8) print(titleStack.Type) --> "TitleStack"` Back to top --- # Button - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Button/#button) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Button.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Button.md "View source of this page") Button ====== A `Button` initiates an instantaneous action. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_button.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `State` | `("Primary" \| "Secondary" \| "Destructive")?` | Determines the weight of the button. Suggests to the user it's impact to the content around it | | `Label` | `string?` | The text content of the button. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `TextButton`](https://create.roblox.com/docs/reference/engine/classes/TextButton#summary-properties) ### Methods [View all inherited from `TextButton`](https://create.roblox.com/docs/reference/engine/classes/TextButton#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `Pushed` | `((self: Button) -> unknown)?` | A callback function that is triggered when the button has been fully clicked or tapped. | [View all inherited from `TextButton`](https://create.roblox.com/docs/reference/engine/classes/TextButton#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-1) type ButtonProperties = TextButton & { [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-2) State: ("Primary" | "Secondary" | "Destructive")?, [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-3) Label: string?, [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-4) Pushed: ((self: Button) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-5) } [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-0-7) type Button = BaseComponent & Components & ButtonProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-1-1) function(self, properties: ButtonProperties): Button` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-1) local button = row:Right():Button({ [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-2) Label = "Button", [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-3) State = "Primary", [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-4) Pushed = function(self) [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-5) print("Pushed") [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-6) end, [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-7) }) [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-8)[](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-9) print(button:IsA("TextButton")) --> true [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-10) print(button.ClassName) --> "TextButton" [](https://biggaboy212.github.io/Cascade/Components/Button/#__codelineno-2-11) print(button.Type) --> "Button"` Back to top --- # Symbol - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Symbol/#symbol) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Symbol.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Symbol.md "View source of this page") Symbol ====== A `Symbol` is a static image component mainly used to add visual context and branding to an interface. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_symbol.png) Summary ------- ### Properties [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-properties) ### Methods [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-methods) ### Events [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-0-1) type SymbolProperties = ImageLabel & { [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-0-2) Style: ("Primary" | "Secondary")?, [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-0-3) } [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-0-4)[](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-0-5) type Symbol = BaseComponent & Components & SymbolProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-1-1) function(self, properties: SymbolProperties): Symbol` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-1) local symbol = row:Right():Symbol({ [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-2) Image = cascade.Symbols.sunMin, [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-3) }) [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-4)[](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-5) print(symbol:IsA("ImageLabel")) --> true [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-6) print(symbol.ClassName) --> "ImageLabel" [](https://biggaboy212.github.io/Cascade/Components/Symbol/#__codelineno-2-7) print(symbol.Type) --> "Symbol"` Back to top --- # Toggle - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Toggle/#toggle) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Toggle.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Toggle.md "View source of this page") Toggle ====== A `Toggle` lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_toggle.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Value` | `boolean?` | The toggle's state. `false` for off, `true` for on | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `CanvasGroup`](https://create.roblox.com/docs/reference/engine/classes/CanvasGroup#summary-properties) ### Methods [View all inherited from `CanvasGroup`](https://create.roblox.com/docs/reference/engine/classes/CanvasGroup#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `ValueChanged` | `((self: Toggle, value: boolean) -> unknown)?` | A callback function that is triggered when the `Value` property has been modified. | [View all inherited from `CanvasGroup`](https://create.roblox.com/docs/reference/engine/classes/CanvasGroup#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-0-1) type ToggleProperties = CanvasGroup & { [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-0-2) Value: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-0-3) ValueChanged: ((self: Toggle, value: boolean) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-0-4) } [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-0-5)[](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-0-6) type Toggle = BaseComponent & Components & ToggleProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-1-1) function(self, properties: ToggleProperties): Toggle` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-1) local toggle = row:Right():Toggle({ [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-2) Value = true, [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-3) ValueChanged = function(self, value: boolean) [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-4) print("Value changed:", value) [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-5) end, [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-6) }) [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-7)[](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-8) print(toggle:IsA("CanvasGroup")) --> true [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-9) print(toggle.ClassName) --> "CanvasGroup" [](https://biggaboy212.github.io/Cascade/Components/Toggle/#__codelineno-2-10) print(toggle.Type) --> "Toggle"` Back to top --- # Slider - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Slider/#slider) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Slider.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Slider.md "View source of this page") Slider ====== A `Slider` is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_slider.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Minimum` | `number?` | The minimum value the slider can go. | | `Maximum` | `number?` | The maximum value the slider can reach. | | `Value` | `number?` | The slider's current value. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-properties) ### Methods [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `ValueChanged` | `((self: Slider, value: number) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-1) type SliderProperties = ImageLabel & { [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-2) Minimum: number?, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-3) Maximum: number?, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-4) Value: number?, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-5) ValueChanged: ((self: Slider, value: number) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-6) } [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-7)[](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-0-8) type Slider = BaseComponent & Components & SliderProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-1-1) function(self, properties: SliderProperties): Slider` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-1) local slider = row:Right():Slider({ [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-2) Minimum = 0, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-3) Maximum = 10 [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-4) Value = 5, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-5) ValueChanged = function(self, value: number) [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-6) print("Value changed:", value) [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-7) end, [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-8) }) [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-9)[](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-10) print(slider:IsA("ImageLabel")) --> true [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-11) print(slider.ClassName) --> "ImageLabel" [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-12) print(slider.Type) --> "Slider" [](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-13)[](https://biggaboy212.github.io/Cascade/Components/Slider/#__codelineno-2-14) slider.Value += 1 --> Value changed: 6` Back to top --- # TextField - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/TextField/#textfield) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/TextField.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/TextField.md "View source of this page") TextField ========= A `TextField` is a rectangular area in which people enter or edit small, specific pieces of text. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_field.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Placeholder` | `string?` | The text placeholder to instruct users on how to interact with the component. | | `Value` | `Enum.Keycode?` | The text in the field. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `TextChanged` | `((self: TextField, text: string) -> unknown)?` | A Callback function that is triggered when the text field's text has been modified. | | `ValueChanged` | `((self: TextField, value: string) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-1) type TextFieldProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-2) Placeholder: string?, [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-3) Value: string?, [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-4) TextChanged: ((self: TextField, text: string) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-5) ValueChanged: ((self: TextField, value: string) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-6) } [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-7)[](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-0-8) type TextField = BaseComponent & Components & TextFieldProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-1-1) function(self, properties: TextFieldProperties): TextField` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-1) local textField = row:Right():TextField({ [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-2) Value = "Label", [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-3) ValueChanged = function(self, value: string) [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-4) print("Value changed:", value) [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-5) end, [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-6) TextChanged = function(self, value: string) [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-7) print("Text changed:", value) [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-8) end, [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-9) }) [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-10)[](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-11) print(textField:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-12) print(textField.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-13) print(textField.Type) --> "TextField" [](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-14)[](https://biggaboy212.github.io/Cascade/Components/TextField/#__codelineno-2-15) textField.Value = "Hi" --> Value changed: "Hi"` Back to top --- # Stepper - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Stepper/#stepper) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Stepper.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Stepper.md "View source of this page") Stepper ======= A `Stepper` is a two-segment control that people use to increase or decrease an incremental value. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_stepper.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Minimum` | `number?` | The minimum value the stepper can drop. | | `Maximum` | `number?` | The maximum value the stepper can reach. | | `Step` | `number?` | The increment to increase by on increase/decrease. | | `Fielded` | `boolean?` | Whether the stepper should be attached to a editable field. Defaults to false. | | `Value` | `number?` | The stepper's current value. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-properties) ### Methods | Method | Signature | Description | | --- | --- | --- | | `Increment` | `() -> nil` | This increments the `Value` of the stepper by the given step number. | | `Decrement` | `() -> nil` | This decrements the `Value` of the stepper by the given step number. | [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `ValueChanged` | `((self: Stepper, value: number) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `ImageLabel`](https://create.roblox.com/docs/reference/engine/classes/ImageLabel#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-1) type StepperProperties = ImageLabel & { [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-2) Minimum: number?, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-3) Maximum: number?, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-4) Step: number?, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-5) Fielded: boolean?, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-6) Value: number?, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-7) ValueChanged: ((self: Stepper, value: number) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-8) } [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-9)[](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-10) type Stepper = BaseComponent & Components & StepperProperties & { [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-11) Increment: () -> nil, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-12) Decrement: () -> nil, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-0-13) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-1-1) function(self, properties: StepperProperties): Stepper` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-1) local stepper = row:Right():Stepper({ [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-2) Minimum = 0, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-3) Maximum = 5, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-4) Step = 0.1, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-5) Fielded = true, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-6) Value = 3, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-7) ValueChanged = function(self, value: number) [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-8) print("Value changed:", value) [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-9) end, [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-10) }) [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-11)[](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-12) print(stepper:IsA("ImageLabel")) --> true [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-13) print(stepper.ClassName) --> "ImageLabel" [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-14) print(stepper.Type) --> "Stepper" [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-15)[](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-16) stepper:Increment() --> Value changed: 3.01 [](https://biggaboy212.github.io/Cascade/Components/Stepper/#__codelineno-2-17) stepper.Value += 1 --> Value changed: 4.01` Back to top --- # KeybindField - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/KeybindField/#keybindfield) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/KeybindField.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/KeybindField.md "View source of this page") KeybindField ============ A `KeybindField` is a rectangular area in which people can enter and store `Enum.KeyCode` `InputObject`'s, then trigger a callback after pressing the stored KeyCode ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_field.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Placeholder` | `string?` | The text placeholder to instruct users on how to interact with the component. | | `Value` | `Enum.Keycode?` | The default shortcut the `KeybindField` is bound to. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `BindPressed` | `((self: KeybindField, value: Enum.KeyCode, inputComplete: boolean, gameProcessedEvent: boolean) -> unknown)?` | A Callback function that is triggered when the `Value` KeyCode has been pressed. | | `ValueChanged` | `((self: KeybindField, value: Enum.KeyCode) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-1) type KeybindFieldProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-2) Placeholder: string?, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-3) Value: Enum.KeyCode?, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-4) BindPressed: (( [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-5) self: KeybindField, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-6) value: Enum.KeyCode, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-7) inputComplete: boolean, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-8) gameProcessedEvent: boolean [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-9) ) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-10) ValueChanged: ((self: KeybindField, value: Enum.KeyCode) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-11) } [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-12)[](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-0-13) type KeybindField = BaseComponent & Components & KeybindFieldProperties` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-1-1) function(self, properties: KeybindFieldProperties): KeybindField` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-1) local keybindField = row:Right():KeybindField({ [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-2) ValueChanged = function(self, value: Enum.KeyCode) [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-3) print("Value changed:", value) [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-4) end, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-5) BindPressed = function( [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-6) self, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-7) value: Enum.KeyCode, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-8) inputComplete: boolean, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-9) gameProcessedEvent: boolean [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-10) ) [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-11) if not inputComplete or gameProcessedEvent then [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-12) return [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-13) end [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-14) [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-15) print("Pressed bind:", value) [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-16) end, [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-17) }) [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-18)[](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-19) print(keybindField:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-20) print(keybindField.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-21) print(keybindField.Type) --> "KeybindField" [](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-22)[](https://biggaboy212.github.io/Cascade/Components/KeybindField/#__codelineno-2-23) keybindField.Value = Enum.KeyCode.Z --> Value changed: Enum.KeyCode.Z` Back to top --- # RadioButtonGroup - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#radiobuttongroup) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/RadioButtonGroup.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/RadioButtonGroup.md "View source of this page") RadioButtonGroup ================ A `RadioButtonGroup` lets people choose an option from a set of mutually exclusive choices, using a circular indicator to show the selected option. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_radioButtonGroup.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Options` | `{[number]: string}?` | You can use this table to pre-define options. Note that doing it this way will not give you access to the option instances themselves. | | `Value` | `number?` | The numeric index of the option to be selected. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods | Method | Signature | Description | | --- | --- | --- | | `Option` | `(Name: string?) -> Frame` | Can be used to seperately create options, use this if you want to access the option instances themselves. An example of use would be a dynamically updating playerlist. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `ValueChanged` | `((self: RadioButtonGroup, value: string) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-1) type RadioButtonGroupProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-2) Options: {[number]: string}?, [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-3) Value: number?, [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-4) ValueChanged: ((self: RadioButtonGroup, value: number) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-5) } [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-6)[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-7) type RadioButtonGroup = BaseComponent & Components & RadioButtonGroupProperties & { [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-8) Option: (Name: string?) -> Frame, [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-0-9) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-1-1) function(self, properties: RadioButtonGroupProperties): RadioButtonGroup` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-1) local radioButtonGroup = row:Right():RadioButtonGroup({ [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-2) Options = { [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-3) "Option 1", [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-4) "Option 2", [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-5) }, [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-6) ValueChanged = function(self, value: number) [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-7) print("Value changed:", self.Options[value]) [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-8) end, [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-9) }) [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-10)[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-11) print(radioButtonGroup:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-12) print(radioButtonGroup.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-13) print(radioButtonGroup.Type) --> "RadioButtonGroup" [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-14)[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-15) radioButtonGroup.Value = 2 --> Value changed: "Option 2" [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-16)[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-17) local option3 = radioButtonGroup:Option("Option 3") [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-18)[](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-19) print(option3.ClassName) --> Frame [](https://biggaboy212.github.io/Cascade/Components/RadioButtonGroup/#__codelineno-2-20) radioButtonGroup.Value = 3 --> Value changed: "Option 3"` Back to top --- # Notification - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/Notification/#notification) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/Notification.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/Notification.md "View source of this page") Notification ============ A `Notification` is a non-disruptive, transient message that appears on screen to alert the user of important information, events, or state changes within an application. Summary ------- ### Properties [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) | Name | Type | Description | | --- | --- | --- | | `Title` | `string` | The primary headline of the notification. | | `Subtitle` | `string` | The secondary text providing more context. | | `App` | `string?` | Optional text to display what feature or app triggered the notification. | | `AppIcon` | `string?` | Optional image asset ID to show an icon in the top left. | | `Icon` | `string?` | Optional image asset ID to show an icon in the top left, next to the title. | | `Duration` | `number?` | How long (in seconds) the notification remains before auto-closing. Defaults to `6`. Use `0` for manual close only. | ### Methods [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) | Name | Returns | Description | | --- | --- | --- | | `Close()` | `nil` | Manually dismisses the notification. | ### Events [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) | Name | Parameters | Description | | --- | --- | --- | | `Closed` | `(self: Notification, fromUser: boolean)` | Fired when the notification is closed either via timeout or by the user. | Types ----- `[](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-1) type NotificationProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-2) Title: string, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-3) Subtitle: string, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-4) App: string?, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-5) Icon: string?, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-6) AppIcon: string?, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-7) Duration: number?, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-8) Closed: ((self: Notification, fromUser: boolean) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-9) } [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-10)[](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-11) type Notification = BaseComponent & Components & NotificationProperties & { [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-12) Close: (self: Notification) -> nil, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-0-13) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-1-1) function(self, properties: NotificationProperties): Notification` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-1) local notification = app:Notification({ [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-2) Title = "New Message", [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-3) Subtitle = "You received a new message from a friend.", [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-4) App = "CHAT", [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-5) Icon = cascade.Symbols.bell, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-6) AppIcon = "rbxassetid://132228700346004", [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-7) Duration = 5, [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-8) Closed = function(self, fromUser) [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-9) print("Notification was dismissed! (from user: " .. tostring(fromUser) .. ")") [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-10) end [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-11) }) [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-12)[](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-13) -- Sometime later, if you need to manually close it: [](https://biggaboy212.github.io/Cascade/Components/Notification/#__codelineno-2-14) -- notification:Close()` Back to top --- # PopUpButton - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#popupbutton) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/PopUpButton.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/PopUpButton.md "View source of this page") PopUpButton =========== A `PopUpbutton` displays a menu of mutually exclusive options. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_popUpButton.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Options` | `{[number]: string}?` | You can use this table to pre-define options. Note that doing it this way will not give you access to the option instances themselves. | | `Maximum` | `number?` | Maximum number of selectable options. Defaults to `1` (single-select). | | `Value` | `number? or {number}?` | The selected index (single) or a table of selected indices when `Maximum > 1`. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods | Method | Signature | Description | | --- | --- | --- | | `Option` | `(Name: string?) -> Frame` | Can be used to seperately create options, use this if you want to access the option instances themselves. An example of use would be a dynamically updating playerlist. | | `Remove` | `(Index: number?) -> nil,` | Can be used to remove options from the pop-up menu, this automatically removes it from the options list as well. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `ValueChanged` | `((self: PopUpButton, value: number or {number}) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-1) type PopUpButtonProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-2) Options: { [number]: string }?, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-3) Expanded: boolean?, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-4) Maximum: number?, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-5) Value: (number | {number})?, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-6) ValueChanged: ((self: PopUpButton, value: number | {number}) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-7) } [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-8)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-9) type PopUpButton = BaseComponent & Components & PopUpButtonProperties & { [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-10) Option: (Name: string?) -> Frame, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-11) Remove: (Index: number?) -> nil, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-0-12) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-1-1) function(self, properties: PopUpButtonProperties): PopUpButton` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-1) local popUpButton = row:Right():PopUpButton({ [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-2) Options = { [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-3) "Item One", [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-4) "Item Two", [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-5) }, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-6) ValueChanged = function(self, value: number) [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-7) print("Value changed:", self.Options[value]) [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-8) end, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-9) }) [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-10)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-11) print(popUpButton:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-12) print(popUpButton.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-13) print(popUpButton.Type) --> "PopUpButton" [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-14)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-15) popUpButton.Value = 3 --> Value changed: "Item Three" [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-16)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-17) local itemThree = popUpButton:Option("Item Three") [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-18)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-19) print(itemThree.ClassName) --> Frame [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-2-20) popUpButton:Remove(13)` Multi-select Example -------------------- ``[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-1) local multi = row:Right():PopUpButton({ [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-2) Options = {"One","Two","Three","Four"}, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-3) Maximum = 3, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-4) ValueChanged = function(self, value) [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-5) -- `value` is ALWAYS a table of indices when `Maximum > 1` even if only 1 value is selected. [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-6) print("Selections:") [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-7) for _, idx in ipairs(value or {}) do [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-8) print(self.Options[idx]) [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-9) end [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-10) end, [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-11) }) [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-12)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-13) local five = multi:Option("Five") [](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-14)[](https://biggaboy212.github.io/Cascade/Components/PopUpButton/#__codelineno-3-15) multi.Value = {1, 3}`` Back to top --- # PullDownButton - Cascade Developer Documentation [Skip to content](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#pulldownbutton) [](https://github.com/biggaboy212/Cascade/edit/main/docs/Components/PullDownButton.md "Edit this page") [](https://github.com/biggaboy212/Cascade/raw/main/docs/Components/PullDownButton.md "View source of this page") PullDownButton ============== A `PullDownButton` displays a menu of mutually exclusive options. ![Component preview](https://biggaboy212.github.io/Cascade/assets/component_pullDownButton.png) Summary ------- ### Properties | Property | Type | Description | | --- | --- | --- | | `Options` | `{[number]: string}?` | You can use this table to pre-define options. Note that doing it this way will not give you access to the option instances themselves. | | `Value` | `number?` | The numeric index of the option to be selected. | [View all inherited from `BaseComponent`](https://biggaboy212.github.io/Cascade/Components/#properties) [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-properties) ### Methods | Method | Signature | Description | | --- | --- | --- | | `Option` | `(Name: string?) -> Frame` | Can be used to seperately create options, use this if you want to access the option instances themselves. | | `Remove` | `(Index: number?) -> nil,` | Can be used to remove options from the pull-down menu, this automatically removes it from the options list as well. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-methods) ### Events | Event | Signature | Description | | --- | --- | --- | | `ValueChanged` | `((self: PullDownButton, value: string) -> unknown)?` | A Callback function that is triggered when the `Value` property has been modified. | [View all inherited from `Frame`](https://create.roblox.com/docs/reference/engine/classes/Frame#summary-events) Types ----- `[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-1) type PullDownButtonProperties = Frame & { [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-2) Options: { [number]: string }?, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-3) Expanded: boolean?, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-4) Label: string?, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-5) Value: number?, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-6) ValueChanged: ((self: PullDownButton, value: number) -> unknown)?, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-7) } [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-8)[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-9) type PullDownButton = BaseComponent & Components & PullDownButtonProperties & { [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-10) Option: (Name: string?) -> Frame, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-11) Remove: (Index: number?) -> nil, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-0-12) }` ### Function Signature `[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-1-1) function(self, properties: PullDownButtonProperties): PullDownButton` Example ------- `[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-1) local pullDownButton = row:Right():PullDownButton({ [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-2) Options = { [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-3) "Action One", [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-4) "Action Two", [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-5) }, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-6) ValueChanged = function(self, value: number) [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-7) print("Action selected:", self.Options[value]) [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-8) end, [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-9) }) [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-10)[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-11) print(pullDownButton:IsA("Frame")) --> true [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-12) print(pullDownButton.ClassName) --> "Frame" [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-13) print(pullDownButton.Type) --> "PullDownButton" [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-14)[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-15) pullDownButton.Value = 3 --> Value changed: "Item Three" [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-16)[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-17) local itemThree = pullDownButton:Option("Item Three") [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-18)[](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-19) print(itemThree.ClassName) --> Frame [](https://biggaboy212.github.io/Cascade/Components/PullDownButton/#__codelineno-2-20) pullDownButton:Remove(13)` Back to top ---