---
title: Toaster
description: >-
  A notification component that shows up from the bottom, in various states. For
  full props documentation, see [Sonner](https://sonner.emilkowal.ski/).
api_name: shop-minis
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

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

### Examples

* #### Toaster

  ##### Default

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

  ##### Default

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

  ##### Default

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