Alert

Alert

import Alert from "@kiwicom/orbit-components/lib/Alert";
<Alert>Hello World!</Alert>

Props

NameTypeDefaultDescription
childrenReact.NodeThe content of the Alert.
closablebooleanfalseIf true, the Close icon will be displayed. See Functional specs
dataTeststringOptional prop for testing purposes.
idstringSet id for Alert
iconReact.Element<any> \| booleanThe displayed icon. See Functional specs
inlineActionsReact.NodeRenders action to a right side of a Alert. See Functional specs
onClose() => void \| PromiseFunction for handling Alert onClose.
spaceAfterenumAdditional margin-bottom after component. See this docs
titleTranslationThe title of the Alert.
typeenum"info"The type of Alert.
suppressedbooleanIf suppressed is on, Alert will not have colored background
labelClosestringThe label of the close button.

enum

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

Functional specs

Subcomponents

AlertButton

import AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton";
// or
import { AlertButton } from "@kiwicom/orbit-components/lib/Alert";
<AlertButton type="info">Hello World!</AlertButton>

Props

NameTypeDefaultDescription
ariaControlsstringId of the element the button controls.
ariaExpandedbooleanTells screen reader the controlled element from ariaControls is expanded
asComponentstring \| React.Element"button"The component used for the root node.
fullWidthbooleanfalseIf true, the AlertButton grows to the full width of its container.
circledbooleanfalseIf true, the AlertButton is circular.
childrenReact.NodeThe content of the AlertButton.
dataTeststringOptional prop for testing purposes.
disabledbooleanfalseIf true, the AlertButton is disabled.
externalbooleanfalseIf true, the AlertButton opens link in a new tab.
hrefstringThe URL of the link to open when AlertButton is clicked.
iconLeftReact.NodeThe displayed icon on the left.
iconRightReact.NodeThe displayed icon on the right.
loadingbooleanfalseIf true, the loading glyph is displayed.
onClickevent => void \| PromiseFunction for handling onClick event.
reffuncProp for forwarded ref of the AlertButton.
rolestringSpecifies the role of an element.
spaceAfterenumAdditional margin-bottom after component. See this docs
submitbooleanfalseIf true, the Button has the type="submit" attribute, otherwise type="button".
tabIndexstring \| numberSpecifies the tab order of an element.
titlestringAdds aria-label.
typeenum"primary"The type of AlertButton.
widthstringThe width of the AlertButton. Can be any string - 100px, 20%.

Button enum

type
"info"
"success"
"warning"
"critical"
"infoSubtle"
"successSubtle"
"warningSubtle"
"criticalSubtle"