Notification

import { AXNotificationModule } from '@acorex/components/notification';

The Notification component provides a flexible and interactive way to display messages to users. It supports various customization options, including color schemes, location on the screen, and auto-close functionality with adjustable timeout settings. The component can also show a visual progress indicator for the auto-close duration. Notifications are triggered programmatically via a function, making them highly adaptable for different use cases such as alerts, confirmations, or status updates in an Angular application.

Overview

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

Color

Primary

Location

Top-end

Auto close

Auto close timeout

Show timeout progress

Usage

A simple example of using notification

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-notification-text-color	var(--ax-sys-color-on-surface)	Text color of the notification. Defaults to the system's surface text color.
--ax-comp-notification-bg-color	var(--ax-sys-color-surface)	Background color of the notification. Defaults to the system's surface background color.
--ax-comp-notification-font-size	0.875rem	Font size of the notification text.
--ax-comp-notification-line-height	1.25rem	Line height of the notification text.
--ax-comp-notification-border-width	1px	Border width of the notification.
--ax-comp-notification-border-color	var(--ax-sys-border-color)	Border color of the notification. Defaults to the system's border color.
--ax-comp-notification-border-radius	var(--ax-sys-border-radius)	Border radius of the notification. Defaults to the system's border radius.
--ax-comp-notification-icon-text-color	--ax-sys-color-${color}-500	Text color of the notification icon.Uses the specified theme color (primary, success, danger, warning, or secondary) at its 500 shade in most variants, surface colors in ghost variant.
--ax-comp-notification-progress-bg-color	255, 255, 255, 0.46	Background color of the notification progress bar. Uses the specified theme color (primary, success, danger, warning, or secondary) at its 800 shade in most variants, surface colors in ghost variant.