Alert
Alerts display short messages related to the behavior of a system, feature, or page.
Overview
Example
Code
Import
Import the component from @faststore/ui
_10import { 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: <span>NEW10</span>_10</Alert>
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-alert |
| icon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon component for additional customization. | |
| dismissible | false | true | Enables dismissible feature. | |
| link | LinkProps<"a"> | Extends all Link Props. | |
| onClose | (event: MouseEvent<HTMLElement, MouseEvent>) => void | Function called when dismiss button is clicked. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-alert-height | var(--fs-spacing-7) |
--fs-alert-padding-left | var(--fs-spacing-3) |
--fs-alert-padding-right | var(--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-size | var(--fs-text-size-1) |
Nested Elements
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-alert-icon-width | var(--fs-spacing-4) |
--fs-alert-icon-height | var(--fs-alert-icon-width) |
--fs-alert-icon-margin-right | var(--fs-spacing-1) |
--fs-alert-icon-color | var(--fs-alert-text-color) |
Link
| Local token | Default 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 token | Default 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-radius | var(--fs-border-radius) |
Variants
Dismissible
Get 10% off today: NEW10
_10<Alert dismissible>_10 Get 10% off today: <span>NEW10</span>_10</Alert>
With Link
Get 10% off today: NEW10
Buy now
_10<Alert link={{ children: 'Buy now', href: '#' }}>_10 Get 10% off today: <span>NEW10</span>_10</Alert>
With Icon
Get 10% off today: NEW10
_10<Alert icon={<Icon name="ShoppingCart" />}>_10 Get 10% off today: <span>NEW10</span>_10</Alert>
Plain
Get 10% off today: NEW10
_10<Alert>_10 Get 10% off today: <span>NEW10</span>_10</Alert>
Customization
For further customization, you can use the following data attributes:
data-fs-alertdata-fs-alert-contentdata-fs-alert-linkdata-fs-alert-buttondata-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.