Toast — ARC UI

Components

Toast

feedback

interactive

<arc-toast>

Overview

Guidelines

When to use

Place a single <arc-toast> element at the root of your layout so all pages share one toaster
Use the success variant to confirm completed actions like saves, uploads, and deletions
Keep messages short — one sentence or less — so users can read them before auto-dismiss
Use the error variant for failures that need acknowledgment but not a blocking dialog
Set duration to 0 for critical messages that the user must dismiss manually
Pair with form submissions and async operations to provide immediate feedback

When not to use

Create multiple <arc-toast> elements on the same page — use one shared instance
Use toasts for information that requires user decision or input; use a Modal instead
Display sensitive data (passwords, tokens) in a toast — they are visible to anyone nearby
Set very short durations (under 2 000 ms); users may not have time to read the message
Rely solely on color to convey meaning — the icon and message text must stand on their own
Fire toasts in rapid succession for batch operations; summarize into a single notification

Features

Imperative show() API — call with message, variant, and optional duration
Four variants (info, success, warning, error) with color-coded bottom indicators and icons
Six position anchors: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
Auto-dismiss after configurable duration (default 4 000 ms); pass 0 to persist
Smooth enter/exit animations with scale and opacity transitions
Manual dismiss via close button on each toast
Vertical stacking with consistent gap for multiple simultaneous toasts
aria-live="polite" container for screen-reader announcements
Respects prefers-reduced-motion — disables animations when set
Responsive full-width layout on viewports under 640 px
arc-dismiss event fires when a toast is removed

Preview

Show Success Toast

Show Error Toast

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-toast id="toaster" position="top-right"></arc-toast>

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
  <arc-button variant="primary"
    onclick="document.getElementById('toaster').show({ message: 'Changes saved successfully.', variant: 'success' })">
    Success
  </arc-button>
  <arc-button variant="secondary"
    onclick="document.getElementById('toaster').show({ message: 'Something went wrong.', variant: 'error' })">
    Error
  </arc-button>
  <arc-button variant="ghost"
    onclick="document.getElementById('toaster').show({ message: 'Deployment in progress...', variant: 'warning', duration: 6000 })">
    Warning (6 s)
  </arc-button>
</div>

import { Toast, Button } from '@arclux/arc-ui-react';
import { useRef } from 'react';

export function NotificationDemo() {
  const toastRef = useRef<HTMLElement>(null);

  const showSuccess = () =>
    (toastRef.current as any)?.show({ message: 'Changes saved successfully.', variant: 'success' });
  const showError = () =>
    (toastRef.current as any)?.show({ message: 'Something went wrong.', variant: 'error' });

  return (
    <>
      <Toast ref={toastRef} position="top-right" />
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <Button variant="primary" onClick={showSuccess}>Success</Button>
        <Button variant="secondary" onClick={showError}>Error</Button>
      </div>
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { Button, Toast } from '@arclux/arc-ui-vue';

const toaster = ref(null);
const showSuccess = () => toaster.value?.show({ message: 'Changes saved successfully.', variant: 'success' });
const showError   = () => toaster.value?.show({ message: 'Something went wrong.', variant: 'error' });
</script>

<template>
  <Toast ref="toaster" position="top-right" />
  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
    <Button variant="primary" @click="showSuccess">Success</Button>
    <Button variant="secondary" @click="showError">Error</Button>
  </div>
</template>

<script>
  import { Button, Toast } from '@arclux/arc-ui-svelte';

  let toaster;
  const showSuccess = () => toaster?.show({ message: 'Changes saved successfully.', variant: 'success' });
  const showError   = () => toaster?.show({ message: 'Something went wrong.', variant: 'error' });
</script>

<Toast bind:this={toaster} position="top-right" />
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
  <Button variant="primary" on:click={showSuccess}>Success</Button>
  <Button variant="secondary" on:click={showError}>Error</Button>
</div>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Button, Toast } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, Toast],
  template: `
    <Toast #toaster position="top-right"></Toast>
    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
      <Button variant="primary" (click)="showSuccess()">Success</Button>
      <Button variant="secondary" (click)="showError()">Error</Button>
    </div>
  `,
})
export class NotificationDemoComponent {
  @ViewChild('toaster') toaster!: ElementRef;

  showSuccess() {
    this.toaster.nativeElement.show({ message: 'Changes saved successfully.', variant: 'success' });
  }
  showError() {
    this.toaster.nativeElement.show({ message: 'Something went wrong.', variant: 'error' });
  }
}

import { Button, Toast } from '@arclux/arc-ui-solid';

export function NotificationDemo() {
  let toaster: HTMLElement | undefined;

  return (
    <>
      <Toast ref={toaster} position="top-right" />
      <div style={{ display: 'flex', gap: '8px', 'flex-wrap': 'wrap' }}>
        <Button variant="primary"
          onClick={() => (toaster as any)?.show({ message: 'Changes saved successfully.', variant: 'success' })}>
          Success
        </Button>
        <Button variant="secondary"
          onClick={() => (toaster as any)?.show({ message: 'Something went wrong.', variant: 'error' })}>
          Error
        </Button>
      </div>
    </>
  );
}

import { Button, Toast } from '@arclux/arc-ui-preact';
import { useRef } from 'preact/hooks';

export function NotificationDemo() {
  const toastRef = useRef<HTMLElement>(null);

  const showSuccess = () =>
    (toastRef.current as any)?.show({ message: 'Changes saved successfully.', variant: 'success' });
  const showError = () =>
    (toastRef.current as any)?.show({ message: 'Something went wrong.', variant: 'error' });

  return (
    <>
      <Toast ref={toastRef} position="top-right" />
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <Button variant="primary" onClick={showSuccess}>Success</Button>
        <Button variant="secondary" onClick={showError}>Error</Button>
      </div>
    </>
  );
}

API

Prop	Type	Default	Description
`position`	`'top-right' \| 'top-left' \| 'top-center' \| 'bottom-right' \| 'bottom-left' \| 'bottom-center'`	`'top-right'`	Anchors the toast stack to a fixed edge of the viewport. Top-right is the most conventional position for web applications. Bottom positions work well for media players or editors where the top area is occupied by toolbars.
`duration`	`number`	`4000`	Time in milliseconds before a toast auto-dismisses. Applies as the default for every show() call but can be overridden per-toast via the duration option in the show() payload. Set to 0 to disable auto-dismiss entirely, requiring the user to click the close button.

Events

Event	Description
`arc-dismiss`	Fired when a toast notification is dismissed