---
title: Toaster
description: 'A notification component that shows up from the bottom, in various states.'
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/toaster'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/toaster.md'
---

# Toaster

A notification component that shows up from the bottom, in various states. For full props documentation, see [Sonner](https://sonner.emilkowal.ski/).

Examples

## Preview

![toaster](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Toaster-qCBDq-jv.png)

### Examples

* ####

  ##### tsx

  ```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

  ```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

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

***