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. 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

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

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

Then use the global showDapSnackbar function or static methods to display messages:

// 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:

<>
<dap-ds-snackbar maxItems="4"></dap-ds-snackbar>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Message types</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('Operation completed successfully', {
        alertType: 'successful'
      });
    }}>
      Success Message
    </dap-ds-button>
    
    <dap-ds-button onClick={() => {
      showDapSnackbar('Unable to connect to server', {
        alertType: 'error'
      });
    }}>
      Error Message
    </dap-ds-button>
    
    <dap-ds-button onClick={() => {
      showDapSnackbar('New features are available in settings', {
        alertType: 'information'
      });
    }}>
      Info Message
    </dap-ds-button>
    
    <dap-ds-button onClick={() => {
      showDapSnackbar('Task completed', {
        alertType: 'default'
      });
    }}>
      Default Message
    </dap-ds-button>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
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:

<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">With action buttons</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('Message deleted', {
        alertType: 'default',
        actions: [
          { 
            text: 'Undo', 
            func: () => console.log('Undo clicked') 
          }
        ]
      });
    }}>
      Undo Action
    </dap-ds-button>
    
    <dap-ds-button onClick={() => {
      showDapSnackbar('Document exported successfully', {
        alertType: 'successful',
        actions: [
          { 
            text: 'Download', 
            href: '/downloads/document.pdf',
            target: '_blank'
          }
        ]
      });
    }}>
      Link Action
    </dap-ds-button>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Multiple actions</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('Connection lost', {
        alertType: 'error',
        duration: 10000,
        actions: [
          { 
            text: 'Refresh', 
            func: () => window.location.reload() 
          },
          { 
            text: 'Settings', 
            href: '/settings'
          }
        ]
      });
    }}>
      Multiple Actions
    </dap-ds-button>
  </dap-ds-stack>
</div>
</dap-ds-stack>
Duration & Positioning

Control message timing and screen position:

<>
<dap-ds-snackbar position="top-center" maxItems="3"></dap-ds-snackbar>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Custom duration</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('Quick message (2 seconds)', {
        duration: 2000
      });
    }}>
      Short Duration
    </dap-ds-button>
    
    <dap-ds-button onClick={() => {
      showDapSnackbar('Persistent message (15 seconds)', {
        duration: 15000,
        alertType: 'information'
      });
    }}>
      Long Duration
    </dap-ds-button>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Close button control</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('Message without close button', {
        closeButton: 'false',
        duration: 4000
      });
    }}>
      No Close Button
    </dap-ds-button>
    
    <dap-ds-button onClick={() => {
      showDapSnackbar('Message with close button', {
        closeButton: 'true',
        duration: 10000
      });
    }}>
      With Close Button
    </dap-ds-button>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
Container Configuration

Configure the snackbar container behavior:

<>
<dap-ds-snackbar 
position="bottom-left" 
maxItems="2" 
duration="4000"
announceMessages={false}>
</dap-ds-snackbar>

<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Container limits</dap-ds-typography>
  <dap-ds-button onClick={() => {
    // Generate multiple messages quickly to test maxItems
    for (let i = 1; i <= 5; i++) {
      setTimeout(() => {
        showDapSnackbar(`Message ${i} of 5`, {
          alertType: i <= 2 ? 'successful' : 'information'
        });
      }, i * 200);
    }
  }}>
    Test Max Items (2)
  </dap-ds-button>
</div>

<div>
  <dap-ds-typography variant="h4">Global controls</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('First message', { duration: 8000 });
      showDapSnackbar('Second message', { duration: 8000 });
      showDapSnackbar('Third message', { duration: 8000 });
    }}>
      Show Multiple
    </dap-ds-button>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
Real-World Patterns Form Feedback 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">Contact Form</dap-ds-typography>
  <dap-ds-input label="Name" placeholder="Your name"/>
  <dap-ds-input label="Email" type="email" placeholder="your@email.com"/>
  <dap-ds-textarea label="Message" placeholder="Your message here..."/>
  
  <dap-ds-stack direction="row">
    <dap-ds-button onClick={() => {
      showDapSnackbar('Message sent successfully!', {
        alertType: 'successful',
        actions: [
          { text: 'Send Another', func: () => console.log('Reset form') }
        ]
      });
    }}>
      Send Message
    </dap-ds-button>
    
    <dap-ds-button 
      variant="outline"
      onClick={() => {
        showDapSnackbar('Failed to send message. Please check your connection.', {
          alertType: 'error',
          duration: 8000,
          actions: [
            { text: 'Retry', func: () => console.log('Retry send') }
          ]
        });
      }}>
      Simulate Error
    </dap-ds-button>
  </dap-ds-stack>
</dap-ds-stack>
</div>
Data Operations 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">Document Management</dap-ds-typography>
  <dap-ds-stack direction="row" justify="between" align="center">
    <dap-ds-typography variant="body">Report_2024.pdf</dap-ds-typography>
    <dap-ds-stack direction="row">
      <dap-ds-button 
        size="sm" 
        variant="subtle"
        onClick={() => {
          showDapSnackbar('Document saved to drafts', {
            alertType: 'successful',
            actions: [
              { text: 'View', href: '/drafts' }
            ]
          });
        }}>
        Save Draft
      </dap-ds-button>
      
      <dap-ds-button 
        size="sm" 
        variant="subtle" 
        danger
        onClick={() => {
          showDapSnackbar('Document deleted', {
            alertType: 'default',
            actions: [
              { text: 'Undo', variant: 'outline-inverted', func: () => console.log('Restore document') }
            ]
          });
        }}>
        Delete
      </dap-ds-button>
    </dap-ds-stack>
  </dap-ds-stack>
</dap-ds-stack>
</div>
System Notifications 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h4">System Status</dap-ds-typography>
  <dap-ds-stack direction="row">
    <dap-ds-button 
      size="sm"
      onClick={() => {
        showDapSnackbar('System update available', {
          alertType: 'information',
          duration: 12000,
          actions: [
            { text: 'Update Now', func: () => console.log('Start update') },
            { text: 'Later', func: () => console.log('Remind later') }
          ]
        });
      }}>
      Update Available
    </dap-ds-button>
    
    <dap-ds-button 
      size="sm"
      onClick={() => {
        showDapSnackbar('Connection restored', {
          alertType: 'successful'
        });
      }}>
      Connection Restored
    </dap-ds-button>
    
    <dap-ds-button 
      size="sm"
      onClick={() => {
        showDapSnackbar('Backup completed successfully', {
          alertType: 'successful',
          actions: [
            { text: 'View Details', href: '/backup-log' }
          ]
        });
      }}>
      Backup Complete
    </dap-ds-button>
  </dap-ds-stack>
</dap-ds-stack>
</div>
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:

<dap-ds-stack direction="row">
<dap-ds-button onClick={() => {
  showDapSnackbar('Custom gradient background with rounded corners', {
    alertType: 'information',
    customStyle: {
      '--dds-snackbar-border-radius': 'var(--dds-radius-rounded)',
      '--dds-snackbar-background': 'linear-gradient(135deg, var(--dds-indigo-200), var(--dds-indigo-500))',
      '--dds-snackbar-border': 'var(--dds-border-width-base) solid var(--dds-indigo-300)',
      '--dds-snackbar-animation-duration': '10s',
      'box-shadow': '0 8px 32px rgba(0, 0, 0, 0.6)'
    }
  });
}}>
  Gradient Style
</dap-ds-button>

<dap-ds-button onClick={() => {
  showDapSnackbar('Elevated message with enhanced shadow', {
    alertType: 'successful',
    customStyle: {
      '--dds-snackbar-background': 'var(--dds-indigo-200)',
      '--dds-snackbar-border': 'var(--dds-border-width-base) solid var(--dds-indigo-500)',
      '--dds-snackbar-text': 'var(--dds-text-indigo-base)',
      'box-shadow': '0 12px 32px rgba(0, 0, 0, 0.15)',
      'transform': 'scale(1.02)',
      'transition': 'all 2s ease'
    }
  });
}}>
  Elevated Style
</dap-ds-button>

<dap-ds-button onClick={() => {
  showDapSnackbar('Neon glow effect with custom border', {
    alertType: 'default',
    customStyle: {
      '--dds-snackbar-background': 'var(--dds-teal-200)',
      '--dds-snackbar-text': 'var(--dds-teal-500)',
      '--dds-snackbar-border': '2px solid var(--dds-teal-500)',
      'box-shadow': '0 0 20px var(--dds-teal-alpha-20), 0 4px 16px rgba(0, 0, 0, 0.1)'
    }
  });
}}>
  Neon Glow
</dap-ds-button>
</dap-ds-stack>
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
<dap-ds-stack direction="column">
<dap-ds-typography variant="h4">Accessibility examples:</dap-ds-typography>
<dap-ds-stack direction="row">
  <dap-ds-button onClick={() => {
    showDapSnackbar('File uploaded successfully. You can now share it with others.', {
      alertType: 'successful',
      actions: [
        { text: 'Share Document', func: () => console.log('Share action') }
      ]
    });
  }}>
    Descriptive Success
  </dap-ds-button>
  
  <dap-ds-button onClick={() => {
    showDapSnackbar('Unable to save changes. Check your internet connection and try again.', {
      alertType: 'error',
      duration: 10000,
      actions: [
        { text: 'Retry Save', func: () => console.log('Retry') },
        { text: 'Save Offline', func: () => console.log('Offline save') }
      ]
    });
  }}>
    Error with Context
  </dap-ds-button>
</dap-ds-stack>
</dap-ds-stack>
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
PropertyTypeDefaultDescription
maxItemsnumber4The 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
durationnumber6000The duration of the snackbar message in milliseconds
announceMessagesbooleantrueWhether the snackbar should announce new messages to screen readers
Slots

No slots available.

Events

No custom events available.

CSS Parts
Part NameDescription
hostThe host element
messageThe message part of the snackbar
message-baseThe base part of the message
message-textThe text part of the message
message-closebuttonThe close button part of the message
message-close-iconThe close icon part of the message
message-actionsThe 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 NameDescription
--dds-snackbar-spacingSpacing used for positioning the snackbar (default: var(--dds-spacing-400))
--dds-snackbar-z-indexZ-index of the snackbar container (default: 10000)
--dds-snackbar-pointer-eventsPointer 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
PropertyTypeDefaultDescription
actionsActionType[], undefined[]The actions of the snackbar item.
messagestring''The message of the snackbar item.
closeButtonstring'true'Whether the snackbar has a close button.
alertTypeAlertType'default'The message type of the snackbar item.
customStyleRecord<string,string> , undefinedThe custom style of the snackbar item.
positionSnackbarPosition'bottom-right'The position of the snackbar container for directional animations.
Slots
NameDescription
defaultThe content of the snackbar.
Events
Event NameDescriptionType
dds-closeFires when the snackbar closes.{id: string }
CSS Parts
Part NameDescription
baseMain snackbar container.
textThe text part of the snackbar.
closebuttonThe close button part of the component.
iconThe icon part of the close button.
CSS Custom Properties
Property NameDescription
--dds-snackbar-widthWidth of the snackbar.
--dds-snackbar-gapGap between snackbar elements.
--dds-snackbar-paddingPadding inside the snackbar.
--dds-snackbar-margin-bottomBottom margin of the snackbar.
--dds-snackbar-transitionTransition property for the snackbar.
--dds-snackbar-border-radiusBorder radius of the snackbar.
--dds-snackbar-font-sizeFont size used in the snackbar.
--dds-snackbar-backgroundBackground color of the snackbar.
--dds-snackbar-borderBorder color of the snackbar.
--dds-snackbar-textText color of the snackbar.
--dds-snackbar-iconIcon color of the snackbar.
--dds-snackbar-linkLink color of the snackbar.
--dds-snackbar-information-backgroundBackground color for information variant.
--dds-snackbar-information-borderBorder color for information variant.
--dds-snackbar-information-iconIcon color for information variant.
--dds-snackbar-success-backgroundBackground color for success variant.
--dds-snackbar-success-borderBorder color for success variant.
--dds-snackbar-success-iconIcon color for success variant.
--dds-snackbar-error-backgroundBackground color for error variant.
--dds-snackbar-error-borderBorder color for error variant.
--dds-snackbar-error-iconIcon color for error variant.
--dds-snackbar-variant-textText color for information, success, and error variants.
--dds-snackbar-variant-iconIcon color for information, success, and error variants.
--dds-snackbar-variant-linkLink color for information, success, and error variants.
--dds-snackbar-animation-durationDuration of entrance animations (default: 0.3s)
--dds-snackbar-animation-timingTiming function for animations (default: ease-out)