Toaster

A notification component that shows up from the bottom, in various states. For full props documentation, see Sonner.

Examples

tsx

import {Toaster, Button, toast} from '@shopify/shop-minis-react'

export default function MyComponent() {

const handleClick = () => {

toast.success('Success toast!')

}

return (

Show success Toast

</Button>

</>

)

}

Preview

Examples

tsx

import {Toaster, Button, toast} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const handleClick = () => {
    toast.success('Success toast!')
  }

  return (
    <>
      <Button onClick={handleClick}>
        Show success Toast
      </Button>
      <Toaster />
    </>
  )
}

Description

A success toast notification

tsx

import {Toaster, Button, toast} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const handleClick = () => {
    toast.success('Success toast!')
  }

  return (
    <>
      <Button onClick={handleClick}>
        Show success Toast
      </Button>
      <Toaster />
    </>
  )
}

Description

An error toast notification

tsx

import {Toaster, Button, toast} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const handleClick = () => {
    toast.error('Error toast!')
  }

  return (
    <>
      <Button onClick={handleClick}>
        Show error Toast
      </Button>
      <Toaster />
    </>
  )
}

Was this page helpful?