Aqua Basis

The AqButtonGroup component is a group of AqButton elements arranged horizontally or vertically.

<aq-button-group orientation="vertical">
  <aq-button variant="primary" type="submit" is-outline><em class="aq-icon-settings"></em>Button</aq-button>
  <aq-button variant="success" type="submit" is-outline><em class="aq-icon-settings"></em>Button</aq-button>
  <aq-button variant="danger" type="submit" is-outline>Button</aq-button>
</aq-button-group>

Props and Attributes

Prop / Attr	Type	Default	Description
`orientation`	`horizontal`	`vertical`	`horizontal`

Use horizontal to display them side by side, or vertical to stack them in a column. |

Events

No events are emitted by AqButtonGroup. Events are emitted by AqButton

Playground

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-actions-aqbuttongroup--horizontal&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

In Frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<aq-button-group orientation="horizontal">
	<aq-button variant="primary" is-outline>One</aq-button>
	<aq-button variant="success" is-outline>Two</aq-button>
	<aq-button variant="danger" is-outline>Three</aq-button>
</aq-button-group>

Vue

<script lang="ts">
	import { defineComponent } from 'vue';
	import { AqButtonGroup, AqButton } from '@aqua-ds/vue';
	
	export default defineComponent({
	  components: {
	    AqButtonGroup,
	    AqButton,
	  },
	});
</script>

<template>
  <aq-button-group orientation="horizontal">
    <aq-button variant="primary" is-outline>One</aq-button>
    <aq-button variant="success" is-outline>Two</aq-button>
    <aq-button variant="danger" is-outline>Three</aq-button>
  </aq-button-group>
</template>

React

import {
  AqButton,
  AqButtonGroup
} from '@aqua-ds/react';

export const ButtonGroupSet = () => {
  return (
		<AqButtonGroup orientation="horizontal">
			<AqButton variant="primary" is-outline>Uno</AqButton>
			<AqButton variant="success" is-outline>Dos</AqButton>
			<AqButton variant="danger" is-outline>Tres</AqButton>
		</AqButtonGroup>
  );
};

Angular

// button-group-set.component.ts
import { Component } from '@angular/core';
import { AqButton } from '@aqua-ds/angular';

@Component({
  selector: 'app-button-group-set',
  standalone: true,
  imports: [AqButton],
  templateUrl: './button-group-set.component.html',
})
export class ButtonGroupComponentSet {}

<!-- button-group-set.component.html -->
<aq-button-group orientation="horizontal">
	<aq-button variant="primary" is-outline>Uno</aq-button>
	<aq-button variant="success" is-outline>Dos</aq-button>
	<aq-button variant="danger" is-outline>Tres</aq-button>
</aq-button-group>

Notes

All buttons within the group must be <aq-button> elements for correct styling.
This component only manages layout, not individual button behavior.

On this page