Snackbar
Snackbar component helps to display temporary notifications of actions, errors or other events.
Available from eds-core/1.1.0
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"
/>
</>
);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"
/>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.
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>
);
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"
/>Stylable Parts | Description |
|---|---|
root | The root container of the SnackbarContent, wrapping all inner components. |
title | The title of the SnackbarContent. |
description | The description of the SnackbarContent. |
closeButton | A button with a close icon on the corner of SnackbarContent, that allows users to close the Snackbar manually. |
actionButton | A button link on the right side of the SnackbarContent that triggers an action, such as navigating to a different link or opening a modal. |