Snackbar

A Snackbar component that displays brief messages about app processes. The snackbar appears at the bottom of the screen and automatically disappears after a few seconds.

function SnackbarExample() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      {!open && <Button onClick={() => setOpen(true)}>Show Snackbar</Button>}
      {open && (
        <Snackbar
          variant="success"
          title="Operation completed successfully"
          subtitle="Your changes have been saved"
          close={true}
          onClose={() => setOpen(false)}
          onButtonClick={() => alert('Button clicked')}
          buttonLabel="Undo"
        />
      )}
    </div>
  );
}

Props

variant

required

Typeliteral

Visual style variant of the snackbar

title

required

Typestring

Main message displayed in the snackbar

buttonLabel

Typestring

Label for the action button

close

Typeboolean

Defaultfalse

Whether to show the close button

onButtonClick

Typesignature

Callback fired when the action button is clicked

onClose

Typesignature

Callback fired when the snackbar is closed

subtitle

Typestring

Optional secondary message displayed below the title

CSS Variables

Radius

--ax-public-snackbar-border-radius

Size

--ax-public-snackbar-border-size

--ax-public-snackbar-width

Color

--ax-public-snackbar-close-icon-color

--ax-public-snackbar-default-background

--ax-public-snackbar-default-icon-color

--ax-public-snackbar-error-background

--ax-public-snackbar-error-icon-color

--ax-public-snackbar-info-background

--ax-public-snackbar-info-icon-color

--ax-public-snackbar-subtitle-color

--ax-public-snackbar-success-background

--ax-public-snackbar-success-icon-color

--ax-public-snackbar-title-color

--ax-public-snackbar-warning-background

--ax-public-snackbar-warning-icon-color

Spacing

--ax-public-snackbar-content-gap

--ax-public-snackbar-padding

Miscellaneous

--ax-public-snackbar-default-border

--ax-public-snackbar-error-border

--ax-public-snackbar-info-border

--ax-public-snackbar-success-border

--ax-public-snackbar-warning-border