Toast

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


_10import { 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.

Name	Type	Description
title	`string`	Toast's title.
message*	`string`	Message shown in Toast.
status*	`'ERROR' \| 'WARNING' \| 'INFO'`	Toast's status type.
icon	`ReactNode`	A React component that will be rendered as toast's icon.

Design Tokens

Local token	Default value/Global token linked
`--fs-toast-width`	`calc(100% - (2 * var(--fs-spacing-3)))`
`--fs-toast-min-height`	`var(--fs-spacing-9)`
`--fs-toast-padding`	`var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-1) var(--fs-spacing-1)`
`--fs-toast-margin`	`var(--fs-spacing-3) var(--fs-spacing-3) 0 var(--fs-spacing-3)`

`--fs-toast-top-mobile`	`3.125rem`
`--fs-toast-top-tablet`	`6.25rem`

`--fs-toast-border-radius`	`var(--fs-border-radius-medium)`
`--fs-toast-border-width`	`var(--fs-border-width)`
`--fs-toast-border-color`	`transparent`

`--fs-toast-shadow`	`var(--fs-shadow-hover)`
`--fs-toast-bkg-color`	`var(--fs-color-neutral-0)`

`--fs-toast-transition-property`	`var(--fs-transition-property)`
`--fs-toast-transition-timing`	`var(--fs-transition-timing)`
`--fs-toast-transition-function`	`var(--fs-transition-function)`

Nested Elements

Icon

Local token	Default value/Global token linked
`--fs-toast-icon-container-min-width`	`var(--fs-spacing-7)`
`--fs-toast-icon-container-height`	`var(--fs-toast-icon-container-min-width)`
`--fs-toast-icon-container-bkg-color`	`var(--fs-color-primary-bkg-light)`
`--fs-toast-icon-container-border-radius`	`var(--fs-border-radius)`

Title

Local token	Default value/Global token linked
`--fs-toast-title-size`	`var(--fs-text-size-body)`
`--fs-toast-title-weight`	`var(--fs-text-weight-bold)`
`--fs-toast-title-line-height`	`1.2`
`--fs-toast-title-margin-left`	`var(--fs-spacing-3)`

Message

Local token	Default value/Global token linked
`--fs-toast-message-size`	`var(--fs-toast-title-size)`
`--fs-toast-message-line-height`	`var(--fs-toast-title-line-height)`
`--fs-toast-message-margin-left`	`var(--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