toast

Toast

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/toast

NPM

npm install @leafygreen-ui/toast

Example

import Toast from '@leafygreen-ui/toast';

const [toastOpen, setToastOpen] = useState(true);

return (
  <Toast
    variant="success"
    title="This is a title"
    body="This is a description"
    open={toastOpen}
    close={() => setToastOpen(false)}
  />
);

Output HTML

<div role="status" aria-live="polite" aria-atomic="true" aria-relevant="all">
  <div class="leafygreen-ui-r1u4g0">
    <div class="leafygreen-ui-1lymiei">
      <svg
        class="leafygreen-ui-1b4llpu"
        height="30"
        width="30"
        aria-hidden="true"
        viewBox="0 0 16 16"
        role="img"
      >
        <title>Checkmark With Circle Icon</title>
        <g
          id="Glyphs-/-Checkmark-With-Circle"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <path d="..." fill="currentColor"></path>
        </g>
      </svg>

      <div>
        <p class="leafygreen-ui-d2tjkm">This is a title</p>
        <p class="leafygreen-ui-10eu8wb">This is a description</p>
      </div>
    </div>

    <button
      tabindex="0"
      aria-disabled="false"
      aria-label="Close Message"
      class="leafygreen-ui-ptvv4q"
    >
      <div class="leafygreen-ui-xhlipt">
        <svg class="" height="16" width="16" viewBox="0 0 16 16" role="img">
          <g
            id="X-Copy"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <path
              d="..."
              fill="currentColor"
              transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) "
            ></path>
          </g>
        </svg>
      </div>
    </button>
  </div>
</div>

Properties

Prop	Type	Description	Default
title	ReactNode	Optional text shown in bold above the body text.
body (Required)	ReactNode	Main text for the Toast.
className	string	Optional className passed to the wrapping <div /> for the toast.
variant (Required)	'success', 'note', 'warning', 'important', 'progress'	Style variant to render the Toast as.
progress	number (0...1)	Optional number between 0 and 1 that sets the progress bar's progress. Note that the progress bar is only rendered when the Toast variant is set to 'progress'.	1
open	boolean	Optional boolean that renders the Toast and makes it visible when true.	false
close	function (MouseEventHandler)	Optional click event handler that, when set, renders a close button that receives the passed handler.
darkMode	boolean	Determines if the component renders in dark theme	false