Toggles
Adding and styling toggles.
Last updated
Was this helpful?
Adding and styling toggles.
Last updated
Was this helpful?
A toggle is a switch button. They are interactive UI elements that allow users to switch between two states, such as "on" and "off," "enabled" and "disabled," or "active" and "inactive." They provide a visual representation of the current state and can be used to control settings, options, or features.
Location in the Parts Library: Base Parts > Data Input > Toggle
Choose the toggle most closely aligned with what you need from the Parts Library.
Select the part where you’d like to add your toggle and click ‘+ add to page’.
Your toggle will need to be given an ID, which is an identifier for the toggle. For example, if the Toggle is for activating dark or light mode, then you might give it an identifier such as ColorMode, or something that indicates to you what the toggle is about. When you give your toggle an ID, that ID automatically gives the toggle a State. You can see this when you click on the State Model property in the right property panel.
Each toggle needs its own unique ID.
Toggles come with preset sizes, as well as the ability to set the exact size. The preset sizes can be made responsive.
For example, you may want the toggle to be small or extra small on mobile, and larger on a laptop.
More information on toggles is coming soon.
Like many other parts, , , , and can be applied using the property editor on the right, once the toggle has been selected.
Any next to the toggle can be changed using the Text Editor and styled using the Font Editor. You can change the font family, size, weight, line height, and style.
Text
Customizing and formatting
