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 is an Alert and supports the same render props (renderIcon, renderTitle, renderTitleActions, renderBody, renderBodyActions, and renderFooter). Providing any render prop opts the Toast into the Alert layout and automatically renders a dismiss button. If no render props are provided, the Toast falls back to legacy Bootstrap composition using Toast.Header, Toast.Body, and Toast.Icon.

Render Props​

Use the render props to compose a Toast the same way you would an Alert.

Result
Loading...
Live Editor
<div
	style={{
		display: 'grid',
		gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
		gridGap: '1rem',
	}}
	data-testid="pw-toast-render-props"
>
	{['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map((bg) => (
		<Toast
			key={bg}
			bg={bg}
			renderIcon={() => <span className="icon-placeholder" />}
			renderTitle={() => 'Header'}
			renderBody={() => 'Body'}
		/>
	))}
</div>

Toasts with Body, Footer, and Actions​

Result
Loading...
Live Editor
<div
	style={{
		display: 'grid',
		gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
		gridGap: '1rem',
	}}
>
	<Toast
		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'}
	/>

	<Toast
		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'}
	/>
</div>

Positioning with Render Props​

Render props compose the same way inside a ToastContainer.

Result
Loading...
Live Editor
<div className="position-relative border" style={{ minHeight: 240 }}>
	<ToastContainer className="p-3" position="bottom-end">
		<Toast
			bg="success"
			renderIcon={() => <span className="icon-placeholder" />}
			renderTitle={() => 'Header'}
			renderBody={() => 'Body'}
		/>
	</ToastContainer>
</div>

Legacy Bootstrap Composition​

When no render props are provided, the Toast falls back to Bootstrap composition. 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​