Snackbar

A Snackbar provides brief messages about app processes. It is dismissed automatically after a given interval. Snackbar can be built with two different components. One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc. The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.

Source Code

uikit-react-core

This is an informational message.

label

variant

showIcon

<HvSnackbar 
  label="This is an informational message."
  variant="default"
  showIcon
  open
/>

<HvSnackbar 
  label="This is an informational message."
  variant="default"
  showIcon
  open
/>

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 color="base_dark" />}
  style={{ position: "relative", top: 0 }}
/>

<HvSnackbar
  open
  variant="success"
  label="This is a snackbar with a custom icon."
  customIcon={<Deploy color="base_dark" />}
  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={<Info color="base_dark" />}
  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={<Info color="base_dark" />}
  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-2">
  <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-2">
  <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 and change it’s position, transition direction and autohide duration,.

You can specify the position of the snackbar by using the anchorOrigin prop. To set the transition direction of the snackbar use the transitionDirection prop.

The setAutoHideDuration prop is used to specify the duration in milliseconds after which the snackbar will automatically close. This will trigger the onClose callback of the snackbar component 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);
  };


  const handleTransition = (val) => {
    setOpen(false);
    setTransitionDirection(val);
  };


  const handleClose = (_, reason) => {
    if (reason === "timeout") {
      setOpen(false);
    }
  };


  const handleDurationChange = (_, val) => {
    setAutoHideDuration(val);
  };


  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={handleClose}
      />
      <div className="flex flex-col gap-4">
        <div className="w-full flex justify-between">
          <HvSelect
            label="Transition direction"
            value={transitionDirection}
            onChange={(_, val) => handleTransition(val)}
            style={{ width: "120px" }}
          >
            {["up", "down", "left", "right"].map((direction) => (
              <HvOption key={direction} value={direction}>
                {direction}
              </HvOption>
            ))}
          </HvSelect>
          <HvInput
            type="number"
            label="Autohide duration"
            value={autoHideDuration}
            onChange={handleDurationChange}
          />
        </div>
        <div className="flex gap-4 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-4 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);
  };

  const handleTransition = (val) => {
    setOpen(false);
    setTransitionDirection(val);
  };

  const handleClose = (_, reason) => {
    if (reason === "timeout") {
      setOpen(false);
    }
  };

  const handleDurationChange = (_, val) => {
    setAutoHideDuration(val);
  };

  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={handleClose}
      />
      <div className="flex flex-col gap-4">
        <div className="w-full flex justify-between">
          <HvSelect
            label="Transition direction"
            value={transitionDirection}
            onChange={(_, val) => handleTransition(val)}
            style={{ width: "120px" }}
          >
            {["up", "down", "left", "right"].map((direction) => (
              <HvOption key={direction} value={direction}>
                {direction}
              </HvOption>
            ))}
          </HvSelect>
          <HvInput
            type="number"
            label="Autohide duration"
            value={autoHideDuration}
            onChange={handleDurationChange}
          />
        </div>
        <div className="flex gap-4 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-4 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>
  );
}

Slider Switch