Image
Buy Now
avatar
dash ui - admin dashboard template
Unlimited Access

Upgrade your plan from a Free trial, to select Business Plan. Start Now

Upgrade Now

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.

Design
Code
<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

Design
Code
<div className="pb-4 p-4 bg-primary">
    <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>
</div>

Stacking

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

Design
Code
<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.

Design
Code
const Page = () => {
    const [position, setPosition] = useState("top-start");
    return (
        <Fragment>
            <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="/images/avatar/avatar-1.jpg" 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>
        </Fragment>
    )
}
export default Page

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

Design
Code
<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.

Design
Code
<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

Design
Code
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>
    )
}