Alert
Use to highlight information for the user that requires his attention.
Alerts can be position at the top of the page or into other components.
Version 0.10.0
StorybookInstallation
To install @igloo-ui/alert in your project, you will need to run the following command using npm:
npm install @igloo-ui/alert
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/alert
Usage
Then to use the component in your code just import it!
import Alert from '@igloo-ui/alert';
<Alert type="info" title="Alert title" message="Alert message" />;
API
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | - | The title of the alert |
message | ReactNode | - | The content to display inside the Alert |
metadata | ReactNode | - | Additional text to display at the top right of the Alert |
type | Type | - | Change the type of the Alert |
appearance | Appearance | Change the Alert appearance | |
className | string | - | Add a specific class to the Alert |
closable | boolean | Set if the Alert can be closed by the user | |
icon | ReactElement<any, string | JSXElementConstructor<any>> | - | Custom icon for alert (Use 'null' to have no icon) |
onClose | () => void | - | Action on Alert close button click |
button | AlertButton | - | Alert button |
dataTest | string | - | Add a data-test tag for automated tests |
link | HyperlinkProps | - | Alert Link. Used in place of the button |