Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

<Toast>
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>

Translucent

<Toast className="mb-4" >
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>just now</small>
</Toast.Header>
<Toast.Body>See? Just like this.</Toast.Body>
</Toast>

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

<Toast className="mb-4">
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>just now</small>
</Toast.Header>
<Toast.Body>See? Just like this.</Toast.Body>
</Toast>
<Toast animation={false}>
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>2 seconds ago</small>
</Toast.Header>
<Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
</Toast>

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

<div className="mb-3">
<label htmlFor="selectToastPlacement">Toast position</label>
<Form.Select
id="selectToastPlacement"
className="mt-2"
onChange={(e) => setPosition(e.currentTarget.value)}
>
{[
'top-start',
'top-center',
'top-end',
'middle-start',
'middle-center',
'middle-end',
'bottom-start',
'bottom-center',
'bottom-end',
].map((p) => (
<option key={p} value={p}>
{p}
</option>
))}
</Form.Select>
</div>
<div
aria-live="polite"
aria-atomic="true"
className="position-relative"
style={{ minHeight: '240px' }}
>
<ToastContainer className="p-3" position={position}>
<Toast>
<Toast.Header closeButton={false}>
<Image src={Avatar1} className="rounded me-2 avatar-xs" alt="..." />
<strong className="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
</ToastContainer>
</div>

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

<div
aria-live="polite"
aria-atomic="true"
style={{
position: 'relative',
minHeight: '250px',
}}
>
<div
style={{
position: 'absolute',
top: 0,
right: 0,
}}
>
<Toast className="mb-4">
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>just now</small>
</Toast.Header>
<Toast.Body>See? Just like this.</Toast.Body>
</Toast>
<Toast className="mb-4">
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>2 seconds ago</small>
</Toast.Header>
<Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
</Toast>
</div>
</div>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

<div aria-live="polite" aria-atomic="true" className="d-flex justify-content-center align-items-center"
style={{
position: 'relative',
minHeight: '250px',
}}>
<Toast>
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
</div>

Dismissible

const Toasts = () => {
const [showA, setShowA] = useState(true);
const [showB, setShowB] = useState(true);
const toggleShowA = () => setShowA(!showA);
const toggleShowB = () => setShowB(!showB);
return (
<Fragment>
<Row>
<Col md={6} className="mb-2">
<Button onClick={toggleShowA} className="mb-2">
Toggle Toast <strong>with</strong> Animation
</Button>
<Toast className="mb-4" show={showA} onClose={toggleShowA}>
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>just now</small>
</Toast.Header>
<Toast.Body>See? Just like this.</Toast.Body>
</Toast>
</Col>
<Col md={6} className="mb-2">
<Button onClick={toggleShowB} className="mb-2">
Toggle Toast <strong>without</strong> Animation
</Button>
<Toast onClose={toggleShowB} show={showB} animation={false}>
<Toast.Header>
<Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
<strong className="me-auto">Bootstrap</strong>
<small>2 seconds ago</small>
</Toast.Header>
<Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
</Toast>
</Col>
</Row>
</Fragment>
)
}

Made by Codescandy

Destributed by ThemeWagon