Skip to main content

Inline Buttons (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Inline Buttons widget shows a group of buttons in one row. Each button runs its own action. Use it for form footers and action bars, for example Cancel and Save Changes. You can also show the buttons as a tab strip.

Widget type: WDS_INLINE_BUTTONS_WIDGET

Inline Buttons widget in a Responsive app
Inline Buttons widget

Content properties​

These properties appear in the Content tab of the property pane. This widget has no Style tab. Each button has its own style settings.

Appearance​

Appearance string​

Sets how the widget looks. Options:

  • Buttons (default): a row of buttons.
  • Tabs: a full-width tab strip. The active tab has an underline. Tabs show the label and sublabel of each button. They do not show icons.

Selected tab string​

Sets the active tab. Shows when Appearance is Tabs. Enter the id of a button, for example button1.

Clicking a tab does not change this value. To move the active tab, store the id in the tab's onClick action and bind this property to it.

Example:

{{appsmith.store.tab}}

Data​

Buttons​

Lists the buttons in the group. You can add, rename, reorder, and remove buttons. New widgets start with Delete, a separator, Cancel, and Save Changes.

Click a button to open its settings. The settings are listed below.

General​

Visible boolean​

Controls whether the widget is visible. Default: on.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Button settings​

These settings appear when you click a button in the Buttons list.

Content: Label​

Sublabel string​

Sets a second line under the label. Only shows when Appearance is Tabs.

Text string​

Sets the label of the button.

Content: General​

Visible boolean​

Shows or hides the button.

Disabled boolean​

Stops users from clicking the button.

Content: Events​

onClick​

Runs when users click the button. The button shows a loading state until the action finishes.

Style: General​

Button variant string​

Sets the look of the button. Options: Filled, Outlined, Subtle, Ghost.

Values for code: filled, outlined, subtle, ghost.

Button color string​

Sets the semantic color of the button. Options: Accent (default), Neutral, Positive, Negative, Warning.

Values for code: accent, neutral, positive, negative, warning.

Style: Icon​

Icon string​

Sets an icon to show on the button.

Position string​

Sets where the icon appears. Options: start (default) or end. You cannot bind this property.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{InlineButtons1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{InlineButtons1.isVisible}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

InlineButtons1.setVisibility(false)

setDisabled (param: boolean): Promise​

Sets the widget's isDisabled value. In this release the buttons do not read this value, so the call has no visible effect. To disable a button, use its Disabled setting.

Example:

InlineButtons1.setDisabled(true)

Events​

onClick (button)​

Each button has its own onClick event. It runs when users click that button or tab. Set it in the button settings.