Alert
Alerts display short messages related to the behavior of a system, feature or page.
Overview
Import
Import the component from @faststore/ui
import { Alert } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/atoms/Alert/styles.scss'Usage
Get 10% off today: NEW10
Buy now<Alert
icon={<Icon name="ShoppingCart" />}
link={{ children: 'Buy now', href: '/', target: '_blank' }}
dismissible
>
Get 10% off today: <span>NEW10</span>
</Alert>Props
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
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
<Alert dismissible>
Get 10% off today: <span>NEW10</span>
</Alert>With Link
Get 10% off today: NEW10
Buy now<Alert link={{ children: 'Buy now', href: '#' }}>
Get 10% off today: <span>NEW10</span>
</Alert>With Icon
Get 10% off today: NEW10
<Alert icon={<Icon name="ShoppingCart" />}>
Get 10% off today: <span>NEW10</span>
</Alert>Plain
Get 10% off today: NEW10
<Alert>
Get 10% off today: <span>NEW10</span>
</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.