Toasts
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
Live example
Pre-built cards for copygen.
'use client';
import Image from 'next/image';
import { useState } from 'react';
import { Button, Toast } from 'react-bootstrap';
export default function Example() {
const [showA, setShowA] = useState(false);
const handelLiveTost = () => {
setShowA(true);
setTimeout(() => {
setShowA(false);
}, 5000);
};
return (
<>
<Button onClick={() => handelLiveTost()}>
Show live toast
</Button>
<div className="position-fixed bottom-0 end-0 p-3">
<Toast show={showA} onClose={() => setShowA(!showA)}>
<Toast.Header>
<Image src="/images/favicon.png" className="rounded me-2" alt="CopyGen" height={24} width={24} />
<strong className="me-auto">CopyGen</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>
Woohoo, you're reading this text in a Toast!
</Toast.Body>
</Toast>
</div>
</>
);
}
Translucent
Toasts are slightly translucent to blend in with what’s below them.
CopyGen12 mins agoHello, world! This is a toast message.
'use client';
import Image from 'next/image';
import { useState } from 'react';
import { Toast } from 'react-bootstrap';
export default function Example() {
const [showB, setShowB] = useState(false);
return (
<Toast onClose={() => setShowB(false)} show={showB} animation={false}>
<Toast.Header>
<Image src="/images/favicon.png" className="rounded me-2" alt="CopyGen" height={24} width={24} />
<strong className="me-auto">CopyGen</strong>
<small>12 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
);
}
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
CopyGenjust nowSee? Just like this.
CopyGen2 seconds agoHeads up, toasts will stack automatically
'use client';
import Image from 'next/image';
import { useState } from 'react';
import { Toast, ToastContainer } from 'react-bootstrap';
export default function Example() {
const [showC, setShowC] = useState(true);
const [showD, setShowD] = useState(true);
return (
<ToastContainer className="position-static">
<Toast onClose={() => setShowC(false)} show={showC} animation={false}>
<Toast.Header>
<Image src="/images/favicon.png" className="rounded me-2" alt="CopyGen" height={24} width={24} />
<strong className="me-auto">CopyGen</strong>
<small className="text-muted">just now</small>
</Toast.Header>
<Toast.Body>See? Just like this.</Toast.Body>
</Toast>
<Toast onClose={() => setShowD(false)} show={showD} animation={false}>
<Toast.Header>
<Image src="/images/favicon.png" className="rounded me-2" alt="CopyGen" height={24} width={24} />
<strong className="me-auto">CopyGen</strong>
<small className="text-muted">2 seconds ago</small>
</Toast.Header>
<Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
</Toast>
</ToastContainer>
);
}
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
'use client';
import Image from 'next/image';
import { useState } from 'react';
import { Toast } from 'react-bootstrap';
export default function Example() {
const [showE, setShowE] = useState(true);
const [showF, setShowF] = useState(true);
return (
<>
<Toast
onClose={() => setShowE(false)}
show={showE}
animation={false}
className="mb-2"
>
<div className="d-flex">
<Toast.Body className="flex-grow-1">
Hello, world! This is a toast message.
</Toast.Body>
<Toast.Header className="me-2"></Toast.Header>
</div>
</Toast>
<Toast
onClose={() => setShowF(false)}
show={showF}
animation={false}
className="text-bg-primary border-0"
>
<div className="d-flex">
<Toast.Body className="flex-grow-1">
Hello, world! This is a toast message.
</Toast.Body>
<Toast.Header className="me-2 text-bg-primary"></Toast.Header>
</div>
</Toast>
</>
);
}