Popup

import { AXPopupModule } from '@acorex/components/popup';

Popup component is a dialog box or overlay that appears on top of the main content to display information, prompt user actions, or present options. It is typically used for alerts, confirmations, forms, or notifications, and can be closed by the user once they’ve interacted with it or dismissed it.

Overview

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

Show header

Allow drag

Has backdrop

Close button

Close on backdrop click

Size

Usage

A simple example of using popup.

Preview

Code

Size

With size property in open method you can adjust popup size

Preview

Code

Show Header

If you need create custom header or you don't need header just add option header: false

Preview

Code

Size in screens

Popup size table on different screens

Size	Screen	Width
SM	Phone	93vw
SM	Tablet	55vw
SM	Desktop	30 vw
SM	Desktop Large	25vw
MD	Phone	93vw
MD	Tablet	65vw
MD	Desktop	50vw
MD	Desktop Large	40vw
LG	Phone	93vw
LG	Tablet	75vw
LG	Desktop	85vw
LG	Desktop Large	65vw
Full	All Screen	100vw
Fit	All Screen	fit-content

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-popup-border-radius	var(--ax-sys-border-radius)	A CSS custom property (variable) that defines the border radius of popup components. It controls the roundness of the popup’s corners, contributing to the overall visual style and design consistency.
--ax-comp-popup-border-color	var(--ax-sys-color-border-lightest-surface)	A CSS custom property (variable) that specifies the border color of popup components. It helps define the popup's boundary, ensuring clear visual separation from the background and other UI elements.
--ax-comp-popup-body-bg-color	var(--ax-sys-color-lightest-surface)	A CSS custom property (variable) that defines the background color of the popup body. It ensures a visually distinct and cohesive appearance for the popup’s content area.
--ax-comp-popup-body-text-color	var(--ax-sys-color-on-lightest-surface)	A CSS custom property (variable) that specifies the text color for the content inside the popup body. It ensures readability and provides sufficient contrast against the popup's background color.
--ax-comp-popup-header-bg-color	var(--ax-sys-color-lighter-surface)	A CSS custom property (variable) that defines the background color of the popup header. It helps visually distinguish the header section from the body, ensuring a structured and clear popup design.
--ax-comp-popup-header-border-color	var(--ax-sys-color-border-lighter-surface)	A CSS custom property (variable) that specifies the border color of the popup header. It provides a clear separation between the header and the rest of the popup, enhancing the overall visual structure.
--ax-comp-popup-footer-bg-color	var(--ax-sys-color-lighter-surface)	A CSS custom property (variable) that defines the background color of the popup footer. It helps visually separate the footer from the popup body, ensuring a structured and cohesive design.
--ax-comp-popup-footer-border-color	var(--ax-sys-color-border-lighter-surface)	A CSS custom property (variable) that specifies the border color of the popup footer. It provides a clear visual separation between the footer and the rest of the popup, enhancing the overall structure and readability.