Button

import { AXButtonModule } from '@acorex/components/button';

Button component is a UI element in the ACoreX library, designed for use in Angular applications. It functions as a clickable button that triggers an action when interacted with. Highly customizable, the ax-button offers a range of features to enhance both its appearance and behavior.

Overview

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

Color

Primary

Look

Solid

Size

Disabled

Icon Only

Taggable

Usage

A simple example of using ax-button

Preview

Code

Use decorators

You can use ax-prefix and ax-suffix to add elements to the beginning and end of a button. Remember to import the AXDecoratorModule

Preview

Code

Using the badge in the button

You can use the ax-badge tag to display the badge on the button and use CSS classes to determine its location.

Preview

Code

Icon button

Instead of text, you can use the icon alone For this, leave the text value in the button empty and add a single ax-icon with the desired icon.

Preview

Code

Dropdown button

To create a dropdown button, use the ax-dropdown-panel inside the button. You can customize the button content by adding an ax-icon or leaving the text property empty for an icon-only design. text value in the button empty and add a single ax-icon with the desired icon.

Preview

Code

Loading state

You can show the loading mode to the user by using the ax-loading tag.

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-border-radius	var(--ax-sys-border-radius)	Border radius of the button. Uses the system's border radius.
--ax-comp-button-border-width	0px	Border width of the button.
--ax-comp-button-font-size	0.875rem (md)	Font size of the button text.
--ax-comp-button-height	calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1))	Height of the button.
--ax-comp-button-size-ratio	1	Size ratio of the button.
--ax-comp-button-padding-x	1rem (md)	Horizontal padding of the button.
--ax-comp-button-padding-y	0	Vertical padding of the button.
--ax-comp-button-text-padding-x	0.5rem	Horizontal padding between the button text and other content (like icons).
--ax-comp-button-icon-only-font-size	1.25rem (md)	Font size for icon-only buttons.
--ax-comp-button-decorator-padding-x	0.25rem (md)	Horizontal Padding of button decorator.
--ax-comp-ripple-bg-color	rgba(var(--ax-sys-color-#{$name}-on-surface), 0.3) (solid)	Background color of the ripple effect.
--ax-comp-button-normal-bg-color	var(--ax-sys-color-#{$name}-surface) (solid)	Background color of the button in its normal (default) state.
--ax-comp-button-normal-text-color	var(--ax-sys-color-on-#{$name}-surface) (solid)	Text color of the button in its normal state.
--ax-comp-button-normal-border-color	var(--ax-sys-color-#{$name}-surface) (solid)	Border color of the button in its normal state.
--ax-comp-button-hover-bg-color	var(--ax-sys-color-#{$name}-dark-surface) (solid)	Background color of the button on hover.
--ax-comp-button-hover-text-color	var(--ax-sys-color-on-#{$name}-dark-surface) (solid)	Text color of the button on hover.
--ax-comp-button-hover-border-color	var(--ax-sys-color-#{$name}-dark-surface) (solid)	Border color of the button on hover.
--ax-comp-button-pressed-bg-color	var(--ax-sys-color-#{$name}-darker-surface) (solid)	Background color of the button when pressed.
--ax-comp-button-pressed-text-color	var(--ax-sys-color-on-#{$name}-darker-surface) (solid)	Text color of the button when pressed.
--ax-comp-button-pressed-border-color	var(--ax-sys-color-#{$name}-darker-surface) (solid)	Border color of the button when pressed.
--ax-comp-button-focused-bg-color	var(--ax-sys-color-#{$name}-dark-surface) (solid)	Background color of the button when focused.
--ax-comp-button-focused-text-color	var(--ax-sys-color-on-#{$name}-dark-surface) (solid)	Text color of the button when focused.
--ax-comp-button-focused-border-color	var(--ax-sys-color-#{$name}-dark-surface) (solid)	Border color of the button when focused.
--ax-comp-button-focused-outline-color	var(--ax-sys-color-#{$name}-dark-surface) (solid)	Outline color of the button when focused.
--ax-comp-button-selected-bg-color	var(--ax-sys-color-#{$name}-darkest-surface) (solid)	Background color of the button when selected.
--ax-comp-button-selected-text-color	var(--ax-sys-color-on-#{$name}-darkest-surface) (solid)	Text color of the button when selected.
--ax-comp-button-selected-border-color	var(--ax-sys-color-#{$name}-darkest-surface) (solid)	Border color of the button when selected.

Props

disable	boolean	false	Disables the button.
color	string	ghost	Specifies the color of the button.
toggleable	boolean	false	allows to change the state of the button.
look	string	solid	Determines the appearance of the button.
loadingText	string	null	Sets the text to display when the button is loading.
text	string	-	Specifies the text displayed on the button.
class	string	-	Sets the CSS class for styling the button.
selected	boolean	false	Indicates whether the button is in the selected state.

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.
selectedChange	boolean	Specifies the function to be called when the selected state of the button changes.
toggleableChange	boolean	Specifies the function to be called when the toggleable state of the button changes.
lookChange	AXStyleLookType	Specifies the function to be called when the appearance of the button changes.
colorChange	string	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.
textChange	string	Specifies the function to be called when the text of the button changes.