Snackbar

Snackbar component helps to display temporary notifications of actions, errors or other events.

Available from eds-core/1.1.0

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Snackbar } from '@adaptavant/eds-core';

Usage​

Below is a fully functional Snackbar component. You can customize its content, appearance, placement and provide custom callbacks according to your requirements.

The visibility of the Snackbar component depends on your application state. So, it's important to update the states accurately when invoking the callback actions. Refer the below snippet for better clarity.

const [open, setOpen] = React.useState(false);
return (
	<>
		<Button
			onClick={() => setOpen(true)}
			variant="neutralSecondary"
		>
			Open Snackbar
		</Button>
		<Snackbar
			actionButton={{
				text: 'Action',
				onClick: () => alert('Action Button Clicked'),
			}}
			autoCloseDuration={2000}
			description="Description"
			offset={[24, 24]}
			onClose={() => setOpen(false)}
			onCloseButtonClick={() => setOpen(false)}
			open={open}
			placement="bottom-start"
			title="Default Snackbar Text"
			variant="info"
		/>
	</>
);
View in Playroom

SnackbarContent​

The SnackbarContent component can used as a standalone primitive to build a user feedback system. This component is internally used by Snackbar component.

<SnackbarContent
	actionButton={{
		text: 'Action',
		onClick: () => alert('Action button clicked!'),
	}}
	description="Description"
	onCloseButtonClick={() => alert('Close button clicked!')}
	title="Default Snackbar Text"
	variant="info"
/>
View in Playroom

Custom User Feedback System​

If you require to display multiple snackbars stacked vertically or wish to have consecutive snackbars that closes before opening another, this SnackbarContent component offers the flexibility needed to implement custom functionalities.

API Reference​

Snackbar​

PropsTypeDescriptionDefault
titlestringDisplays the label/title_
description?stringDisplays the description_
variant?'info' | 'positive' | 'critical' | 'loading'Represents the variants of the component_
actionButton?objectTo prompt users to take specific actions_
actionButton.textstringRepresents the text for the action button_
actionButton.onClickfunctionCallback invoked when the action button is clicked_
onCloseButtonClick?functionCallback invoked when the close button is clicked_
openbooleanControls the visibility of the Snackbar_
onClosefunctionCallback invoked when the Snackbar is auto-dismissed._
placement'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'To anchor the position of the Snackbar_
offset?[number,number]To adjust the vertical & horizontal position of the Snackbar. Value is computed in pixels[8,8]
autoCloseDuration?numberTo auto-dismiss the Snackbar after a certain time. Specify the time in milliseconds3000

SnackbarContent​

PropsTypeDescriptionDefault
titlestringDisplays the label/title_
description?stringDisplays the description_
variant?'info' | 'positive' | 'critical' | 'loading'Represents the variants of the component_
actionButton?objectTo prompt users to take specific actions_
actionButton.textstringRepresents the text for the action button_
actionButton.onClickfunctionCallback invoked when the action button is clicked_
onCloseButtonClick?functionCallback invoked when the close button is clicked_

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Snackbar parts​

const [open, setOpen] = React.useState(false);
return (
  <React.Fragment>
    <Button
      onClick={() => {
        setOpen(true);
      }}
      variant="neutralSecondary"
    >
      Show Snackbar
    </Button>
    <Snackbar
      classNames={{
        closeButton: "bg-positive",
        actionButton: "bg-critical",
        wrapper: "bg-caution",
        title: "bg-neutral-tertiary",
        description: "bg-canvas-secondary",
      }}
      actionButton={{
        onClick: () => {
          alert("Action button clicked");
        },
        text: "Action",
      }}
      autoCloseDuration={5000}
      description="Description"
      offset={[24, 24]}
      onClose={() => {
        setOpen(false);
        console.log("OnClose...");
      }}
      onCloseButtonClick={() => {
        setOpen(false);
        console.log("onCloseButtonClick...");
      }}
      open={open}
      placement="bottom-start"
      title="Default Snackbar Text"
      variant="info"
    />
  </React.Fragment>
);
View in Playroom

SnackbarContent parts​

<SnackbarContent
	actionButton={{
		text: 'Action',
		onClick: () => alert('Action button clicked!'),
	}}
	className="border-4 border-input-hover"
	classNames={{
		title: 'text-critical',
		description: 'text-positive font-stronger',
		closeButton: 'bg-caution hover:bg-caution-pressed',
		actionButton: 'text-link',
	}}
	description="Description"
	onCloseButtonClick={() => alert('Close button clicked!')}
	title="Default Snackbar Text"
	variant="info"
/>
View in Playroom
Stylable PartsDescription
rootThe root container of the SnackbarContent, wrapping all inner components.
titleThe title of the SnackbarContent.
descriptionThe description of the SnackbarContent.
closeButtonA button with a close icon on the corner of SnackbarContent, that allows users to close the Snackbar manually.
actionButtonA button link on the right side of the SnackbarContent that triggers an action, such as navigating to a different link or opening a modal.