Button Group

import { AXButtonGroupModule } from '@acorex/components/button-group';

Button group allows multiple buttons to be grouped together, enabling a selectable state for each button within the group. This feature enhances user interaction by providing a cohesive set of options.

Overview

In this section, you can test different options of this component and see the output in real time

Color

Default

Look

Solid

Size

Selection

Single

Disabled

Usage

A simple example of usingax-button-group

Preview

Code

Dropdown Items

In single selection mode, only one of the buttons is selected.

Preview

Code

Splitted Buttons

In single selection mode, only one of the buttons is selected.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-button-group-border-radius	var(--ax-sys-border-radius)	Border radius of the button group. Uses the system's border radius.

Props

color	string	ghost	Specifies the color of the button group.
look	AXStyleLookType	solid	Determines the appearance of the button group.
selection	string	single	Specifies the selection mode of the button group (e.g., single or multiple selection).
disable	boolean	false	Disables the button group.

Methods

onClick	AXClickEvent	Specifies the function to be called when the button is clicked.
onBlur	AXFocusEvent	Specifies the function to be called when the button loses focus.
onFocus	AXFocusEvent	Specifies the function to be called when the button gains focus.
lookChange	AXStyleLookType	Specifies the function to be called when the appearance of the button changes.
colorChange	AXStyleColorType	Specifies the function to be called when the color of the button changes.
disabledChange	boolean	Specifies the function to be called when the disabled state of the button changes.
selectionChange	AXSelectionMode	Specifies the function to be called when the selection mode of the button group changes.