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
<>
	<Alert
		dismissible
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Dismissible Alert'}
	/>

	<Alert
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Confirmation Alert'}
		renderTitleActions={() => (
			<Button variant="primary" size="xs">
				Primary
			</Button>
		)}
	/>

	<Alert
		banner
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Banner Alert w/Icon'}
	/>

	<Alert banner renderTitle={() => <div className="text-center">Centered Banner Alert</div>} />
</>

Alerts with Body, Footer, and Actions​

Result
Loading...
Live Editor
<>
	<Alert
		dismissible
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Title Actions'}
		renderTitleActions={() => (
			<>
				<Button variant="outline-secondary" size="xs">
					Secondary
				</Button>
				<Button variant="primary" size="xs">
					Primary
				</Button>
			</>
		)}
		renderBody={() => 'Body'}
		renderFooter={() => 'Footer'}
	/>

	<Alert
		dismissible
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Body Actions'}
		renderBody={() => 'Body'}
		renderBodyActions={() => (
			<>
				<Button variant="primary" size="xs">
					Primary
				</Button>
				<Button variant="outline-secondary" size="xs">
					Secondary
				</Button>
			</>
		)}
		renderFooter={() => 'Footer'}
	/>

	<Alert
		dismissible
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Title Actions'}
		renderTitleActions={() => (
			<>
				<Button variant="outline-secondary" size="xs">
					Secondary
				</Button>
				<Button variant="primary" size="xs">
					Primary
				</Button>
			</>
		)}
		renderBody={() => 'Body'}
	/>

	<Alert
		dismissible
		renderIcon={() => <span className="icon-placeholder" />}
		renderTitle={() => 'Body Actions'}
		renderBody={() => 'Body'}
		renderBodyActions={() => (
			<>
				<Button variant="primary" size="xs">
					Primary
				</Button>
				<Button variant="outline-secondary" size="xs">
					Secondary
				</Button>
			</>
		)}
	/>
</>

Color Variants​

Result
Loading...
Live Editor
<div
	data-testid="pw-alert-3"
	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}
				dismissible
				renderIcon={() => <span className="icon-placeholder" />}
				renderTitle={() => 'Alert'}
			/>
		),
	)}
</div>

Boostrap Specific Variants​

⚠️ Rarely used variants that match Bootstrap's alert styles.

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​