Button

The "Button" component is designed to trigger an action when clicked or tapped by the user. Buttons can be customized with different colors, shapes, and sizes to match the overall theme of the app. They are essential to creating interactive mobile apps, allowing users to navigate the app and perform various tasks.

Properties settings

Title & Icon

Name the button and assign an icon to it. Choose a descriptive and concise title that accurately reflects the button's purpose.

Style

Choose the style of the button. The style you choose will depend on your mobile application's specific needs and your users' preferences.

There are currently 4 button styles: Filled, Tinted, Plained, and Outlined.

Role

Specify the type of action associated with tapping the button.

You have two choices: Default or Destructive. The Default type indicates a standard action, while the Destructive type signifies a potentially irreversible or critical action. Choose the role that best aligns with the intended function of your button.

Size

Determine the size of your button based on your design requirements. You can select either Fit or Fill. The Fit size adapts the button's dimensions to its content, while the Fill size expands the button to occupy available space.

Hidden

Activate this checkbox to hide the button from the user interface. This can be useful when you want to control the visibility of the component based on specific conditions, occasions or user interactions.

Disabled

Enable this checkbox to disable the interaction with the button component, making it unresponsive to user interactions. This setting can be beneficial when restricting user input based on certain conditions or permissions.

Tag

Name the component for use with the Typescript.

currentPage.components.componentTag

Interaction settings

This tab is where you design the system's interaction when your users tap on a button. Starion offers a wide range of supported actions such as updating your table or sending a notification on the interaction.

Explore all the available types of actions and find detailed instructions on their configuration here

Last updated