Toast

The Toast component provides lightweight notification messages using semantic custom elements.

Ignix Lite toasts support semantic intents, motion variants, positions, and accessible live regions.

[!NOTE] Unlike pure CSS/HTML components in Ignix-Lite, Toast is a dynamic notification component that requires JavaScript for its lifecycle and triggers. Its visual styles are configured via data-* attributes on <ix-toast> but the toast instances are instantiated and triggered using the .show() JavaScript helper method.

---

Intent Variants

Preview

Code

toast.show({
  title: 'Success',
  message: 'Profile updated successfully.',
  intent: 'success'
})

toast.show({
  title: 'Danger',
  message: 'Something failed unexpectedly.',
  intent: 'danger'
})

toast.show({
  title: 'Warning',
  message: 'Please verify your input.',
  intent: 'warning'
})

---

Motion Variants

Preview

Code

toast.show({
  title: 'Fade',
  message: 'Fade animation toast.',
  variant: 'fade'
})

toast.show({
  title: 'Slide',
  message: 'Slide animation toast.',
  variant: 'slide'
})

toast.show({
  title: 'Pop',
  message: 'Pop animation toast.',
  variant: 'pop'
})

---

Position Variants

Preview

Code

<ix-toast
  id="topLeft"
  data-position="top-left"
></ix-toast>

<ix-toast
  id="bottomRight"
  data-position="bottom-right"
></ix-toast>

Usage

Preview

Code

<ix-toast id="toast"></ix-toast>

<button onclick="
customElements.whenDefined('ix-toast').then(() => {
  document.querySelector('#toast').show({
    title: 'Changes Saved',
    message: 'Your workspace settings have been updated.',
    intent: 'success',
    variant: 'slide'
  })
})
">
  Save Settings
</button>

---

Attributes

Attribute	Type	Description
data-intent	'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'gradient'	Applies semantic styling
data-variant	'fade' | 'slide' | 'pop' | 'action'	Applies motion style
data-position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center'	Controls toast placement