Live code
Storybook
Usage
Alert
Alert presents feedback or important information to users.
import { Alert } from '@lmc-eu/spirit-web-react/components';
<Alert color="success">Hey! Pay attention!</Alert>
<Alert color="informative">Hey! Pay attention!</Alert>
<Alert color="warning">Hey! Pay attention!</Alert>
<Alert color="danger">Hey! Pay attention!</Alert>
<Alert color="informative" iconName="warning">Hey! Pay attention!</Alert>
<Alert color="informative" isCentered>Hey! Pay attention!</Alert>Default Icons according to Color Variant
| Color name | Icon name |
|---|---|
| danger | warning/danger* |
| default | info |
| informative | info |
| success | check-plain |
| warning | warning |
(*) The warning icon for the danger color has been marked as deprecated. Please make sure you have the danger icon in your project assets. The warning icon for the danger color will be removed in favor of the danger icon in the next major version.
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | — | ✔ | Content of the Alert |
| color | Emotion Color dictionary | success | ✕ | Color of the component |
| iconName | string | info * | ✕ | Icon used in Alert |
| isCentered . | bool | false | ✕ | If true, Alert is centered |
(*) For each emotion color, a default icon is defined. The icons come from the Icon package, or from your custom source of icons. Read the section Default Icons according to Color Variant.
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
For detailed information see Alert component.