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:&nbsp;<span>NEW10</span>
</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

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

With Link

Get 10% off today: NEW10

Buy now

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

With Icon

Get 10% off today: NEW10

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

Plain

Get 10% off today: NEW10

<Alert>
  Get 10% off today:&nbsp;<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.

Accordion Breadcrumb