• Model: Button sets can be attached to one model. Doing so makes all data-related button types—such as Save, Cancel, and Delete—automatically affect the model selected here.
• Position: This field determines the alignment of the buttons within the container. You can choose:
  • Right ( default )
  • Left
  • Center
• Expand to fill: The Button Set component extends across the entire width of its container (whether it's a page, a grid division, or a tab). By default, Button Groups are clustered together within the Button Set and displayed in the selected Position. When Expand to Fill is checked, Button Groups stretch horizontally across the entire area of the Button Set (even if the Button Group only holds one button).

• Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

• Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

  Note: 

  To refresh available style variant options, click refresh Refresh style variants.

  This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

• Margins: Sets a component's margin (the space around it) relative to other components on the page.

  • To set margins for all sides, click All.
  • To set margins for each side individually, click Separate.

  Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Standard display logic options are available to display or hide the component or feature.

• Display type:

  • Detached: Buttons within the Button Group are separated by spacing.

  • Attached: Buttons within the Button Group are attached to each other.

  • Combo: Buttons are stacked under the leftmost button in the Button Group and are accessible by clicking an arrow to open the dropdown button menu.

    • Icon: The icon to be included to the Combo button label. Click the field picker to select an icon.

    • Icon position: Sets the position of the icon on the button group label.

      • Left
      • Right

  • Menu: Buttons within the Button Group are displayed as a menu on the page that can be accessed by selecting the arrow next to the Button Group's label.

    • Allow HTML in label: Determines HTML rendering behavior for Button label contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

      Enabled:

      This text is important

      Disabled:

      <strong>This text is important</strong>

    • Label (optional): Text for the Button Group's label. The default label is "Select." Can also contain rendered HTML if Allow HTML in label is enabled.

    • Icon (optional): The icon to be included to the Button Group label. Click the field picker to select an icon.

    • Icon position: Sets the position of the icon on the button group label.

      • Left
      • Right

• Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Standard display logic options are available to display or hide the component or feature.

• Allow HTML: Determines HTML rendering behavior for Button label contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

  Enabled:

  This text is important

  Disabled:

  <strong>This text is important</strong>

• Button label: Text for the button. The default label is "Button." Can contain merge syntax or HTML.

• Button icon ( optional ): The icon to be included to the button label. Click the field picker to select an icon.
• Button icon position: Set the position for the icon on the button.
  • Left
  • Right
• Aria label: Add a label to be used by access technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications ( WAI-ARIA ) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

Note:  If no Aria Label is specified, access technologies will use the Button label.

Add actions to a button:

Click add Add action, then select:

• Action Type: Use action flows to launch actions.

Note:  Use the Show/hide menu action to add a dropdown menu to the button.

• Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

A floating box that displays when the end user hovers over a button, the tooltip provides guidance usage.

• Text: The tooltip's content.

• Position: This field determines the alignment of the tooltip relative to the button:

  • Top (default): Above the button.
  • Bottom: below the button.
  • Left: to the left of the button.
  • Right: to the right of the button.

  Note:  The Position settings are contingent upon available space. For example, if the Button Set is at the top of the page, and the tooltip position is set to Top, the tooltip cannot display above the button: there's not space. So it will display below the button.

• Tooltip style:

  • Dark (default): The tooltip box is a black.
  • Light: The tooltip box is white, with a drop shadow.

• Compact size?: If checked, reduces the amount of padding around the text in the tooltip box.

This tab allows you to establish a set of hotkeys that will immediately execute the actions associated with the button. Select the modifier and key, then test.

Note:  Nintex Apps focus hotkeys will not override hotkeys previously assigned by the operating system or browser, so be sure to test the key combination. If it's not providing the expected results, the key combination may already be assigned. Try a different combination.

Click add Add Hotkey and then configure:

• Modifiers include:
  • Alt
  • Ctrl
  • Command
  • Shift
• Key: Lists all available keys.
• Ignore hotkey if end user is typing in input element: If checked, the hotkey combination will be ignored while the user is entering content into any text field. (Useful if the hotkey combo would conflict with standard data entry keys, like arrows keys.)

Standard display logic options are available to display or hide the component or feature.