Toast

The Toast component is used to display notifications to the user. The Toast.Root component can be used either controlled or uncontrolled. When used uncontrolled, the Toast.Root component automatically handles the open state of the toast. When used controlled, the Toast.Root component can be controlled by providing the open and onOpenChange props.

Usage

import { Toast } from '@harnessio/ui/components'

//...

return (
  <Toast.Provider> {/* typically placed at the root of the app */}
    <Toast.Root>
      <Toast.Title>Toast title</Toast.Title>
      <Toast.Description>Toast description</Toast.Description>
      <Toast.Close />
    </Toast.Root>
    <Toast.Viewport />
  </Toast.Provider>
)

Anatomy

All parts of the Toast component can be imported and composed as required.

<Toast.Provider>
  <Toast.Root>
    <Toast.Title />
    <Toast.Description />
    <Toast.Close />
    <Toast.Action />
  </Toast.Root>
  <Toast.Viewport />
</Toast.Provider>

API Reference

Provider

The Provider component is used to provide the Toast context to the rest of the app. It is typically placed at the root of the app.

<Toast.Provider
  label="Notification" // [OPTIONAL] label for screen readers
  duration={5000}      // [OPTIONAL] duration of the toast in milliseconds
swipeDirection="right" // [OPTIONAL] direction in which the toast can be swiped to dismiss
swipeThreshold={50}    // [OPTIONAL] distance in pixels at which the toast can be swiped to dismiss
>
  {/* Toast roots and viewport */}
</Toast.Provider>

Prop	Required	Default	Type
label	false	Notification	string
duration	false	5000	number
swipeDirection	false	right	'left' | 'right' | 'up' | 'down'
swipeThreshold	false	50	number

Root

The Root component is used to wrap the content of the toast. The Root component can be used either controlled or uncontrolled. When used uncontrolled, the Root component automatically handles the open state of the toast. When used controlled, the Root component can be controlled by providing the open and onOpenChange props.

<Toast.Root
  variant="default"       // [OPTIONAL] variant of the toast, can be 'default', 'destructive', 'success'
  open                    // [OPTIONAL] whether the toast is open or closed
  onOpenChange={onChange} // [OPTIONAL] callback when the toast is opened or closed
  defaultOpen             // [OPTIONAL] whether the toast is open by default
  forceMount              // [OPTIONAL] whether the toast should be mounted even if it is not open
  className="class"       // [OPTIONAL] className for the root element
>
  <Toast.Title>Toast title</Toast.Title>
  <Toast.Description>Toast description</Toast.Description>
  <Toast.Close />
</Toast.Root>

Prop	Required	Default	Type
variant	false	default	'default' | 'destructive' | 'success'
open	false		boolean
onOpenChange	false		(open: boolean) => void
defaultOpen	false		boolean
forceMount	false		boolean
className	false		string

Title

The Title component is used to display the title of the toast.

<Toast.Title
  className="class" // [OPTIONAL] className for the title element
>
  Toast title
</Toast.Title>

Prop	Required	Default	Type
className	false		string

Description

The Description component is used to display the description of the toast.

<Toast.Description
  className="class" // [OPTIONAL] className for the description element
>
  Toast description
</Toast.Description>

Prop	Required	Default	Type
className	false		string

Close

The Close component is used to close the toast.

<Toast.Close
  className="class" // [OPTIONAL] className for the close button element
  asChild           // [OPTIONAL] render the close button as the child
  onClick={onClick} // [OPTIONAL] callback when the close button is clicked
>
  <button>Close</button>
</Toast.Close>

Prop	Required	Default	Type
className	false		string
asChild	false		boolean
onClick	false		() => void

Action

The Action component is used to display a call-to-action button in the toast.

<Toast.Action
  className="class" // [OPTIONAL] className for the action button element
  asChild           // [OPTIONAL] render the action button as the child
  onClick={onClick} // [OPTIONAL] callback when the action button is clicked
>
  <button>Approve</button>
</Toast.Action>

Prop	Required	Default	Type
className	false		string
asChild	false		boolean
onClick	false		() => void

Viewport

The Viewport component is used to display the toast in the viewport.

<Toast.Viewport
  hotkey={['f8']}                  // [OPTIONAL] hotkey to focus the toast
  label="Notifications ({hotkey})" // [OPTIONAL] label for screen readers
  className="class"                // [OPTIONAL] className for the viewport element
/>

Prop	Required	Default	Type
hotkey	false		string[]
label	false		string
className	false		string