Alert

import { AXAlertModule } from '@acorex/components/alert';

Alert displays important messages and comes in six types: primary, success, warning, danger, and secondary. It can be closed manually, include a footer button, or be positioned inline. You can also set an automatic closing time.

Overview

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

Congratulations!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea maxime quos atque animi reiciendis soluta, fugit exercitationem, sit unde tempore ipsam non nesciunt, nostrum harum rerum saepe? Aperiam, tempore doloremque?

Color

Primary

Title

Content

Inline Button

Footer buttons

Close button

Usage

A simple example of using ax-alert

Preview

Code

Inline

In linear mode, you can only use ax-title, ax-icon, ax-button and ax-close-button tags.

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-alert-bg-color	var(--ax-sys-color-#{$name}-surface)	Background color of the alert. Uses a theme color (primary, success, danger, warning, or secondary).
--ax-comp-alert-bg-color-opacity	0.15	Opacity of the alert's background color (0 = transparent, 1 = opaque).
--ax-comp-alert-border-color	var(--ax-sys-color-#{$name}-surface)	Border color of the alert. Uses a theme color (primary, success, danger, warning, or secondary).
--ax-comp-alert-border-radius	var(--ax-sys-border-radius)	Border radius of the alert. Uses the system's border radius.
--ax-comp-alert-title-content-text-color	var(--ax-sys-color-on-lightest-surface)	Text color for the alert's title and content. Uses the system's text color.
--ax-comp-alert-font-size	0.875rem	Font size of the alert text.
--ax-comp-alert-line-height	1.25rem	Line height of the alert text.
--ax-comp-alert-icon-color	var(--ax-sys-color-#{$name}-surface)	Color of the alert's icon. Uses a theme color (primary, success, danger, warning, or secondary).
--ax-comp-alert-icon-border-radius	100%	Border radius of the alert's icon (100% for a circular icon).
--ax-comp-alert-icon-line-height	normal	Line height of the alert's icon.
--ax-comp-alert-progress-bg-color	var(--ax-sys-color-on-#{$name}-surface)	Background color of the alert's progress bar. Uses a theme color (primary, success, danger, warning, or secondary).

Props

color	string	primary	Sets the color theme of the alert.
timeOut	boolean	false	Specifies whether the alert should automatically disappear after a timeout.
title	boolean	true	Determines whether the alert has a title.
content	boolean	true	Specifies whether the alert should include content text.
inlineButton	boolean	false	Determines whether an inline button is displayed within the alert.
footerButton	boolean	true	Specifies whether a footer button is included in the alert.
closeButton	boolean	false	Determines whether a close button is displayed on the alert.
progressbar	boolean	false	Specifies whether a progress bar is displayed in the alert.
text	string	-	Sets the text content of the alert.
look	AXStyleLookType	solid	Determines the appearance of the alert.

Methods

colorChange	AXStyleColorType	Specifies the function to be called when the color of the alert changes.
onClosed	AXEvent	Specifies the function to be called when the alert is closed.
onOptionChanged	AXOptionChangedEvent	Specifies the function to be called when an option in the alert is changed.