Toastercomponent
component
A notification component that shows up from the bottom, in various states.You can view the Storybook for more interactive examples.
Was this section helpful?
Toaster
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 />
</>
)
}
examples
Toaster
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 /> </> ) }
Preview
Anchor to examplesExamples
Toast notification types and usage
Anchor to example-success-toastSuccess toast
A success toast notification
Anchor to example-error-toastError toast
An error toast notification
Was this section helpful?
Success toast
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 />
</>
)
}
examples
Success toast
description
A success toast notification
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
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 /> </> ) }