Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
Toast

Toasts are used to display notifications. They appear temporarily, and should contain a single line of text directly related to the operation performed.

Toasts are used to display notifications. They appear temporarily, and should contain a single line of text directly related to the operation performed.

Overview

Example
Code

Import

Import the component from @faststore/ui

_10
import { Toast } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

_10
@import '@faststore/ui/src/components/molecules/Toast/styles.scss'

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage


_22
const Toast = () => {
_22
const { toasts, pushToast } = useUI()
_22
return (
_22
<>
_22
<Button
_22
variant="primary"
_22
onClick={() =>
_22
pushToast({
_22
title: 'Hooray!',
_22
message: 'Thank for your Click.',
_22
status: 'INFO',
_22
icon: <Icon name="SealCheck" width={30} height={30} />,
_22
})
_22
}
_22
style={{ width: '16rem' }}
_22
>
_22
Info Toast
_22
</Button>
_22
{toasts.length > 0 && <Toast />}
_22
</>
_22
)
_22
}


Props

Toast's props are in the object passed as an argument by pushToast(toast: Props) method.

NameTypeDescriptionDefault
titlestringToast's title.
message*stringMessage shown in Toast.
status*'ERROR' | 'WARNING' | 'INFO'Toast's status type.
iconReactNodeA React component that will be rendered as toast's icon.

Design Tokens

Local tokenDefault value/Global token linked
--fs-toast-widthcalc(100% - (2 * var(--fs-spacing-3)))
--fs-toast-min-heightvar(--fs-spacing-9)
--fs-toast-paddingvar(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-1) var(--fs-spacing-1)
--fs-toast-marginvar(--fs-spacing-3) var(--fs-spacing-3) 0 var(--fs-spacing-3)
--fs-toast-top-mobile3.125rem
--fs-toast-top-tablet6.25rem
--fs-toast-border-radiusvar(--fs-border-radius-medium)
--fs-toast-border-widthvar(--fs-border-width)
--fs-toast-border-color
transparent
--fs-toast-shadowvar(--fs-shadow-hover)
--fs-toast-bkg-color
var(--fs-color-neutral-0)
--fs-toast-transition-propertyvar(--fs-transition-property)
--fs-toast-transition-timingvar(--fs-transition-timing)
--fs-toast-transition-functionvar(--fs-transition-function)

Nested Elements

Icon

Local tokenDefault value/Global token linked
--fs-toast-icon-container-min-widthvar(--fs-spacing-7)
--fs-toast-icon-container-heightvar(--fs-toast-icon-container-min-width)
--fs-toast-icon-container-bkg-color
var(--fs-color-primary-bkg-light)
--fs-toast-icon-container-border-radiusvar(--fs-border-radius)

Title

Local tokenDefault value/Global token linked
--fs-toast-title-sizevar(--fs-text-size-body)
--fs-toast-title-weightvar(--fs-text-weight-bold)
--fs-toast-title-line-height1.2
--fs-toast-title-margin-leftvar(--fs-spacing-3)

Message

Local tokenDefault value/Global token linked
--fs-toast-message-sizevar(--fs-toast-title-size)
--fs-toast-message-line-heightvar(--fs-toast-title-line-height)
--fs-toast-message-margin-leftvar(--fs-spacing-3)

Customization

data-fs-toast
data-fs-toast-visible="true | false"
data-fs-toast-icon-container
data-fs-toast-content
data-fs-toast-title
data-fs-toast-message
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page