# @leafygreen-ui/toast > leafyGreen UI Kit Toast Latest version **8.1.3** (published 2026-01-21) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/toast pnpm add @leafygreen-ui/toast yarn add @leafygreen-ui/toast bun add @leafygreen-ui/toast ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 8.1.3 | | Published | 2026-01-21 | | First published | 2020-09-03 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 12 | | Unpacked size | 470.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 273 | | Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/toast - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/toast - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/toast ## Dependencies (12) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [polished](https://npm.io/package/polished.md) ^4.2.2 - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.0 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.8.0 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.1 - [@leafygreen-ui/portal](https://npm.io/package/@leafygreen-ui/portal.md) ^7.1.0 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.2 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.0 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.2 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.4 - [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.5 ## Recent versions - 8.1.3 (latest) — 2026-01-21 - 6.1.10 (beta) — 2023-07-26 - 7.0.0-alpha.1 (alpha) — 2023-07-20 - 6.1.5-next.7 (next) — 2023-05-26 - 2.0.1-test.1 (test) — 2022-09-29 - 8.1.2 — 2025-11-24 - 8.1.1 — 2025-11-13 - 8.1.0 — 2025-10-31 - 8.0.8 — 2025-10-21 - 8.0.7 — 2025-09-25 - 8.0.6 — 2025-09-10 - 8.0.5 — 2025-09-03 - 8.0.4 — 2025-07-28 - 8.0.3 — 2025-07-03 - 8.0.2 — 2025-06-30 - … 96 more at https://npm.io/package/@leafygreen-ui/toast/versions ## README # Toast ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/toast.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/toast/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/toast ``` ### Yarn ```shell yarn add @leafygreen-ui/toast ``` ### NPM ```shell npm install @leafygreen-ui/toast ``` ## Example ```js import Button from '@leafygreen-ui/button'; import { ToastProvider, useToast, Variant } from '@leafygreen-ui/toast'; const { pushToast, clearStack, getStack, updateToast } = useToast(); const stack = getStack(); const createToast = () => { pushToast({ title: 'Toast Title', description: 'Toast Description', variant: Variant.Success, timeout: null, }); }; return ( ); ``` ## Properties, useToast useToast is a React hook that enables a consumer to interact with a Toast stack. It may only be used inside of a ``. The hook takes no arguments and returns the following functions: | Name | Signature | | ----------- | ------------------------------------------------------------------------ | | pushToast | `(payload: ToastProps) => ToastId` | | popToast | `(payload: ToastId) => ToastProps \| undefined` | | updateToast | `(id: ToastId, props: Partial, ) => ToastProps \| undefined` | | getToast | `(id: ToastId) => ToastProps \| undefined` | | getStack | `() => ToastStack \|undefined` | | clearStack | `() => void` | ## Properties, ToastProvider | Prop | Type | Default | Description | | --------------- | ------------------------- | ------- | ----------------------------------------------------- | | initialValue | Map; | | The initial toasts in the stack. | | portalClassName | `string` | | Class name applied to the containing Portal component | ## Properties, Controlled Toast | Prop | Type | Default | Description | | ---------------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | actionElement | `React.ReactNode ` | | Optional action button, or other element. Only rendered if `variant === 'progress'`. This should be a shortcut only—and not the _only_ way to perform the action. The provided action element should have an `aria-description` attribute that describes how to alternatively perform the action. | | darkMode | `boolean` | `false` | Renders the component with dark mode styles. | | description | `React.ReactNode ` | | Additional body text | | dismissible | `boolean` | `true` | Determines whether to render the close button. If `timeout === null`, then `dismissible` is forced to `true`. | | onClose | `(event: ToastCloseEvent) => void` | | Fired either when the close button is clicked, or when timeout has elapsed. When triggered by button click, `event.type === "click"`. When triggered by timeout, `event.type === "timeout"`. | | open _required_ | `boolean` | | Required boolean that renders the Toast and makes it visible when true. Note: open is not a valid prop when rendering toasts programmatically | | progress | `number` | | Optional number between 0 and 1 that sets the progress bar's progress. Note: the progress bar is only rendered when the Toast variant is set to `'progress'`. | | timeout | `number \| null ` | `6000` | Dismiss the Toast after `timeout` milliseconds. If timeout is `null` or `0`, the Toast will never dismiss automatically. Notes:
  • when `variant="progress"`, `timeout` timer will not start until progress is complete.
  • `timeout` timer will be paused when a user is interacting with a Toast.
| | title _required_ | `React.ReactNode` | | Primary text for the toast | | variant | `'success' 'note' 'warning' 'progress' 'important'` | `note` | Required style variant to render the Toast as. | --- _Source: https://npm.io/package/@leafygreen-ui/toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._