Snackbar

Displays an important message globally. The component is also known as a toast.

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen.
They shouldn’t interrupt the user experience.

Only one snackbar may be displayed at a time.

Simple Snackbars

import { Button, Snackbar } from "@sonnat/ui";
import * as React from "react";

const Demo = () => {
  const [isOpen, setOpen] = React.useState(false);
  
  return (
    <React.Fragment>
      <Button
        label="Toggle Snackbar"
        variant="outlined"
        size="small"
        onClick={() => void setOpen(o => !o)}
      />
      <Snackbar
        text="This is a snackbar!"
        open={isOpen}
        closable
        onClose={() => void setOpen(false)}
      />
    </React.Fragment>
  );
};

export default Demo;

Placement

You can use placement property to change the snackbar's horizontal placement.

<Snackbar
  placement="center"
/>

Color

You can use color property to change the snackbar's color.

<Snackbar
  color="default"
/>

API

Learn more about the properties and the customization points.

Usage

import Snackbar from "@sonnat/ui/Snackbar";

//or
import { Snackbar } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.