Toaster

Examples

• Toaster

  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 />
      </>
    )
  }

• Success toast

  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 />
      </>
    )
  }

• Error toast

  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 />
      </>
    )
  }