Snackbar Overview

The Snackbar component displays temporary messages that slide in from the bottom of the screen. These messages provide feedback for user actions and automatically disappear after a set duration (or stay until manually closed when marked as persistent). Snackbars are non-blocking and allow users to continue interacting with the application while the message is displayed.

When to Use

✅ Use snackbars for:

• Confirming successful actions (save, delete, update)
• Displaying non-critical error messages
• Providing brief feedback that doesn't require user action
• Showing undo actions for reversible operations

❌ Don't use snackbars for:

• Critical error messages that require immediate attention
• Long or complex messages
• Information that users need to reference later
• Actions that require user input or decision-making

Setup 1. Add the Snackbar Container

First, add the snackbar container to your page (preferably in a root component):

<dap-ds-snackbar></dap-ds-snackbar>

2. Configure TypeScript and ESLint

To use the global showDapSnackbar function without type errors or linting issues, you need to configure both TypeScript and ESLint:

TypeScript Global Declaration

Add the function signature to your global.d.ts file (or create one in your project root):

declare function showDapSnackbar(
  message: string,
  options?: {
    alertType?: 'default' | 'successful' | 'error' | 'information'
    duration?: number
    persistent?: boolean
    actions?: Array<{
      text: string
      func?: () => void
      href?: string
      target?: string
      variant?: string
    }>
    closeButton?: string
    customStyle?: Record<string, string>
  },
): void

ESLint Configuration

Add showDapSnackbar to your ESLint globals to prevent "is not defined" errors:

{
  "root": true,
  "globals": {
    "showDapSnackbar": "readonly"
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended"
  ]
}

3. Use the Function

Now you can use the global showDapSnackbar function throughout your application:

// Basic usage
showDapSnackbar('Your changes have been saved!')

// With options
showDapSnackbar('Failed to save document', {
  alertType: 'error',
  duration: 8000,
  actions: [{ text: 'Retry', func: () => retryAction() }]
})

Examples Message Types

Different alert types provide visual context for the message content:

Message typesSuccess MessageError MessageInfo MessageDefault Message

Static Helper Methods

The component provides convenient static methods for common message types:

import { DapDSSnackbar } from 'dap-design-system'

// Use static methods from anywhere in your React app
DapDSSnackbar.success('Operation completed!')
DapDSSnackbar.error('Something failed!')
DapDSSnackbar.info('Important information')
DapDSSnackbar.closeAll() // Close all messages

// Or create an alias for convenience
const snackbar = DapDSSnackbar
snackbar.success('Much cleaner!')

// Legacy component method (still works)
const component = document.querySelector('dap-ds-snackbar')
component.addMessage('Hello', { alertType: 'success' })`}

Actions & Interactions

Snackbars can include action buttons for quick user interactions:

With action buttonsUndo ActionLink Action

Multiple actionsMultiple Actions

Duration & Positioning

Control message timing and screen position. Set persistent: true to disable auto-dismiss entirely — the message stays until the user closes it manually (via the close button or the Escape key) or closeAll() is called.

Custom durationShort DurationLong Duration

Persistent messagesPersistent Message

Close button controlNo Close ButtonWith Close Button

Container Configuration

Configure the snackbar container behavior:

Container limitsTest Max Items (2)

Global controlsShow Multiple

Real-World Patterns Form Feedback Data Operations System Notifications Custom Styling

The snackbar component supports extensive customization through CSS custom properties and parts. This section demonstrates practical styling techniques and advanced customization patterns.

Quick Customization with Inline Styles

Use the customStyle option to apply custom CSS properties directly to individual snackbar messages:

Gradient StyleElevated StyleNeon Glow

Configuration Global Methods

Static methods for programmatic control:

// Show messages with specific types
DapDSSnackbar.success('Success message')
DapDSSnackbar.error('Error message') 
DapDSSnackbar.info('Information message')
DapDSSnackbar.default('Default message')

// Show message with custom styling
showDapSnackbar('Styled message', {
  alertType: 'successful',
  customStyle: {
    '--dds-snackbar-background': 'var(--dds-brand-50)',
    '--dds-snackbar-border': '2px solid var(--dds-brand-300)',
    'box-shadow': '0 8px 24px rgba(0, 0, 0, 0.1)'
  },
  duration: 5000,
  actions: [{ text: 'Action', func: () => console.log('clicked') }]
})

// Close all messages
DapDSSnackbar.closeAll()

Accessibility Requirements

• Screen reader support: Messages are announced when announceMessages is enabled
• Keyboard navigation: Escape key closes the most recent message
• Focus management: Action buttons are properly focusable
• ARIA attributes: Container has appropriate role, aria-live, and aria-label attributes

Keyboard Navigation

• Escape: Closes the most recent snackbar message
• Tab: Navigates to action buttons within messages
• Enter/Space: Activates action buttons

Screen Reader Support

• Container uses aria-live="polite" for message announcements
• Individual messages are announced when announceMessages is true
• Action buttons have proper accessible names
• Alert types provide semantic context

Accessibility examples:Descriptive SuccessError with Context

Importing

import { DapDSSnackbar } from 'dap-design-system'

Importing React

import { DapDSSnackbarReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSSnackbar } from 'dap-design-system/components'

Attributes

Property	Type	Default	Description
maxItems	number	4	The maximum number of snackbar messages at a given time.
position	'bottom-left', 'bottom-right' , 'bottom-center' , 'top-right' , 'top-center'	'bottom-right'	The position of the snackbar
duration	number	6000	The duration of the snackbar message in milliseconds
announceMessages	boolean	true	Whether the snackbar should announce new messages to screen readers

Slots

No slots available.

Events

No custom events available.

CSS Parts

Part Name	Description
host	The host element
message	The message part of the snackbar
message-base	The base part of the message
message-text	The text part of the message
message-closebutton	The close button part of the message
message-close-icon	The close icon part of the message
message-actions	The actions part of the message

How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-snackbar::part(host) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-snackbar::part(host),
.my-custom-dap-ds-snackbar::part(message) {
  /* Shared styles */
}

Example usage:

<dap-ds-snackbar class="my-custom-dap-ds-snackbar">
  Snackbar
</dap-ds-snackbar>

.my-custom-dap-ds-snackbar::part(host) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

CSS Custom Properties

Property Name	Description
--dds-snackbar-spacing	Spacing used for positioning the snackbar (default: var(--dds-spacing-400))
--dds-snackbar-z-index	Z-index of the snackbar container (default: 10000)
--dds-snackbar-pointer-events	Pointer events behavior for the snackbar (default: auto)

How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-snackbar
  style="--dds-snackbar-spacing: value; --dds-snackbar-z-index: value;">
  Snackbar
</dap-ds-snackbar>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-snackbar {
  --dds-snackbar-spacing: value;
  --dds-snackbar-z-index: value;
  --dds-snackbar-pointer-events: value;
}

<dap-ds-snackbar class="my-custom-dap-ds-snackbar">
  Snackbar
</dap-ds-snackbar>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-snackbar {
  --dds-snackbar-spacing: value;
  --dds-snackbar-z-index: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.

Components Snackbar message <dap-ds-snackbar-message/> Attributes

Property	Type	Default	Description
actions	ActionType[], undefined	[]	The actions of the snackbar item.
message	string	''	The message of the snackbar item.
closeButton	string	'true'	Whether the snackbar has a close button.
alertType	AlertType	'default'	The message type of the snackbar item.
customStyle	Record<string,string> , undefined		The custom style of the snackbar item.
position	SnackbarPosition	'bottom-right'	The position of the snackbar container for directional animations.

Slots

Name	Description
default	The content of the snackbar.

Events

Event Name	Description	Type
dds-close	Fires when the snackbar closes.	{id: string }

CSS Parts

Part Name	Description
base	Main snackbar container.
text	The text part of the snackbar.
closebutton	The close button part of the component.
icon	The icon part of the close button.

CSS Custom Properties

Property Name	Description
--dds-snackbar-width	Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))
--dds-snackbar-gap	Gap between snackbar elements (default: var(--dds-spacing-400))
--dds-snackbar-padding	Padding inside the snackbar (default: var(--dds-spacing-400))
--dds-snackbar-margin-bottom	Bottom margin of the snackbar (default: var(--dds-spacing-400))
--dds-snackbar-transition	Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)
--dds-snackbar-border-radius	Border radius of the snackbar (default: var(--dds-radius-base))
--dds-snackbar-font-size	Font size used in the snackbar (default: var(--dds-font-sm))
--dds-snackbar-background	Background color of the snackbar (default: var(--dds-snackbar-error-background))
--dds-snackbar-border	Border color of the snackbar (default: var(--dds-snackbar-error-border))
--dds-snackbar-text	Text color of the snackbar (default: var(--dds-snackbar-variant-text))
--dds-snackbar-icon	Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))
--dds-snackbar-link	Link color of the snackbar (default: var(--dds-snackbar-variant-link))
--dds-snackbar-information-background	Background color for information variant (default: var(--dds-background-informative-medium))
--dds-snackbar-information-border	Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))
--dds-snackbar-information-icon	Icon color for information variant (default: var(--dds-icon-informative-subtle))
--dds-snackbar-success-background	Background color for success variant (default: var(--dds-background-positive-medium))
--dds-snackbar-success-border	Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))
--dds-snackbar-success-icon	Icon color for success variant (default: var(--dds-icon-positive-subtle))
--dds-snackbar-error-background	Background color for error variant (default: var(--dds-background-negative-medium))
--dds-snackbar-error-border	Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))
--dds-snackbar-error-icon	Icon color for error variant (default: var(--dds-icon-negative-subtle))
--dds-snackbar-variant-text	Text color for information, success, and error variants (default: var(--dds-text-neutral-base))
--dds-snackbar-variant-icon	Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))
--dds-snackbar-variant-link	Link color for information, success, and error variants (default: var(--dds-text-neutral-base))
--dds-snackbar-animation-duration	Duration of entrance animations (default: 0.3s)
--dds-snackbar-animation-timing	Timing function for animations (default: ease-out)