Snackbar

A Snackbar displays brief messages about app processes and dismisses automatically after a set time.

You can build a Snackbar using:

HvSnackbar – handles positioning, transitions, auto-hide, and more.
HvSnackbarContent – offers fine-grained control over the content and appearance.

Custom Icon

You can pass a custom icon to the snackbar by using the customIcon prop.

This is a snackbar with a custom icon.

<HvSnackbar
  open
  variant="success"
  label="This is a snackbar with a custom icon."
  customIcon={<Deploy />}
  style={{ position: "relative", top: 0 }}
/>

<HvSnackbar
  open
  variant="success"
  label="This is a snackbar with a custom icon."
  customIcon={<Deploy />}
  style={{ position: "relative", top: 0 }}
/>

Actions

Use the action prop to add an action to the snackbar. The onAction prop is a callback function that is called when the action is clicked.

This is a snackbar with a custom action.

<HvSnackbar
  open
  label="This is a snackbar with a custom action."
  variant="warning"
  customIcon={<Deploy />}
  action={{ id: "post", label: "Action", disabled: false }}
  onAction={(evt, action) => {
    alert(`Clicked ${action}`);
  }}
  style={{ position: "relative", top: 0 }}
/>

<HvSnackbar
  open
  label="This is a snackbar with a custom action."
  variant="warning"
  customIcon={<Deploy />}
  action={{ id: "post", label: "Action", disabled: false }}
  onAction={(evt, action) => {
    alert(`Clicked ${action}`);
  }}
  style={{ position: "relative", top: 0 }}
/>

Long content

Although not desirable, sometimes you may need to display a long message in the snackbar. You can combine the snackbar with the HvOverflowTooltip component to display the full message.

This message uses HvOverflowTooltip to display ellipsis and a tooltip.

This message uses HvOverflowTooltip with paragraphOverflow to display ellipsis and a tooltip because it has a very very very very very very very very very very long text that takes more than 3 lines.

<div className="flex flex-col gap-sm">
  <HvSnackbar
    open
    label={
      <HvOverflowTooltip data="This message uses HvOverflowTooltip to display ellipsis and a tooltip." />
    }
    style={{ position: "relative", top: 0 }}
  />
  <HvSnackbar
    open
    label={
      <HvOverflowTooltip
        paragraphOverflow
        data="This message uses HvOverflowTooltip with paragraphOverflow to display ellipsis and a tooltip because it has a very very very very very very very very very very long text that takes more than 3 lines."
      />
    }
    style={{ position: "relative", top: 0 }}
  />
</div>

<div className="flex flex-col gap-sm">
  <HvSnackbar
    open
    label={
      <HvOverflowTooltip data="This message uses HvOverflowTooltip to display ellipsis and a tooltip." />
    }
    style={{ position: "relative", top: 0 }}
  />
  <HvSnackbar
    open
    label={
      <HvOverflowTooltip
        paragraphOverflow
        data="This message uses HvOverflowTooltip with paragraphOverflow to display ellipsis and a tooltip because it has a very very very very very very very very very very long text that takes more than 3 lines."
      />
    }
    style={{ position: "relative", top: 0 }}
  />
</div>

Customization

You can customize the Snackbar by setting its position, transition direction, and auto-hide duration.

Use anchorOrigin to define its position on the screen.
Use transitionDirection to control how it appears and disappears.
Use setAutoHideDuration (in milliseconds) to specify how long it stays visible. When it closes, the onClose callback is triggered with the reason set to "timeout".

Transition direction

Autohide duration

import { useState } from "react";


export default function Demo() {
  const [open, setOpen] = useState(false);
  const [autoHideDuration, setAutoHideDuration] = useState(3000);
  const [anchorOrigin, setAnchorOrigin] = useState<
    HvSnackbarProps["anchorOrigin"]
  >({
    vertical: "top",
    horizontal: "right",
  });
  const [transitionDirection, setTransitionDirection] = useState("up");


  const handleOpen = (origin: HvSnackbarProps["anchorOrigin"]) => {
    setOpen(false);
    setTimeout(() => {
      setAnchorOrigin(origin);
      setOpen(true);
    }, 100);
  };


  return (
    <div className="flex justify-center w-full">
      <HvSnackbar
        open={open}
        label="Data saved successfully."
        variant="success"
        showIcon
        anchorOrigin={anchorOrigin}
        transitionDirection={transitionDirection}
        autoHideDuration={autoHideDuration}
        onClose={(evt, reason) => {
          setOpen(false);
        }}
      />
      <div className="flex flex-col gap-md">
        <div className="w-full flex justify-between">
          <HvSelect
            label="Transition direction"
            value={transitionDirection}
            onChange={(_, val) => {
              setOpen(false);
              setTransitionDirection(val);
            }}
            style={{ width: "120px" }}
          >
            {["up", "down", "left", "right"].map((direction) => (
              <HvOption key={direction} value={direction}>
                {direction}
              </HvOption>
            ))}
          </HvSelect>
          <HvInput
            label="Autohide duration"
            value={autoHideDuration}
            onChange={(_, val) => setAutoHideDuration(val)}
          />
        </div>
        <div className="flex gap-md w-full justify-between">
          <HvButton
            variant="primarySubtle"
            onClick={() => handleOpen({ vertical: "top", horizontal: "left" })}
          >
            Top Left
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "top", horizontal: "center" })
            }
          >
            Top Center
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() => handleOpen({ vertical: "top", horizontal: "right" })}
          >
            Top Right
          </HvButton>
        </div>


        <div className="flex gap-md w-full">
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "bottom", horizontal: "left" })
            }
          >
            Bottom Left
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "bottom", horizontal: "center" })
            }
          >
            Bottom Center
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "bottom", horizontal: "right" })
            }
          >
            Bottom Right
          </HvButton>
        </div>
      </div>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [open, setOpen] = useState(false);
  const [autoHideDuration, setAutoHideDuration] = useState(3000);
  const [anchorOrigin, setAnchorOrigin] = useState<
    HvSnackbarProps["anchorOrigin"]
  >({
    vertical: "top",
    horizontal: "right",
  });
  const [transitionDirection, setTransitionDirection] = useState("up");

  const handleOpen = (origin: HvSnackbarProps["anchorOrigin"]) => {
    setOpen(false);
    setTimeout(() => {
      setAnchorOrigin(origin);
      setOpen(true);
    }, 100);
  };

  return (
    <div className="flex justify-center w-full">
      <HvSnackbar
        open={open}
        label="Data saved successfully."
        variant="success"
        showIcon
        anchorOrigin={anchorOrigin}
        transitionDirection={transitionDirection}
        autoHideDuration={autoHideDuration}
        onClose={(evt, reason) => {
          setOpen(false);
        }}
      />
      <div className="flex flex-col gap-md">
        <div className="w-full flex justify-between">
          <HvSelect
            label="Transition direction"
            value={transitionDirection}
            onChange={(_, val) => {
              setOpen(false);
              setTransitionDirection(val);
            }}
            style={{ width: "120px" }}
          >
            {["up", "down", "left", "right"].map((direction) => (
              <HvOption key={direction} value={direction}>
                {direction}
              </HvOption>
            ))}
          </HvSelect>
          <HvInput
            label="Autohide duration"
            value={autoHideDuration}
            onChange={(_, val) => setAutoHideDuration(val)}
          />
        </div>
        <div className="flex gap-md w-full justify-between">
          <HvButton
            variant="primarySubtle"
            onClick={() => handleOpen({ vertical: "top", horizontal: "left" })}
          >
            Top Left
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "top", horizontal: "center" })
            }
          >
            Top Center
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() => handleOpen({ vertical: "top", horizontal: "right" })}
          >
            Top Right
          </HvButton>
        </div>

        <div className="flex gap-md w-full">
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "bottom", horizontal: "left" })
            }
          >
            Bottom Left
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "bottom", horizontal: "center" })
            }
          >
            Bottom Center
          </HvButton>
          <HvButton
            variant="primarySubtle"
            onClick={() =>
              handleOpen({ vertical: "bottom", horizontal: "right" })
            }
          >
            Bottom Right
          </HvButton>
        </div>
      </div>
    </div>
  );
}

Snackbar

Custom Icon

Actions

Long content

Customization

Related components