Dialog

import { AXDialogModule } from '@acorex/components/dialog';

Dialog component is a flexible UI element for displaying information, prompts, or actions to users in a focused way. It offers various types, colors, and orientations for customization, and can be configured as draggable or fixed. With features like overlay control, action buttons, and adaptive sizing, the Dialog provides a seamless, accessible experience for user interactions in different contexts.

Overview

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

Color

Primary

Type

Alert

Orientation

Vertical

Draggable

Usage

A simple example of using Dialog

Preview

Code

Asynchronous Process

Description of AXDialogComponent's feature.

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-dialog-icon-bg-color	--ax-sys-color-${color}-200	this variable specifies the background color of the icon displayed in dialog components. It is used to visually emphasize the icon and provide a cohesive appearance in the dialog's design.
--ax-comp-dialog-icon-text-color	--ax-sys-color-${color}-700	defines the color of the text or icon displayed within the dialog's icon area. It ensures proper contrast and visibility against the icon's background color.
--ax-comp-dialog-bg-color	--ax-sys-color-surface	defines the background color of dialog components. It sets the primary visual backdrop for the dialog, ensuring consistency and alignment with the overall design theme.
--ax-comp-dialog-text-color	--ax-sys-color-on-surface	this variable specifies the color of the text displayed within dialog components. It ensures readability and proper contrast against the dialog's background color.