Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Layout styling (Bulma)

Icons

ChangeLog

FAQ

Aqua Basis

Aqua Composition

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:

⚠️ 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