Use for laying out groups of buttons or links with consistent spacing.
fullWidthfull-widthWhether the slotted elements 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.
orientationThe orientation of the buttons, which will override the auto orientation.
This will override and disable the auto determination of the orientation.
orientationThresholdorientation-thresholdThe 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.
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.
Avoid burden of choice.
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.
Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.
How to build a row of coin-style buttons that group related top-level actions like account shortcuts.
Coin buttons are circular icon-and-label buttons used for prominent shortcuts, typically along the top of a page or section. Use them to surface a small, fixed set of related actions (for example: Statements, Transfers, Settings, Sign Out).
Limit coin buttons to 3 to 5 actions per group, and give each button a distinct icon that clearly represents its action. Avoid using the same icon for multiple buttons in a single group; the visual differentiation is what makes coin buttons scannable.
A coin button takes a q2-avatar element as its child and uses intent="coin". Wrap the set in a q2-action-group so they pick up consistent spacing, alignment, and responsive behavior.
<q2-action-group>
<q2-btn intent="coin" label="Statements">
<q2-avatar icon="statements"></q2-avatar>
</q2-btn>
<q2-btn intent="coin" label="Transfers">
<q2-avatar icon="transfer"></q2-avatar>
</q2-btn>
<q2-btn intent="coin" label="Settings">
<q2-avatar icon="gear"></q2-avatar>
</q2-btn>
<q2-btn intent="coin" label="Sign Out">
<q2-avatar icon="logout"></q2-avatar>
</q2-btn>
</q2-action-group>When to group buttons together and how to do it correctly using q2-btn and q2-action-group.
When you have two or more related actions sitting next to each other, for example a primary "Save" button next to a secondary "Cancel" button, wrap them in a q2-action-group. This gives them consistent spacing, alignment, and responsive behavior on small screens.
Avoid stacking q2-btn elements directly inside a flex or grid container without q2-action-group.
<q2-action-group>
<q2-btn intent="workflow-primary">Save</q2-btn>
<q2-btn intent="workflow-secondary">Cancel</q2-btn>
</q2-action-group>How to build an Account List page in Tecton: a summary header and a searchable, client-filtered account list.
How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.
How to build a Bank Statement page in Tecton: a computed account summary and a q2-data-table of transactions for a statement period.
How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.
How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.
How to build a Profile page in Tecton: required-field validation for personal information, real-time cross-field password validation, and plain integration toggles.
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!
This component uses other components in the Tecton library, including:
q2-resize-observerOther components in the Tecton library use this component, including:
q2-contextq2-modalThe changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.