Alert

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

Source code

Example

Code

Dismissible Alert message

With Link

Alert message

With Link

Icon with Alert message

Alert message

Usage

Import the component


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

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/atoms/Alert/styles.scss";

For details, see Importing FastStore UI component styles.

Examples

Dismissible

Example

Code

Get 10% off today: NEW10

With Link

Example

Code

Get 10% off today: NEW10

Buy now

With Icon

Example

Code

Get 10% off today: NEW10

Plain

Example

Code

Get 10% off today: NEW10

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

Desing tokens: 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)`

Desing tokens: 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)`

Design tokens: Dismissible

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

Data attributes

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

data-fs-alert

data-fs-alert-content

data-fs-alert-link

data-fs-alert-button

data-fs-alert-dismissible="true"

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.

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.