Snackbar

Material Design 3 snackbar for brief feedback and optional single-step actions at the bottom of the viewport. Not intended for critical blocking decisions; use dialogs or banners when confirmation must persist.

Basic Usage

Show a simple message with default timing. Snackbars provide lightweight, non-blocking confirmation without shifting layout.

Show Basic Snackbar 
<ds-snackbar id="snackbar-basic"></ds-snackbar>

<script type="module">
  document.querySelector('#show-basic-snackbar').addEventListener('click', () => {
    document.querySelector('#snackbar-basic').show({
      message: 'Message sent successfully'
    });
  });
</script>

Initial Value

Configure message, action label, and duration as attributes.

Show Configured Snackbar 
<ds-snackbar
  id="snackbar-initial"
  message="Draft saved"
  action-label="Undo"
  duration="6000">
</ds-snackbar>

Variants

Use action and duration options to match workflow needs.

Message Only

Message Only

With Action

With Undo Action

Queued Messages

Show 3 Queued Messages 
const snack1 = document.querySelector('#snackbar-queue-1');
const snack2 = document.querySelector('#snackbar-queue-2');
const snack3 = document.querySelector('#snackbar-queue-3');

snack1.show({ message: 'First message' });
snack2.show({ message: 'Second message' });
snack3.show({ message: 'Third message' });

States

Control visibility timing, including indefinite messages.

Short (2s) Default (4s) Indefinite (manual close) 
<!-- No auto-dismiss -->
<ds-snackbar id="snackbar-indefinite" duration="0"></ds-snackbar>

Interactive Example

Trigger snackbars and inspect emitted lifecycle and action events.

Show Success Show Error + Retry 
Event log:

API

Attributes

Attribute Type Default Description
message string "" Message content shown in the snackbar body.
action-label string "" Optional action button label.
duration number 4000 Auto-dismiss delay in milliseconds. Use 0 to disable.

Properties

Property Type Description
message string Reflects the message attribute.
actionLabel string Reflects the action-label attribute.
duration number Reflects the duration attribute.

Events

Event Detail Description
ds-snackbar:show { message, duration, hasAction } Fired when the snackbar becomes visible.
ds-snackbar:action { message, actionLabel } Fired when the action button is clicked.
ds-snackbar:dismiss { message } Fired when the snackbar begins dismissal.

Methods

Method Description
show(options) Queues and shows the snackbar with optional message/action callbacks.
dismiss() Dismisses the current snackbar and advances queue processing.

CSS Parts

Part Description
None This component currently does not expose shadow parts.

CSS Custom Properties

Property Description
--ds-snackbar-min-block-size Minimum height of the snackbar surface. Default var(--ds-size-control-lg).
--ds-snackbar-padding-inline Horizontal content padding. Default var(--ds-space-4).
--ds-snackbar-padding-block Vertical content padding. Default var(--ds-space-3).
--ds-snackbar-gap Gap between message and actions. Default var(--ds-space-2).
--ds-snackbar-close-size Close button size. Default var(--ds-size-icon-lg).

Accessibility

Keyboard Interaction

Key Context Expected Result
Tab / Shift+Tab Snackbar visible with actions Moves focus through action and close controls
Enter / Space Focus on action or close button Activates the focused control

Semantics

  • Snackbar surface uses role="alert" with polite live announcements.
  • An additional status live region improves announcement reliability.
  • Snackbar does not force focus changes, reducing interruption.

Usage Guidelines

  • When to use: Use snackbars for brief contextual feedback such as successful saves, sends, or recoverable errors.
  • When not to use: Avoid snackbars for critical warnings, multi-action decisions, or information that users must read in detail.
  • Composition: Keep message text short, provide at most one action (typically undo or retry), and rely on queueing for multiple events.
  • Common mistakes: Making snackbars persistent by default can become intrusive. Use duration="0" only when explicit dismissal is truly required.