Skip to main content

Toast

The Toast component allows for displaying a message to the user in a non-intrusive way. It is used to display a message for a short period of time and then disappear. It is often used to display a message after a user action, such as a successful login or a failed login.

Toast.Icon can be used to create a styled icon within the Toast.Header component.

For more prop details about Toast Header, Body, and Container see RBS Toast.

Result
Loading...
Live Editor
<div
	style={{
		display: 'grid',
		gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
		gridGap: '1rem',
	}}
	data-testid="pw-toast"
>
	{['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map((bg) => (
		<Toast key={bg} bg={bg} className="mb-3">
			<Toast.Header>
				<div className="me-2">
					<Toast.Icon variant={bg}>
						<span className="icon-placeholder" />
					</Toast.Icon>
				</div>
				<strong className="me-auto">Header</strong>
				<span className="me-2 fs-xxs fw-normal">Time ago</span>
			</Toast.Header>
			<Toast.Body>Body</Toast.Body>
		</Toast>
	))}
</div>

Positioning​

Using the ToastContainer allows you to position the Toast notification in different regions of the screen.

Result
Loading...
Live Editor
<div className="position-relative border" style={{ minHeight: 240 }}>
	<ToastContainer className="p-3" position="bottom-end">
		<Toast bg="success">
			<Toast.Header>
				<div className="me-2">
					<Toast.Icon variant="success">
						<span className="icon-placeholder" />
					</Toast.Icon>
				</div>
				<strong className="me-auto">Header</strong>
				<span className="me-2 fs-xxs fw-normal">Time ago</span>
			</Toast.Header>
			<Toast.Body>Body</Toast.Body>
		</Toast>
	</ToastContainer>
</div>

Analytics​

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

export default {
	value: 'Toast',
	actions: {
		onClose: { type: 'TOAST_ON_CLOSE', payload: 'Close' },
	},
};

Props​

Toast​

ToastIcon​