Alert

The Alert component is used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gridGap: '1rem', }} > {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map( (variant) => ( <Alert key={variant} variant={variant} renderIcon={() => <span className="icon-placeholder" />} > <Alert.Heading>Header</Alert.Heading> This alert is {variant}. <hr /> Body text. </Alert> ), )} </div>

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
        gridGap: '1rem',
    }}
>
    {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
        (variant) => (
            <Alert
                key={variant}
                variant={variant}
                renderIcon={() => <span className="icon-placeholder" />}
            >
                <Alert.Heading>Header</Alert.Heading>
                This alert is {variant}.
                <hr />
                Body text.
            </Alert>
        ),
    )}
</div>

Dismissible

Dismissible alerts will render a close icon that will dismiss the alert when clicked.

Result

Loading...

Live Editor

<Alert dismissible>I am dismissible. If you click my close button I will close.</Alert>

<Alert dismissible>I am dismissible. If you click my close button I will close.</Alert>

Inline

Inline alerts will not render a drop shadow.

Result

Loading...

Live Editor

<Alert inline>I have no shadow. 6 more weeks of winter for you.</Alert>

<Alert inline>I have no shadow. 6 more weeks of winter for you.</Alert>

Analytics

The Alert component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Alert',
	actions: {
		onClose: { type: 'ALERT_ON_CLOSE', payload: 'Close' },
	},
};

Props