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

# Button

> Add button widgets to dashboards to trigger open-link, page navigation, or automation actions — with customizable styles and icons for task-driven, one-click workflows.

## Overview

The button component **triggers specific actions or flows** on a dashboard. Configure one or more buttons to fire predefined data operations, page navigation, or system commands — task-driven and fast.

**Common use cases**:

* **Trigger data operations**: configure buttons like "Update record" or "Delete record" — one click runs the action on data or the workflow.
* **Page navigation and drill-down**: set up "Back to home", "View details", "Product analysis" buttons to switch pages and drill into data.
* **External links**: "Documentation", "Help center" buttons jump straight to external sites or systems — extend your app's reach seamlessly.

## Workflow

### **Add a button component**

1. Open the AI Table app module.
2. From the left nav, pick the page where you want to add the component.
3. Click **+ Add component** at the bottom-left of the page, then **Button**.

### **Basic config**

After adding, use the **Basic config** in the right panel to set:

* **Preset styles**
  * 9 built-in style templates (color, border, icon combos) — pick one to skin the button instantly.
* **Content**
  * **Title**: the main label on the button. Default is "Button" — change to "View details", "Product breakdown", etc.
  * **Button icon**: pick an icon from the library to visually reinforce the button's purpose.
* **Action (on click)**

  Define what happens when the user clicks. This is the core config:

  * **Open link**: jump to an external URL or internal resource. Enter a valid URL (e.g., `https://example.com`).

  * **Open page**: jump to another page in the current app. Pick from the dropdown.

  * **Run automation**: trigger a configured automation (e.g., send message, update record). After picking, you're taken to automation config to build the flow.

### **Custom config**

In the **Custom config** section of the right panel, fine-tune the visual style.

* **Basic style**
  * **Button size**: **Default** or **Large**.
* **Colors**
  * **Button color**: background color from the swatch.
  * **Icon color**: icon fill.
  * **Icon background**: **None**, **Light**, or **Inverted** background to emphasize the icon.
* **Border**
  * **Border color**: pick from swatch.
  * **Border thickness**: `1px`, `2px`, etc. from dropdown.
* **Text style**
  * Tune **font**, **size**, **weight (bold)**, **color**, **letter-spacing**, **italic / underline**.

### **Component management**

* **Action menu**

  Click the icon at the top-right of the selected component:

  * **Configure**: open the config panel.
  * **Duplicate**: copy on the same page.
  * **Copy to**: copy to another page in this app.
  * **Delete**: remove from this page.
* **Resize and move**

  * **Resize**: hover the bottom-right corner and drag the handle.
  * **Move**: hover the component, hold the mouse, drag to reposition.