Igloo branding

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.

Installation

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

PropTypeDescription
titleReactNodeThe title of the alert
messageReactNodeThe content to display inside the Alert
metadataReactNodeAdditional text to display at the top right of the Alert
typeTypeChange the type of the Alert
appearanceAppearanceChange the Alert appearance
classNamestringAdd a specific class to the Alert
closablebooleanSet if the Alert can be closed by the user
iconReactElement<any, string | JSXElementConstructor<any>>Custom icon for alert (Use 'null' to have no icon)
onClose() => voidAction on Alert close button click
buttonAlertButtonAlert button
dataTeststringAdd a data-test tag for automated tests
linkHyperlinkPropsAlert Link. Used in place of the button