ILLA home page
  1. Button

​

The Button component allows users to trigger an action or perform a function by clicking on the button.

​
Properties

PropertiesDescription
TextThe text displayed for the button
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
VariantAllow users to choose between two different styles for the button: fill or outline.
Theme ColorAllows users to specify the button’s background color and opacity

​
Event handler

EventDescription
ClickWhen a user click this button, perform specific action customized by users.

​
Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
hiddena Boolean value indicate the hidden status of button
hiddenDynamica Boolean value indicate the hidden dynamic status of button
loadingloading value
texttext value displayed on the button
tooltipTextvalue of tooltip text
variantvariant style of the button (fill or outlined)

​
Use case

Next, we will demonstrate how to use button to control the form component dynamically.

​
Step 1 Add an action

We have created a table named countries, including 5 columns:  num_code,  alpha_2_code, alpha_3_code, en_short_name, nationality. The countries’ names are what we want to use as options value, which are stored the en_short_name column.

Then we can create a new action for Supabase from the action list, listing all data in countries and named supabasedb1 

select distinct en_short_name as value from "Countries" order by value;

This is what we have as output:

Click Save and Run to activate this action.

​
Step 2 Add a Component

First we add the Form component and label it as ‘Survey’. Then we drag a Input component, a select component and a number input component into the form, labeling them as Name, Nationality, and Age.

We then map the countries values to select component by

  1. in mapped mode, set data sources to be {{supabasedb1.data}}
  2. in mapped option, set value to be {{item.value}}

Then we can configure the Submit button to control the Send method of Form component.

  1. In the Edit event handler, select Control component in action, select the form component that you want to update as the target of the event.
  2. Choose the Submit action.