Snackbar

Snackbar component helps to display temporary notifications of actions, errors or other events. Use the action slot when the snackbar needs an inline action. When using a Button in this slot, set size="small" and variant="neutralSecondary".

Available from eds-core/1.1.0

Figma LibraryView in StorybookView in PlayroomAPI Reference

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
			action={
				<Button
					onClick={() => alert('Action Button Clicked')}
					size="small"
					variant="neutralSecondary"
				>
					Join
				</Button>
			}
			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
	action={
		<Button
			onClick={() => alert('Action button clicked!')}
			size="small"
			variant="neutralSecondary"
		>
			Join
		</Button>
	}
	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.

Variants​

Use the variant prop to convey the nature of the message. Snackbar and SnackbarContent support four variants: info, positive, critical, and loading. The examples below use the standalone SnackbarContent primitive so all variants can be shown together.

<Box className="flex flex-col gap-3">
	<SnackbarContent
		title="Informative"
		description="A neutral, informational message"
		variant="info"
		onCloseButtonClick={() => alert('Close button clicked!')}
	/>
	<SnackbarContent
		title="Positive"
		description="A success or confirmation message"
		variant="positive"
		onCloseButtonClick={() => alert('Close button clicked!')}
	/>
	<SnackbarContent
		title="Critical"
		description="An error or destructive message"
		variant="critical"
		onCloseButtonClick={() => alert('Close button clicked!')}
	/>
	<SnackbarContent
		title="Loading"
		description="An in-progress message"
		variant="loading"
		onCloseButtonClick={() => alert('Close button clicked!')}
	/>
</Box>
View in Playroom

Placement​

Use the placement prop to control where the Snackbar appears on screen. The supported values are bottom-start, bottom-end, top-start, and top-end. Use the offset prop to nudge it away from the viewport edges.

const [open, setOpen] = React.useState(false);
const [placement, setPlacement] = React.useState('bottom-start');

const showAt = (nextPlacement) => {
	setPlacement(nextPlacement);
	setOpen(true);
};

return (
	<>
		<Box className="flex flex-wrap gap-2">
			<Button variant="neutralSecondary" onClick={() => showAt('bottom-start')}>
				Bottom start
			</Button>
			<Button variant="neutralSecondary" onClick={() => showAt('bottom-end')}>
				Bottom end
			</Button>
			<Button variant="neutralSecondary" onClick={() => showAt('top-start')}>
				Top start
			</Button>
			<Button variant="neutralSecondary" onClick={() => showAt('top-end')}>
				Top end
			</Button>
		</Box>
		<Snackbar
			autoCloseDuration={4000}
			description="Description"
			offset={[24, 24]}
			onClose={() => setOpen(false)}
			onCloseButtonClick={() => setOpen(false)}
			open={open}
			placement={placement}
			title={`Placement: ${placement}`}
			variant="info"
		/>
	</>
);
View in Playroom

Action​

Use the action slot to render custom action content at the trailing edge of SnackbarContent.

When using a Button in this slot, set size="small" and variant="neutralSecondary".

<SnackbarContent
	action={
		<Button
			onClick={() => alert('Action button clicked!')}
			size="small"
			variant="neutralSecondary"
		>
			Join
		</Button>
	}
	description="Description"
	onCloseButtonClick={() => alert('Close button clicked!')}
	title="Default Snackbar Text"
	variant="info"
/>
View in Playroom

Action Button (Deprecated)​

⚠️ The actionButton prop is deprecated and will be removed in a future version. Use the new action slot instead.

<Box className="flex flex-col gap-4">
	{/* Deprecated actionButton prop */}
	<SnackbarContent
		actionButton={{
			text: 'Join',
			onClick: () => alert('Action button clicked!'),
		}}
		description="Description"
		onCloseButtonClick={() => alert('Close button clicked!')}
		title="Default Snackbar Text"
		variant="info"
	/>

	{/* New action slot (recommended) */}
	<SnackbarContent
		action={
			<Button
				onClick={() => alert('Action button clicked!')}
				size="small"
				variant="neutralSecondary"
			>
				Join
			</Button>
		}
		description="Description"
		onCloseButtonClick={() => alert('Close button clicked!')}
		title="Default Snackbar Text"
		variant="info"
	/>
</Box>
View in Playroom

API Reference​

Snackbar

PropDefaultDescription
title_string
Displays the label/title
description?_string
Displays the description
variant?_'info' | 'positive' | 'critical' | 'loading'
Represents the variants of the component
action?_React.ReactNode
Renders custom action content at the trailing edge of the snackbar. When using a Button, set size="small" and variant="neutralSecondary".
actionButton?_object
To prompt users to take specific actions.

⚠️ Deprecated, use action instead.

actionButton.text_string
Represents the text for the action button
actionButton.onClick_function
Callback invoked when the action button is clicked

onCloseButtonClick?

_

function
Callback invoked when the close button is clicked.

⚠️ Deprecated, use closeButtonProps.onClick instead.

closeButtonProps?_object
Adds close button to the Snackbar. This button will be rendered in the top right corner of the snackbar.
closeButtonProps.label_string
Aria label content for the close button.
closeButtonProps.onClick_() => void
Callback invoked when the close button is clicked.
open_boolean
Controls the visibility of the Snackbar
onClose_function
Callback invoked when the Snackbar is auto-dismissed.
placement_'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
To anchor the position of the Snackbar
offset?[8,8][number,number]
To adjust the vertical & horizontal position of the Snackbar. Value is computed in pixels
autoCloseDuration?3000number
To auto-dismiss the Snackbar after a certain time. Specify the time in milliseconds

SnackbarContent

PropDefaultDescription
title_string
Displays the label/title
description?_string
Displays the description
variant?_'info' | 'positive' | 'critical' | 'loading'
Represents the variants of the component
action?_React.ReactNode
Renders custom action content at the trailing edge of the snackbar. When using a Button, set size="small" and variant="neutralSecondary".
actionButton?_object
To prompt users to take specific actions.

⚠️ Deprecated, use action instead.

actionButton.text_string
Represents the text for the action button
actionButton.onClick_function
Callback invoked when the action button is clicked

onCloseButtonClick?

_

function
Callback invoked when the close button is clicked.

⚠️ Deprecated, use closeButtonProps.onClick instead.

closeButtonProps?_object
Adds close button to the SnackbarContent. This button will be rendered in the top right corner of the snackbar content.
closeButtonProps.label_string
Aria label content for the close button.
closeButtonProps.onClick_() => void
Callback 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",
        action: "bg-critical",
        wrapper: "bg-caution",
        title: "bg-neutral-tertiary",
        description: "bg-canvas-secondary",
      }}
      action={
        <Button
          onClick={() => {
            alert("Action button clicked");
          }}
          size="small"
          variant="neutralSecondary"
        >
          Join
        </Button>
      }
      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
	action={
		<Button
			onClick={() => alert('Action button clicked!')}
			size="small"
			variant="neutralSecondary"
		>
			Join
		</Button>
	}
	className="border-4 border-input-hover"
	classNames={{
		title: 'text-critical',
		description: 'text-positive font-stronger',
		closeButton: 'bg-caution hover:bg-caution-pressed',
		action: 'bg-critical',
	}}
	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.
actionThe container wrapping the action slot at the trailing edge of the SnackbarContent.
actionButton(Deprecated)A deprecated action button on the right side of the SnackbarContent. Use the action slot instead.