Snackbar — ARC UI

Components

Snackbar

feedback

interactive

<arc-snackbar>

Overview

Guidelines

When to use

Use snackbar for brief confirmations of completed actions like "Item deleted" or "Message sent"
Include an action button for destructive operations so users can undo immediately
Place a single <arc-snackbar> at the root of your layout for all pages to share
Keep messages to a single line — snackbar is not designed for multi-line content
Use the arc-action event to handle undo/retry logic in your application state

When not to use

Stack multiple snackbars — use toast if you need a notification queue
Use snackbar for errors that require user acknowledgment — use alert or dialog instead
Set very short durations (under 3 000 ms) when an action button is present
Display sensitive data in a snackbar — it is visible to anyone nearby
Use snackbar for persistent information — it auto-dismisses by design

Features

Imperative show() API — call with message, optional action label, and duration
Bottom-anchored single-line bar with surface-base background
Three position options: bottom-center, bottom-left, bottom-right
Accent-colored action link for undo/retry patterns
Auto-dismiss after configurable duration (default 5 000 ms)
Slide-up enter and slide-down exit animations
Single-instance — new show() replaces the current snackbar, no stacking
aria-live="polite" for non-intrusive screen-reader announcements
Respects prefers-reduced-motion — disables slide animations when set
arc-dismiss and arc-action events for parent component integration

Preview

Show Undo Snackbar

Show Simple Snackbar

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-snackbar id="snackbar" position="bottom-center"></arc-snackbar>

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
  <arc-button variant="primary"
    onclick="document.getElementById('snackbar').show({ message: 'Item deleted.', action: 'Undo' })">
    Delete Item
  </arc-button>
  <arc-button variant="secondary"
    onclick="document.getElementById('snackbar').show({ message: 'Message sent successfully.' })">
    Send Message
  </arc-button>
</div>

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

export function SnackbarDemo() {
  const snackbarRef = useRef<HTMLElement>(null);

  const showUndo = () =>
    (snackbarRef.current as any)?.show({ message: 'Item deleted.', action: 'Undo' });
  const showSimple = () =>
    (snackbarRef.current as any)?.show({ message: 'Message sent successfully.' });

  return (
    <>
      <Snackbar ref={snackbarRef} position="bottom-center" />
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <Button variant="primary" onClick={showUndo}>Delete Item</Button>
        <Button variant="secondary" onClick={showSimple}>Send Message</Button>
      </div>
    </>
  );
}

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

const snackbar = ref(null);
const showUndo   = () => snackbar.value?.show({ message: 'Item deleted.', action: 'Undo' });
const showSimple = () => snackbar.value?.show({ message: 'Message sent successfully.' });
</script>

<template>
  <Snackbar ref="snackbar" position="bottom-center" />
  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
    <Button variant="primary" @click="showUndo">Delete Item</Button>
    <Button variant="secondary" @click="showSimple">Send Message</Button>
  </div>
</template>

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

  let snackbar;
  const showUndo   = () => snackbar?.show({ message: 'Item deleted.', action: 'Undo' });
  const showSimple = () => snackbar?.show({ message: 'Message sent successfully.' });
</script>

<Snackbar bind:this={snackbar} position="bottom-center" />
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
  <Button variant="primary" on:click={showUndo}>Delete Item</Button>
  <Button variant="secondary" on:click={showSimple}>Send Message</Button>
</div>

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

@Component({
  imports: [Button, Snackbar],
  template: `
    <Snackbar #snackbar position="bottom-center"></Snackbar>
    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
      <Button variant="primary" (click)="showUndo()">Delete Item</Button>
      <Button variant="secondary" (click)="showSimple()">Send Message</Button>
    </div>
  `,
})
export class SnackbarDemoComponent {
  @ViewChild('snackbar') snackbar!: ElementRef;

  showUndo() {
    this.snackbar.nativeElement.show({ message: 'Item deleted.', action: 'Undo' });
  }
  showSimple() {
    this.snackbar.nativeElement.show({ message: 'Message sent successfully.' });
  }
}

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

export function SnackbarDemo() {
  let snackbar: HTMLElement | undefined;

  return (
    <>
      <Snackbar ref={snackbar} position="bottom-center" />
      <div style={{ display: 'flex', gap: '8px', 'flex-wrap': 'wrap' }}>
        <Button variant="primary"
          onClick={() => (snackbar as any)?.show({ message: 'Item deleted.', action: 'Undo' })}>
          Delete Item
        </Button>
        <Button variant="secondary"
          onClick={() => (snackbar as any)?.show({ message: 'Message sent successfully.' })}>
          Send Message
        </Button>
      </div>
    </>
  );
}

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

export function SnackbarDemo() {
  const snackbarRef = useRef<HTMLElement>(null);

  const showUndo = () =>
    (snackbarRef.current as any)?.show({ message: 'Item deleted.', action: 'Undo' });
  const showSimple = () =>
    (snackbarRef.current as any)?.show({ message: 'Message sent successfully.' });

  return (
    <>
      <Snackbar ref={snackbarRef} position="bottom-center" />
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <Button variant="primary" onClick={showUndo}>Delete Item</Button>
        <Button variant="secondary" onClick={showSimple}>Send Message</Button>
      </div>
    </>
  );
}

API

Prop	Type	Default	Description
`position`	`'bottom-center' \| 'bottom-left' \| 'bottom-right'`	`'bottom-center'`	Anchors the snackbar to a bottom edge of the viewport. Bottom-center is the conventional position for material-style snackbars.
`duration`	`number`	`5000`	Time in milliseconds before the snackbar auto-dismisses. Can be overridden per-show via the duration option. Set to 0 to persist until manually dismissed.

Events

Event	Description
`arc-dismiss`	Fired when the snackbar is dismissed, either by auto-timeout or user interaction
`arc-action`	Fired when the user clicks the action button (e.g. "Undo")