Skip to main content

FAB (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 FAB (floating action button) widget shows a button that floats over the page in one corner. It stays in place while users scroll. Use it for the main action on a page, for example Create. It can show a badge with a count, such as unread messages.

In the editor, the FAB also shows a small placeholder in its layout slot. Click the placeholder to select and configure the widget. The placeholder does not show in the deployed app.

Widget type: WDS_FAB_WIDGET

FAB widget in a Responsive app
FAB widget

Content properties​

These properties appear in the Content tab of the property pane.

Basic​

Icon string​

Sets the icon on the button. Default: plus. The value must be the name of an icon from the icon list. You cannot choose "no icon."

Label string​

Sets the button's accessible name. This field is required. An empty label, or a label with only spaces, shows a validation error. Default: Create.

  • In the Standard variant, screen readers read the label. It is not shown on screen.
  • In the Extended variant, the label shows as text next to the icon.

Variant string​

Sets the button shape. You cannot bind this property. Options:

  • Standard (default): icon only.
  • Extended: icon and label text.

Badge​

Badge count number​

Shows a notification badge over the button when the value is greater than 0. The value must be 0 or more. Default: 0.

Example:

{{GetUnread.data.length}}

Badge max number​

Sets the highest count the badge shows. Larger counts show with a +. For example, with a max of 99, a count of 120 shows as 99+. The value must be a whole number of 1 or more. Default: 99.

General​

Position string​

Sets the page corner the button sticks to. You cannot bind this property. Options: Bottom right (default), Bottom left, Top right, Top left.

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Stops users from clicking the button. Default: off.

Animate loading boolean​

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

Style properties​

These properties appear in the Style tab of the property pane.

General​

Color string​

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

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

Reference properties​

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

isVisible boolean​

Shows whether the widget is visible.

Example:

{{FAB1.isVisible}}

isDisabled boolean​

Shows whether the button is disabled.

Example:

{{FAB1.isDisabled}}

icon string​

Holds the icon name.

Example:

{{FAB1.icon}}

label string​

Holds the label.

Example:

{{FAB1.label}}

variant string​

Holds the variant: standard or extended.

Example:

{{FAB1.variant}}

position string​

Holds the corner: bottom-right, bottom-left, top-right, or top-left.

Example:

{{FAB1.position}}

badgeCount number​

Holds the badge count.

Example:

{{FAB1.badgeCount}}

badgeMax number​

Holds the badge max.

Example:

{{FAB1.badgeMax}}

color string​

Holds the button color.

Example:

{{FAB1.color}}

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:

FAB1.setVisibility(false)

setDisabled (param: boolean): Promise​

Turns the button on or off.

Example:

FAB1.setDisabled(true)

setBadgeCount (param: number): Promise​

Sets the badge count. Use 0 to hide the badge.

Example:

FAB1.setBadgeCount(5)

Events​

onClick​

Runs when users click the button.