Container
Text
Image
Icon
Button
Local State
Text Input
Date Picker
Conditional Logic
Conditional Switch Logic
Sheet
Tabbed Pager
Data Loader
Repeating Item
Countdown Timer
Data Transformer
Date Elements
Paging Data Loader
Rich Text
The Button Componentis one of the fundamental interactive elements. It allows users to trigger specific actions when clicked, such as navigating to another page, submitting forms or executing custom events. Buttons are highly customisable and can be tailored to suit the design and functionality of your app.
Add an Icon or Text to Your Button
Style Options
Set On Click Actions
1. Content
Click the field to select between an Icon or Text Component, to provide users with a visual indication of the button's function.
2. Type
Click the field to choose from the available button types. Options include:
Default: A fully styled rectangular button without transparency.
Ghost Icon: A circular button surrounding an Icon, which is initially transparent, becoming more prominent when hovered over.
Ghost Text: A rectangular button surround Text, which is initially transparent, becoming more prominent when hovered over.
3. Width
This allows you to set the horizontal size of your button. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your button is relative to the size of its container.
4. Height
This allows you to set the vertical size of your button. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your button is relative to the size of its container.
5. Color
Click the field to select from the available color options for your button. These are pre-set in Colorsand can be edited in this section to match your app's theme.
6. Thickness
Enter a value to specify the width of the button's edge. The measurement is in exact pixels.
7. Color
Click the field to select from the available color options for your button's border. These are pre-set in Colorsand can be edited in this section to match your app's theme.
8. Radius
This section lets you adjust the curvature of the button's corners. Keep the link enabled to modify all four corners simultaneously, or disconnect it to adjust each corner individually. The measurement is in exact pixels.
9. Action Creator
This field allows you to define the specific action that will occur when the button is clicked. To set up the action, click on the field to display the action options and select the desired action from the list. Click hereto learn more about Actions.
Clear Labelling: Always use clear, action-oriented labels for buttons. This helps guide users on what action will be taken. Avoid using generic terms like "Click Here". Instead, use terms like "Submit Form" or "Go to Dashboard".
Accessibility: Ensure that buttons are large enough to be easily tapped on mobile devices and that there is sufficient contrast between the button's text and background for readability and accessibility.
Conditional Disabling: Use the disabled state conditionally, such as when form validation hasn't been met or when certain app states prevent the action from being executed. This enhances user guidance and prevents errors.