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.

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

Tag Toggle