Action Group

Updated:

Provides a simple layout for groups of actions like buttons, links, etc.

The q2-action-group component provides a simple wrapper around groups of buttons or links, which is responsible for their layout and how they are displayed to the user. By default, it will automatically display them vertically or horizontally based on the component's width relative to a customizable orientation threshold. However, this can be overridden by simply providing your own orientation value for how you would like the buttons to be displayed.

Vertical orientation is not supported for Links or Buttons with intent="coin"

Properties

Learn more about properties.

fullWidth
full-width

Whether the buttons should take up the full width of the container when in horizontal orientation.

This will prevent the buttons from wrapping when the container is too small to fit all buttons.

orientation

The orientation of the buttons, which will override the auto orientation.

Vertical orientation is not supported for Links or "coin" Buttons, and will be set to "horizontal".

This will override and disable the auto determination of the orientation.

orientationThreshold
orientation-threshold

The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation

The component determines this based on the width of the element itself, not the browser window.

Dependencies

This component uses other components in the Tecton library, including:

  • q2-resize-observer

Dependents

Other components in the Tecton library use this component, including:

  • q2-context
  • q2-modal

Release Notes

Initial Release

Support for Button elements

Support for Link elements

Support for "coin" intent Button elements

Overview

An Action Group is a collection of actions combined to give access to frequently performed, related actions. Actions inside the Action Group follow their parent components' guidelines and states.

  • Anatomy

    Submit Cancel Reset
    <q2-action-group>
      <q2-btn intent="workflow-primary">Submit</q2-btn>
      <q2-btn intent="workflow-secondary">Cancel</q2-btn>
      <q2-btn intent="workflow-escape">Reset</q2-btn>
    </q2-action-group>

    To insure proper display in the user interface, action groups using buttons should never wrap to two lines or rows. If there is a situation where the action group wraps inside its object, use stacked blocked display to present the buttons.

  • Usage

    When To Use

    • Actions have a contextual relationship
      • For example, the default button group can be used when a form has a primary and alternative action.
    • Stepping through linear content
      • Actions in an action group can be used for directional navigation and actions ("Back", "Next", "Continue", "Skip", "Cancel")

    When To Not Use

    • If actions are not related
      • Consider how placement and alternative structure of unrelated actions can improve usability over placing all actions in a group.
    • Linking to content
      • Buttons in button groups should not be used when text links would be simpler and more contextually appropriate. Grouped buttons such as "Next" and "Previous" are acceptable when content is organized sequentially.
  • Usability Guidance

    • Avoid burden of choice.
      • Try not to present the user with too many options (4 actions maximum)
    • Don't mix differently sized buttons in the same group
    • Use only one primary button in a button group
    • Attempt to maintain consistency with other pages when placing the primary action.
    • Use short, descriptive button labels to describe controls.
      • Button labels should be concise and clear enough to indicate what will happen when the button is interacted with



The following CSS variables are available to override the default theme styles of the q2-action-groupcomponent.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

  • q2-resize-observer