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.
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 Text displayed on the button. Keep this concise and action-oriented.
The action performed when the user clicks the button. Navigation button with URL. The Page Path field contains the target URL.
Action button for CSV downloads.
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} When enabled, the link specified in the Page Path field opens in a new browser tab.
Token settings for button navigation. Unique name for the navigation token.
The field that contains the token used when the user clicks the button.
Typography settings for the text. Family
dropdown
default: "Public Sans"
Font typeface for the text.
Weight
dropdown
default: "Regular"
Font weight for the text. Options are Regular, Light, Bold, and Extra Bold.
Font size in pixels. Recommended ranges:
Body text: 14-16px.
Headings: 18-32px.
Small text: 12-13px.
Color scheme for the button. Background color of the button. Text color for the button label. Ensure sufficient contrast with background color. Outline color of the button. Border radius in pixels. Controls corner roundness.
0 = Square corners4-8 = Subtle rounding20+ = Pill-shaped button 
