Updated on 2025-03-24 GMT+08:00

Button

The button widget is usually used together with other widgets to display linked pages or prompt messages.

On the large screen design page, choose All > Others and drag the button widget to the blank area of the canvas, as shown in Figure 1.

Figure 1 Button widget

Configuration

You can set the button shortcut style and basic style.

Figure 2 Button configuration
  • Shortcut style setting: Set the button style (e.g., common, emphasis, or text).
  • Basic style settings
    • Button: Button status, which can be enabled or disabled.
    • Content: Text displayed on the button, e.g., "Save".
    • Default text: Font, width, size, and color of the text displayed on the button.
    • Default background color: Background color of the button in the default status.
    • Hover text color: Color of the button text when the pointer hovers over it.
    • Hover background color: Background color of a button when the pointer hovers over it.
    • Selected text color: Color of the text displayed when the button is selected.
    • Selected background color: Background color of the button when it is selected.
    • Round corner: rounded corner of the button border. The radian of the four corners ranges from 0 to 500, in pixels.
    • Inner margin: Space between the chart and the widget border, in pixels.

Interaction

In the interaction settings, you can configure interactions between the button widget and other widgets or pages. For details, see Interaction Configuration.