Toaster

Toasters provide brief feedback about an operation through a message at the bottom of the screen.

#Usage

import { useState } from 'react'
import { Toaster } from '@kinsta/stratus'

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <button onClick={() => setIsVisible(true)}>
        Open Toaster
      </button>

      <Toaster
        type="success"
        title="You managed to open this. You are a marvel."
        isOpen={isVisible}
        onCancel={() => setIsVisible(false)}
      />
    </>
  )
}
Copy

#Props

#Types

• ToasterProps: props of the Toaster component processed by stratus
• NotificationType: strings that identify the type of notification ("success" ǀ "info" ǀ "warning" ǀ "error")

Read more about types here

#See also

• useToaster

  Copy
  hook