🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

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


Import

Import the component from @faststore/ui

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:

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

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


Usage

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

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-heightvar(--fs-scale)
--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