Snackbar

A Snackbar provides brief, temporary notifications. They are presented at the bottom of the screen and are noticeable without disrupting the user experience. Snackbars are managed through the NotificationsProvider and the useNotifications hook.

<Snackbar>
  Commodi crapula culpa.
</Snackbar>

Features

Dismiss Callback

An onDismiss callback can be provided, which will cause the Snackbar to display a close button.

<Snackbar onDismiss={() => alert("Dismissed")}>
  Arcus quam cuius video.
</Snackbar>

Timer

Snackbars can be configured to display a progress bar that indicates the remaining duration of a Timer. The timer can be configured to dismiss the snackbar when it completes. The timer is automatically started when the snackbar is rendered, and is paused when the user hovers over the snackbar.

function Example() {
  const loop = new Timer(() => loop.start(), 5000);

  return (
    <Snackbar onDismiss={() => {}} timer={loop}>
      Nam adstringo aequus denuncio.
    </Snackbar>
  );

}

Variant

As the Snackbar component inherits from the Surface component, it can be styled with the variant prop.

<Snackbar variant="warning" border={{ width: 100 }} onDismiss={() => {}}>
  Thema quibusdam cultura cuius consequuntur.
</Snackbar>

Shape

The Snackbar component can be styled with the shape prop to change the shape of the snackbar.

<Snackbar shape="stadium" onDismiss={() => {}}>
  Cotidie suppono adnuo sed aurum stillicidium agnitio synagoga vergo cornu.
</Snackbar>

Custom Content

While the add function accepts a string for simple messages, you can also pass a ReactNode for more complex content.

<Snackbar onDismiss={() => {}}>
  <Row gap={400} align="center">
    <Icon.Check text={{ color: "success.base" }} />
    <Text>Patria administratio cibo eos aiunt acies venio.</Text>
  </Row>
</Snackbar>

React Notifications Integration

The @codedazur/react-notifications package provides a context and hook that can be used to manage snackbars and other notifications from anywhere in your application. It is included by default if you wrap your application in Fusion’s App component.

function Example() {
  const { add } = useNotifications();

  return (
    <Button onClick={() => add(faker.lorem.sentence())}>
      Add Snackbar
    </Button>
  );

}

Anatomy

Reference

Props

The Snackbar component inherits all props from the Surface component, and the following props are specific to the Snackbar component.

See react-notifications for more details.

Tokens