> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

> Interactive or static button component for navigation or actions in UI Studio applications

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.

<Frame caption="Basic Button component">
  <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/ui-studio-button.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=b95f0480436037435f181f4f58232350" alt="Basic Button component" width="360" height="132" data-path="assets/images/lw-platform/ui-studio/ui-studio-button.png" />
</Frame>

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

<ParamField path="Label" type="string" required>
  Text displayed on the button. Keep this concise and action-oriented.
</ParamField>

<ParamField path="Action" type="dropdown" required>
  The action performed when the user clicks the button.

  <Expandable title="Action">
    <ParamField path="Link" type="option">
      Navigation button with URL. The `Page Path` field contains the target URL.
    </ParamField>

    <ParamField path="Export" type="option">
      Action button for CSV downloads.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="Page Path" type="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}`
</ParamField>

<ParamField path="Open in New Tab" type="boolean" default="false">
  When enabled, the link specified in the `Page Path` field opens in a new browser tab.
</ParamField>

<ParamField path="Tokens" type="group">
  Token settings for button navigation.

  <Expandable title="Tokens">
    <ParamField path="Token Name" type="string">
      Unique name for the navigation token.
    </ParamField>

    <ParamField path="Field Name" type="string">
      The field that contains the token used when the user clicks the button.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="Font" type="group">
  Typography settings for the text.

  <Expandable title="Properties">
    <ParamField path="Family" type="dropdown" default="Public Sans">
      Font typeface for the text.
    </ParamField>

    <ParamField path="Weight" type="dropdown" default="Regular">
      Font weight for the text. Options are Regular, Light, Bold, and Extra Bold.
    </ParamField>

    <ParamField path="Size" type="number" default="14">
      Font size in pixels.

      Recommended ranges:

      * Body text: 14-16px.
      * Headings: 18-32px.
      * Small text: 12-13px.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="Colors" type="group">
  Color scheme for the button.

  <Expandable title="Properties">
    <ParamField path="Background" type="color" default="#ffffff">
      Background color of the button.

      <Color variant="compact">
        <Color.Item name="default" value="#ffffff" />
      </Color>
    </ParamField>

    <ParamField path="Text" type="color" default="#2C3136">
      Text color for the button label. Ensure sufficient contrast with background color.

      <Color variant="compact">
        <Color.Item name="default" value="#2C3136" />
      </Color>
    </ParamField>

    <ParamField path="Border" type="color" default="#D7DBDF">
      Outline color of the button.

      <Color variant="compact">
        <Color.Item name="default" value="#D7DBDF" />
      </Color>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="Border Radius" type="number" default="0">
  Border radius in pixels. Controls corner roundness.

  * `0` = Square corners
  * `4-8` = Subtle rounding
  * `20+` = Pill-shaped button
</ParamField>