Toast

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

Source code

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

Example

Code

Usage

Import the component


_10import { Toast } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

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)`

Data attributes

You can target and override Toast styles using the following data attributes:

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

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.