Action Group

Updated:

Use for laying out groups of buttons or links with consistent spacing.

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

Design

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

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

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

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!