Skip to main content
The Button component provides buttons that users can click or view for UI Studio applications. Use buttons to enable navigation to other pages or trigger actions like CSV data exports. You can style buttons with custom text and colors.

​
Basic usage

Add a button to your UI Studio page to create an interactive element for users.
Basic Button component

Basic Button component

Enter descriptive label text for the button and apply formatting in the Button component Customize section.

​
Best practices

Use descriptive labels that clearly indicate the action. For example, View details or Submit form. Avoid vague labels such as Click here.

​
Configuration properties

​
string
required
Text displayed on the button. Keep this concise and action-oriented.
​
dropdown
required
The action performed when the user clicks the button.
​
string
URL path for navigation. Supports token syntax: ${TOKEN_NAME} that is specified in the Token Name and Field Name fields.Examples:
  • /home
  • /users/${userId}
  • /products/${productId}/details?tab=${activeTab}
​
boolean
default:"false"
When enabled, the link specified in the Page Path field opens in a new browser tab.
​
group
Token settings for button navigation.
​
group
Typography settings for the text.
​
group
Color scheme for the button.
​
number
default:"0"
Border radius in pixels. Controls corner roundness.
  • 0 = Square corners
  • 4-8 = Subtle rounding
  • 20+ = Pill-shaped button