Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

The AqButtonSplit component is useful for exposing a common action while nesting secondary, less frequently used actions until needed.

A split button can be crucial to help a busy design feel minimal.

<aq-button-split
	info="This is a tooltip"
	type="button"
	variant="success"
>
  Button
</aq-button-split>

image.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).
items object[] [] Items for the right dropdown.
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-aqbuttonsplit--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 AqButtonSplit 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
clickLeft Triggered when the left button is clicked. Returns the selected value. onClickLeft={handleClick} (clickLeft)="handleClick($event)" @clickLeft="handleClick" el.addEventListener('clickLeft', handler)
clickRight Triggered when the right button is clicked. Returns the selected value. onClickRight={handleClick} (clickRight)="handleClick($event)" @clickRight="handleClick" el.addEventListener('clickRight', handler)
clickItem Triggered when a dropdown item is selected.

Returns the selected value. | onClickItem={handleClick} | (clickItem)="handleClick($event)" | @clickItem="handleClick" | el.addEventListener('clickItem', handler) |

Event Types

Event React/Angular/Vue
clickLeft (e:CustomEvent<{event:Event}>)
clickRight (e:CustomEvent<{event:Event}>)
clickItem (e:CustomEvent<{value:string}>)

Slots