Aqua Basis

The AqButton component is a clickable item used to trigger actions. It communicates calls to action to the user and allow users to interact with the pages in multiple ways.

<aq-button type="button" variant="primary" size="medium" has-disclosure>
  Button
</aq-button>

image 1.png

Props and Attributes

Prop / Attr	Type	Default	Description
`type`	`button	submit	reset`
`variant`	`primary	success	danger
`size`	`small	medium	large`
`isDisabled`	`boolean`	`false`	Disables the button.
`hasDisclosure`	`boolean`	`false`	Adds a disclosure icon at the right separated by a vertical divider.
`isLoading`	`boolean`	`false`	Shows a loading spinner inside the button.
`isOutline`	`boolean`	`false`	Applies outline style.
`isPlain`	`boolean`	`false`	Applies plain style (without external border).
`info`	`string`	`''`	Tooltip text.
`customClass`	`string`	`''`	Custom CSS class.

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-aqbutton--default&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>

Variants

The aq-button component supports four color variants: default, primary, danger, and success. Each variant can be combined with the following boolean properties:

isOutline
isPlain

⚠️ Note: isOutline and isPlain cannot be used together.

Additional properties such as hasDisclosure, isLoading, and isDisabled can be used in combination with any color variant and style.

Tooltips are supported across all variations of the button.

Events

Event	Description	React	Angular	Vue	Vanilla JS
`click`	Triggered when the button is clicked.	`onClick={handleClick}`	`(click)="handleClick($event)"`	`@click="handleClick"`	`addEventListener('click', handler)`

Event Types

Event	React	Angular	Vue
`click`	`(e:React.MouseEvent<HTMLElement>)`	`(e:Event)`	`(e:Event)`

Slots

The aq-button component includes a default slot, allowing you to insert custom content, other Aqua components such as aq-badge, icons (<em class="aq-icon-[name]" />), and more.

💡 Recommendation: Use simple components within the button to maintain its visual consistency and avoid layout issues.

This example demonstrates a primary variant of the Aqua button, using the default slot to include:

An icon (aq-icon-settings).
A badge component to display status or count.
The has-disclosure property, which visually indicates that the button triggers an additional action or menu.
A tooltip in the button (info attribute).

✅ This combination showcases how Aqua components can be composed together inside a button for rich, interactive UI elements.

When using the small size variant of the AqButton, avoid placing AqBadge or other Aqua components inside the default slot. These elements may break the visual layout due to space constraints.

⚠️ Important: Use only plain text and icons in small buttons to preserve design integrity.

In Frameworks

Web Components

<aq-button
	type="button"
	variant="primary"
	size="medium"
	info="More info"
	custom-class="custom-class"
>  
	Aqua Button
</aq-button>

<script>
	document.querySelector('aq-button')
		.addEventListener('click', () => {
		  console.log('clicked');
	  });
</script>

Vue

<script lang="ts">
import { AqButton } from '@aqua-ds/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    AqButton,
  },
  setup() {
	  const handleClick = (e: Event) => {
      console.log('Handling button click from vue ', e);
    };
    return {
      handleclick,
    };
  }
});
</script>

<template>
  <aq-button
    type="button"
    variant="primary"
    size="medium"
    info="More info"
    custom-class="custom-class"
    @click="handleClick"
  >
    Aqua Button
  </aq-button>
</template>

React

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

export const ButtonSet = () => {
	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
		console.log('clicked', event)
	}

  return (
		<AqButton
			type="button"
			variant="primary"
			size="medium"
			info="More info"  
			customClass="custom-class"
			onClick={handleClick}
		>
			Aqua Button
		</AqButton>
  );
};

Angular

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

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

export class ButtonComponentSet {
  handleClick(event: Event) {
    console.log('AqButton clicked', event);
  }
}

<!-- button-set.component.html -->
<aq-button
  (click)="handleClick($event)"
  type="button"
  variant="primary"
  size="medium"
  info="Click to perform action"
>
  Aqua Button
</aq-button>