Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__snapshots__
__tests__
Alert.stories.js
README.md
consts.js
index.js
index.js.flow

README.md

Alert

To implement Alert component into your project you'll need to add the import:

import Alert from "@kiwicom/orbit-components/lib/Alert";

After adding import into your project you can use it simply like:

<Alert>Hello World!</Alert>

Props

Table below contains all types of the props available in Alert component.

Name Type Default Description
children React.Node The content of the Alert.
closable boolean false If true, the Close icon will be displayed. See Functional specs
dataTest string Optional prop for testing purposes.
icon React.Element<any> | boolean The displayed icon. See Functional specs
onClose () => void Function for handling Alert onClose.
spaceAfter enum Additional margin-bottom after component. See this docs
title Translation The title of the Alert.
type enum "info" The type of Alert.

enum

type
"info"
"success"
"warning"
"critical"

Functional specs

  • By passing the closable prop into Alert, you will be able to handle onClose function and Close icon will be displayed. Also, if you want to select the Close Button element for testing purposes, use [data-test="AlertCloseButton"] selector.

  • If you set up icon props as true, Alert will have it's own icon, based on selected type. If you want to use different icon, just pass it to the icon prop as React.Element. Alert without icon prop doesn't have any icon.