Skip to main content

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
	data-testid="pw-alert-1"
	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>

Inline​

Inline alerts will not render a drop shadow.

Result
Loading...
Live Editor
<div data-testid="pw-alert-2">
	<Alert inline>I have no shadow. 6 more weeks of winter for you.</Alert>
</div>

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​