Snackbar

warning

This component will soon be deprecated. Please, use Toast instead. Please note that OffsetRight prop will be deprecated within Snackbar component and it's not supported in Toast component.

Snackbars display important information that informs the user about the consequence of an action – e.g. "Chart deleted". They are semantically categorized and colored to reflect the status.

Snackbars are superimposed on the UI, positioned in the top-right corner of the viewport. They self-dismiss after a certain delay.

Example

Live Editor

function snackbarExample() { const MyButton = () => { const openSnackbar = useContext(SnackbarContext); return ( <Button label="Open Snackbar Item" onClick={() => { openSnackbar({ title: 'Item successfully deleted', action: { label: 'Undo', onClick: () => {}, dataTestId: 'snackbar-button' }, isClosable: true, kind: 'positive' }); }} /> ); }; return ( <SnackbarProvider offsetTop={76}> <MyButton /> </SnackbarProvider> ); }

function snackbarExample() {
  const MyButton = () => {
    const openSnackbar = useContext(SnackbarContext);

    return (
      <Button
        label="Open Snackbar Item"
        onClick={() => {
          openSnackbar({
            title: 'Item successfully deleted',
            action: {
              label: 'Undo',
              onClick: () => {},
              dataTestId: 'snackbar-button'
            },
            isClosable: true,
            kind: 'positive'
          });
        }}
      />
    );
  };

  return (
    <SnackbarProvider offsetTop={76}>
      <MyButton />
    </SnackbarProvider>
  );
}

Result

Loading...

Usage

To set up the Snackbar component you need to wrap your component tree with the SnackbarProvider.

// App.js

import { SnackbarProvider } from '@adjust/components';

export default function() {
  return (
    <SnackbarProvider>
      {...}
    </SnackbarProvider>
  );
}

Through the SnackbarProvider your components will have access to a helper function for showing Snackbar items. Access this function via SnackbarContext like this:

// MyComponent.js

import { useContext } from 'react';
import { SnackbarContext, Button } from '@adjust/components';

export default function YourComponent() {
  const openSnackbar = useContext(SnackbarContext);

  return (
    <Button
      label="Open Snackbar Item"
      onClick={() => {
        openSnackbar({
          title: 'Item deleted',
          action: { label: 'Undo', onClick: () => {} }
        });
      }}
    />
  );
}

The openSnackbar function accepts a title, an optional action, an optional isClosable and an optional severity (kind).

Variants

Kind

The kind prop lets you set the severity of snackbar messages and give it a semantic meaning.

Four different options are available: neutral, positive, warning and negative.

Live Editor

function snackbarExample() { const MyButton = ({ kind }) => { const openSnackbar = useContext(SnackbarContext); return ( <Button label={kind} onClick={() => { openSnackbar({ title: kind, kind }); }} /> ); }; return ( <SnackbarProvider offsetTop={76}> <MyButton kind="neutral" /> <MyButton kind="positive" /> <MyButton kind="warning" /> <MyButton kind="negative" /> </SnackbarProvider> ); }

function snackbarExample() {
  const MyButton = ({ kind }) => {
    const openSnackbar = useContext(SnackbarContext);

    return (
      <Button
        label={kind}
        onClick={() => {
          openSnackbar({
            title: kind,
            kind
          });
        }}
      />
    );
  };

  return (
    <SnackbarProvider offsetTop={76}>
      <MyButton kind="neutral" />
      <MyButton kind="positive" />
      <MyButton kind="warning" />
      <MyButton kind="negative" />
    </SnackbarProvider>
  );
}

Result

Loading...

Props

Properties of the SnackbarProvider:

Name	Type	Default
offsetTop Adjust the distance to the top of the screen	number	16
offsetRight Adjust the distance to the right of the screen	number	16
children Children of the Snackbar Provider	ReactNode	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

The object structure for individual snackbar items passed into openSnackbar:

Name	Type	Default
title A short headline	string	—
kind Type of the Snackbar	"neutral" | "negative" | "positive" | "warning"	"neutral"
action Optional action button to be shown in the Snackbar	{ label: string; onClick: () => void; dataTestId?: string; }	—
isClosable Optional prop to show close button in the Snackbar	boolean	false
dataTestId A test id to be used by testing libraries. It will be added as a "data-testid" attribute on the container of the snackbar item	string	—
* - the prop is required.