Documentation
Feedback
Guides
Storefront Development

Storefront Development
Alert

Alerts display short messages related to the behavior of a system, feature, or page.

Overview

Example
Code

Dismissible Alert message

With Link

Alert message

With Link

Icon with Alert message

Alert message


Import

Import the component from @faststore/ui

_10
import { Alert } 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/atoms/Alert/styles.scss';

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

Usage

Get 10% off today: NEW10

Buy now

_10
<Alert
_10
icon={<Icon name="ShoppingCart" />}
_10
link={{ children: 'Buy now', href: '/', target: '_blank' }}
_10
dismissible
_10
>
_10
Get 10% off today:&nbsp;<span>NEW10</span>
_10
</Alert>


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-alert
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon component for additional customization.
dismissiblefalse | trueEnables dismissible feature.
linkLinkProps<"a">Extends all Link Props.
onClose(event: MouseEvent<HTMLElement, MouseEvent>) => voidFunction called when dismiss button is clicked.

Design Tokens

Local tokenDefault value/Global token linked
--fs-alert-heightvar(--fs-spacing-7)
--fs-alert-padding-leftvar(--fs-spacing-3)
--fs-alert-padding-rightvar(--fs-alert-padding-left)
--fs-alert-bkg-color
var(--fs-color-highlighted-bkg)
--fs-alert-text-color
var(--fs-color-highlighted-text)
--fs-alert-text-sizevar(--fs-text-size-1)

Nested Elements

Icon

Local tokenDefault value/Global token linked
--fs-alert-icon-widthvar(--fs-spacing-4)
--fs-alert-icon-heightvar(--fs-alert-icon-width)
--fs-alert-icon-margin-rightvar(--fs-spacing-1)
--fs-alert-icon-color
var(--fs-alert-text-color)

Link

Local tokenDefault value/Global token linked
--fs-alert-link-color
var(--fs-alert-text-color)
--fs-alert-link-color-visited
var(--fs-alert-text-color)

Dismissible Button

Local tokenDefault value/Global token linked
--fs-alert-button-text-color
var(--fs-alert-text-color)
--fs-alert-button-bkg-color
var(--fs-alert-bkg-color)
--fs-alert-button-border-radiusvar(--fs-border-radius)

Variants

Dismissible

Get 10% off today: NEW10


_10
<Alert dismissible>
_10
Get 10% off today:&nbsp;<span>NEW10</span>
_10
</Alert>

Get 10% off today: NEW10

Buy now

_10
<Alert link={{ children: 'Buy now', href: '#' }}>
_10
Get 10% off today:&nbsp;<span>NEW10</span>
_10
</Alert>

With Icon

Get 10% off today: NEW10


_10
<Alert icon={<Icon name="ShoppingCart" />}>
_10
Get 10% off today:&nbsp;<span>NEW10</span>
_10
</Alert>

Plain

Get 10% off today: NEW10


_10
<Alert>
_10
Get 10% off today:&nbsp;<span>NEW10</span>
_10
</Alert>


Customization

For further customization, you can use the following data attributes:
data-fs-alert
data-fs-alert-content
data-fs-alert-link
data-fs-alert-button
data-fs-alert-dismissible="true"

Best Practices

✅ Do's

  • Write short messages to inform about the behavior of a system, feature, or page. Consider using 30 to 40 characters max.

❌ Don'ts

  • Don't use long texts. Important information can be lost.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page