Dropdown Button

import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';

Dropdown Button enables you to seamlessly combine a button and a dropdown into one unified element. It allows users to trigger actions with the button while providing additional options through the dropdown, enhancing functionality and streamlining the user interface.

Overview

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

Color

Primary

Look

Solid

Size

Mode

Split

Disabled

Usage

A simple example of using ax-dropdown-button

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-dropdown-button-divider-color-solid	var(--ax-sys-color-#{$name}-dark-surface)	this variable specifies the solid color used for the divider between items in a dropdown button component. It helps visually separate options, ensuring clarity and organization within the dropdown.
--ax-comp-dropdown-button-divider-color-outline	var(--ax-sys-color-#{$name}-surface)	defines the outline color for the divider between items in a dropdown button component. It provides a subtle visual separation, maintaining the overall design's refinement and clarity.
--ax-comp-dropdown-button-divider-color-twotone	var(--ax-sys-color-#{$name}-lighter-surface)	this variable specifies a two-tone color scheme for the divider between items in a dropdown button component. It creates a visually appealing and dynamic separation, enhancing the dropdown's design aesthetics.