Skip to main content

​
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.