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.
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"
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.
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.
This component uses other components in the Tecton library, including:
q2-resize-observer
Other components in the Tecton library use this component, including:
q2-context
q2-modal
Initial Release
Support for Button elements
Support for Link elements
Support for "coin" intent Button elements
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.
<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.
The following CSS variables are available to override the default theme styles of the q2-action-group
component.
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!