Toast

import { AXToastModule } from '@acorex/components/toast';

Toast component is a dynamic and lightweight messaging tool for providing users with brief notifications or updates. It offers extensive customization options, including color, screen location, and the ability to display a title, content, and a close button. Toasts can auto-close with a configurable timeout and optionally display a visual progress indicator for the remaining time. Triggered programmatically via a function, this component is ideal for delivering non-intrusive feedback or alerts in Angular applications.

Overview

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

Color

Primary

Location

Bottom-center

Show title

Show content

Show close button

Auto close

Auto close timeout

Show timeout progress

Usage

The simple usage toast.

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-toast-text-color	var(--ax-sys-color-on-#{$name}-surface)	Text color of the toast. Uses the corresponding text color of the specified theme color (primary, success, danger, warning, or secondary) in variants.
--ax-comp-toast-bg-color	var(--ax-sys-color-#{$name}-surface)	Background color of the toast. 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-toast-font-size	0.875rem	Font size of the toast text.
--ax-comp-toast-line-height	1.25rem	Line height of the toast text.
--ax-comp-toast-border-radius	var(--ax-sys-border-radius)	Border radius of the toast. Defaults to the system's border radius.
--ax-comp-toast-progress-bg-color	var(--ax-sys-color-#{$name}-darker-surface)	Background color of the toast 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.