Toasts display brief, temporary notifications of actions, errors, or other events in an application.

Toast adheres to the ARIA live requirements.

Import

import { Toast } from "@fuegokit/react";

Usage

<Toast.Provider swipeDirection="right" duration={3000}>
  <Button
    onClick={() => {
      setOpen(false)
      window.clearTimeout(timerRef.current)
      timerRef.current = window.setTimeout(() => {
        eventDateRef.current = oneWeekAway()
        setOpen(true)
      }, 100)

Styling

To apply styles to the Toast primitive, use Fuegokit React's themeGet function to access Fuegokit Tokens directly.

Component API

const StyledToastExample = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <Toast.Provider duration={Infinity}>
      <AtlasButton
        onClick={() => {
          setOpen(!open);
        }}

CSS

/react/src/Toast/stories/StoryStyles.tsx

const hide = keyframes`
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
`;
const slideIn = keyframes`

Accessibility

Toast adheres to the ARIA live requirements.

Sensitivity

Control the sensitivity of the toast for screen readers using the type prop.

For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.

Foreground

Foreground toasts are announced immediately.

Assistive technologies may choose to clear previously queued messages when a foreground toast appears. Try to avoid stacking distinct foreground toasts at the same time.

Background

Background toasts are announced at the next graceful opportunity, for example, when the screen reader has finished reading its current sentence.

They do not clear queued messages so overusing them can be perceived as a laggy user experience for screen reader users when used in response to a user interaction.

Anatomy

A toast consists of a provider, an input which displays the current value, a list box popup, and an optional button used to toggle the list box popup open state.

Props

Toast

The toast that automatically closes. It should not be held open to acquire a user response.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
type	'foreground' \| 'background'	'foreground'	Control the sensitivity of the toast for accessibility purposes. For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.
duration	number	-	The time in milliseconds that should elapse before automatically closing the toast. This will override the value supplied to the provider.
defaultOpen	boolean	true	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
open	boolean	-	The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.

Events

Name	Type	Default	Description
onEscapeKeyDown	(event: KeyboardEvent) => void	-	Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
onPause	(event: KeyboardEvent) => void	-	Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
onResume	() => void	-	Event handler called when the dismiss timer is resumed. This occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.
onSwipeStart	(event: SwipeEvent) => void	-	Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.
onSwipeMove	(event: SwipeEvent) => void	-	Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.
onSwipeEnd	(event: SwipeEvent) => void	-	Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Data attributes

Data attribute	Values
[data-state]	'open' \| 'closed'
[data-swipe]	'start' \| 'move' \| 'cancel' \| 'end'
[data-swipe-direction]	'up' \| 'down' \| 'left' \| 'right'

Toast.Provider

The provider that wraps your toasts and toast viewport. It usually wraps the application.

Name	Type	Default	Description
duration	number	5000	The time in milliseconds that should elapse before automatically closing each toast.
label*	string	'Notification'	An author-localized label for each toast. Used to help screen reader users associate the interruption with a toast.
swipeDirection	'right' \| 'left' \| 'up' \| 'down'	'right'	The direction of the pointer swipe that should close the toast.
swipeThreshold	number	50	The distance in pixels that the swipe gesture must travel before a close is triggered.

Toast.Viewport

The fixed area where toasts appear. Users can jump to the viewport by pressing a hotkey. It is up to you to ensure the discoverability of the hotkey for keyboard users.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
hotkey	string[]	['F8']	The keys to use as the keyboard shortcut that will move focus to the toast viewport. Use event.code value for each key from keycode.info. For meta keys, use ctrlKey, shiftKey, altKey and/or metaKey.
hotkey	string	'Notifications ({hotkey})	An author-localized label for the toast region to provide context for screen reader users when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.

Toast.Title

An optional title for the toast.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Toast.Description

The toast message.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Toast.Action

An action that is safe to ignore to ensure users are not expected to complete tasks with unexpected side effects as a result of a time limit. When obtaining a user response is necessary, portal an AlertDialog styled as a toast into the viewport instead.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
altText*	string	-	Describe an alternative way to achieve the action for screen reader users who cannot access the toast easily.

Toast.Close

A button that allows users to dismiss the toast before its duration has elapsed.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.