This toast is shown when the button is clicked and can be
closed.
Triggered Toast
This toast is shown when the button is clicked and can be
closed.
Triggered Toast
This toast is shown when the button is clicked and can be
closed.
Triggered Toast
This toast is shown when the button is clicked and can be
closed.
<div class="toast__wrapper toast__wrapper--top">
<div data-toast-id="toaster1" class="toast toast--darkblue toast--hidden">
<div class="toast__content">
<div class="toast__title">Triggered Toast</div>
<div class="toast__message">
This toast is shown when the button is clicked and can be
closed.
</div>
</div>
<button class="btn btn-darkblue">
Button
</button>
</div>
<div data-toast-id="toaster" class="toast toast--pumpkin toast--hidden">
<div class="toast__content">
<div class="toast__title">Triggered Toast</div>
<div class="toast__message">
This toast is shown when the button is clicked and can be
closed.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
</div>
<div class="toast__wrapper toast__wrapper--bottom">
<div data-toast-id="toaster2" class="toast toast--darkblue toast--hidden">
<div class="toast__content">
<div class="toast__title">Triggered Toast</div>
<div class="toast__message">
This toast is shown when the button is clicked and can be
closed.
</div>
</div>
<button class="btn btn-darkblue">
Button
</button>
</div>
<div data-toast-id="toaster3" class="toast toast--pumpkin toast--hidden">
<div class="toast__content">
<div class="toast__title">Triggered Toast</div>
<div class="toast__message">
This toast is shown when the button is clicked and can be
closed.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
</div>
<button class="btn btn-gradient toast-trigger" data-toast-target="toaster">Show Toast Pumpkin Top</button>
<button class="btn btn-gradient toast-trigger" data-toast-target="toaster1">Show Toast Blue Top</button>
<button class="btn btn-gradient toast-trigger" data-toast-target="toaster3">Show Toast Pumpkin
Bottom</button>
<button class="btn btn-gradient toast-trigger" data-toast-target="toaster2">Show Toast Blue Bottom</button>
Default Toasts
Pumpkin Toast
This is a simple toast message using the pumpkin color.
Orange Toast
This is an toast using the orange color.
Dark Blue Toast
This is an toast using the dark blue color.
Light Blue Toast
This is an toast using the light blue color.
Violet Toast
This is an toast using the violet color.
Yellow Toast
This is an toast using the Yellow color.
Aquamarine Toast
This is an toast using the aquamarine color.
Apricot Toast
This is an toast using the apricot color.
<div class="toast-wrap">
<div class="toast toast--pumpkin">
<div class="toast__content">
<div class="toast__title">Pumpkin Toast</div>
<div class="toast__message">
This is a simple toast message using the pumpkin color.
</div>
</div>
</div>
<div class="toast toast--orange">
<div class="toast__content">
<div class="toast__title">Orange Toast</div>
<div class="toast__message">
This is an toast using the orange color.
</div>
</div>
</div>
<div class="toast toast--darkblue">
<div class="toast__content">
<div class="toast__title">Dark Blue Toast</div>
<div class="toast__message">
This is an toast using the dark blue color.
</div>
</div>
</div>
<div class="toast toast--lightblue">
<div class="toast__content">
<div class="toast__title">Light Blue Toast</div>
<div class="toast__message">
This is an toast using the light blue color.
</div>
</div>
</div>
<div class="toast toast--violet">
<div class="toast__content">
<div class="toast__title">Violet Toast</div>
<div class="toast__message">
This is an toast using the violet color.
</div>
</div>
</div>
<div class="toast toast--yellow">
<div class="toast__content">
<div class="toast__title">Yellow Toast</div>
<div class="toast__message">
This is an toast using the Yellow color.
</div>
</div>
</div>
<div class="toast toast--aquamarine">
<div class="toast__content">
<div class="toast__title">Aquamarine Toast</div>
<div class="toast__message">
This is an toast using the aquamarine color.
</div>
</div>
</div>
<div class="toast toast--apricot">
<div class="toast__content">
<div class="toast__title">Apricot Toast</div>
<div class="toast__message">
This is an toast using the apricot color.
</div>
</div>
</div>
</div>
Toasts With Button
Pumpkin Toast
This is a simple toast message using the pumpkin color.
Orange Toast
This is an toast using the orange color.
Dark Blue Toast
This is an toast using the dark blue color.
Light Blue Toast
This is an toast using the light blue color.
Violet Toast
This is an toast using the violet color.
Yellow Toast
This is an toast using the Yellow color.
Aquamarine Toast
This is an toast using the aquamarine color.
Apricot Toast
This is an toast using the apricot color.
<div class="toast-wrap">
<div class="toast toast--pumpkin">
<div class="toast__content">
<div class="toast__title">Pumpkin Toast</div>
<div class="toast__message">
This is a simple toast message using the pumpkin color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--orange">
<div class="toast__content">
<div class="toast__title">Orange Toast</div>
<div class="toast__message">
This is an toast using the orange color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--darkblue">
<div class="toast__content">
<div class="toast__title">Dark Blue Toast</div>
<div class="toast__message">
This is an toast using the dark blue color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--lightblue">
<div class="toast__content">
<div class="toast__title">Light Blue Toast</div>
<div class="toast__message">
This is an toast using the light blue color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--violet">
<div class="toast__content">
<div class="toast__title">Violet Toast</div>
<div class="toast__message">
This is an toast using the violet color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--yellow">
<div class="toast__content">
<div class="toast__title">Yellow Toast</div>
<div class="toast__message">
This is an toast using the Yellow color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--aquamarine">
<div class="toast__content">
<div class="toast__title">Aquamarine Toast</div>
<div class="toast__message">
This is an toast using the aquamarine color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
<div class="toast toast--apricot">
<div class="toast__content">
<div class="toast__title">Apricot Toast</div>
<div class="toast__message">
This is an toast using the apricot color.
</div>
</div>
<button class="btn btn-gradient">
Button
</button>
</div>
</div>