Composition variations Copy Link Copy code <div class="toast toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-information-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="information-circle" clip-path="url(#clip0_3_8619)"><path id="Vector" d="M14.25 16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V11.25C12 11.0511 11.921 10.8603 11.7803 10.7197C11.6397 10.579 11.4489 10.5 11.25 10.5H10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M11.625 6.75C11.5508 6.75 11.4783 6.77199 11.4167 6.8132C11.355 6.8544 11.3069 6.91297 11.2785 6.98149C11.2502 7.05002 11.2427 7.12542 11.2572 7.19816C11.2717 7.2709 11.3074 7.33772 11.3598 7.39016C11.4123 7.44261 11.4791 7.47833 11.5518 7.49279C11.6246 7.50726 11.7 7.49984 11.7685 7.47145C11.837 7.44307 11.8956 7.39501 11.9368 7.33334C11.978 7.27167 12 7.19917 12 7.125C12 7.02554 11.9605 6.93016 11.8902 6.85984C11.8198 6.78951 11.7245 6.75 11.625 6.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8619"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Icon, title and content</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Content</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--default">
<div class="toast__content">
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Title and content</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Content</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-information-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="information-circle" clip-path="url(#clip0_3_8619)"><path id="Vector" d="M14.25 16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V11.25C12 11.0511 11.921 10.8603 11.7803 10.7197C11.6397 10.579 11.4489 10.5 11.25 10.5H10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M11.625 6.75C11.5508 6.75 11.4783 6.77199 11.4167 6.8132C11.355 6.8544 11.3069 6.91297 11.2785 6.98149C11.2502 7.05002 11.2427 7.12542 11.2572 7.19816C11.2717 7.2709 11.3074 7.33772 11.3598 7.39016C11.4123 7.44261 11.4791 7.47833 11.5518 7.49279C11.6246 7.50726 11.7 7.49984 11.7685 7.47145C11.837 7.44307 11.8956 7.39501 11.9368 7.33334C11.978 7.27167 12 7.19917 12 7.125C12 7.02554 11.9605 6.93016 11.8902 6.85984C11.8198 6.78951 11.7245 6.75 11.625 6.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8619"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Icon and title</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
</div>
</div>
</div>
State variations Copy Link Copy code <div class="toast toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-information-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="information-circle" clip-path="url(#clip0_3_8619)"><path id="Vector" d="M14.25 16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V11.25C12 11.0511 11.921 10.8603 11.7803 10.7197C11.6397 10.579 11.4489 10.5 11.25 10.5H10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M11.625 6.75C11.5508 6.75 11.4783 6.77199 11.4167 6.8132C11.355 6.8544 11.3069 6.91297 11.2785 6.98149C11.2502 7.05002 11.2427 7.12542 11.2572 7.19816C11.2717 7.2709 11.3074 7.33772 11.3598 7.39016C11.4123 7.44261 11.4791 7.47833 11.5518 7.49279C11.6246 7.50726 11.7 7.49984 11.7685 7.47145C11.837 7.44307 11.8956 7.39501 11.9368 7.33334C11.978 7.27167 12 7.19917 12 7.125C12 7.02554 11.9605 6.93016 11.8902 6.85984C11.8198 6.78951 11.7245 6.75 11.625 6.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8619"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Info</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Your message here</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--success toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-check-circle-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="check-circle-1" clip-path="url(#clip0_3_9305)"><path id="Vector" d="M6 13.223L8.45 16.7C8.54293 16.8388 8.66768 16.9534 8.81385 17.0343C8.96002 17.1152 9.12339 17.16 9.29037 17.165C9.45735 17.17 9.6231 17.135 9.77384 17.063C9.92458 16.991 10.0559 16.884 10.157 16.751L18 6.828" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12 23.249C18.2132 23.249 23.25 18.2122 23.25 11.999C23.25 5.78582 18.2132 0.749023 12 0.749023C5.7868 0.749023 0.75 5.78582 0.75 11.999C0.75 18.2122 5.7868 23.249 12 23.249Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_9305"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Success</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Your message here</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--warning toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-road-sign-warning">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="road-sign-warning" clip-path="url(#clip0_3_372)"><path id="Vector" d="M13.313 2.27496C13.1834 2.04027 12.9932 1.84461 12.7623 1.70836C12.5314 1.57211 12.2681 1.50024 12 1.50024C11.7319 1.50024 11.4687 1.57211 11.2378 1.70836C11.0068 1.84461 10.8167 2.04027 10.687 2.27496L0.937029 20.275C0.810947 20.5033 0.746599 20.7606 0.750337 21.0215C0.754075 21.2823 0.825769 21.5376 0.958343 21.7623C1.09092 21.987 1.27979 22.1732 1.50631 22.3025C1.73283 22.4319 1.98917 22.4999 2.25003 22.5H21.75C22.0109 22.4999 22.2672 22.4319 22.4937 22.3025C22.7203 22.1732 22.9091 21.987 23.0417 21.7623C23.1743 21.5376 23.246 21.2823 23.2497 21.0215C23.2535 20.7606 23.1891 20.5033 23.063 20.275L13.313 2.27496Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12 18C12.0995 18 12.1948 18.0395 12.2652 18.1098C12.3355 18.1802 12.375 18.2755 12.375 18.375" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M11.625 18.375C11.625 18.2755 11.6645 18.1802 11.7348 18.1098C11.8052 18.0395 11.9005 18 12 18" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M12 18.75C11.9005 18.75 11.8052 18.7105 11.7348 18.6402C11.6645 18.5698 11.625 18.4745 11.625 18.375" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M12.375 18.375C12.375 18.4745 12.3355 18.5698 12.2652 18.6402C12.1948 18.7105 12.0995 18.75 12 18.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M12 15V8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_372"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Warning</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Your message here</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--error toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-road-sign-banned">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="road-sign-banned" clip-path="url(#clip0_3_288)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.04492 4.04492L19.9549 19.9549" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_288"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Error</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Your message here</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--default">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-information-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="information-circle" clip-path="url(#clip0_3_8619)"><path id="Vector" d="M14.25 16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V11.25C12 11.0511 11.921 10.8603 11.7803 10.7197C11.6397 10.579 11.4489 10.5 11.25 10.5H10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M11.625 6.75C11.5508 6.75 11.4783 6.77199 11.4167 6.8132C11.355 6.8544 11.3069 6.91297 11.2785 6.98149C11.2502 7.05002 11.2427 7.12542 11.2572 7.19816C11.2717 7.2709 11.3074 7.33772 11.3598 7.39016C11.4123 7.44261 11.4791 7.47833 11.5518 7.49279C11.6246 7.50726 11.7 7.49984 11.7685 7.47145C11.837 7.44307 11.8956 7.39501 11.9368 7.33334C11.978 7.27167 12 7.19917 12 7.125C12 7.02554 11.9605 6.93016 11.8902 6.85984C11.8198 6.78951 11.7245 6.75 11.625 6.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8619"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Info</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Your message here</p>
</div>
</div>
</div>
</div>Copy code <div class="toast toast--small">
<div class="toast__content">
<div class="toast__content__icon">
<div class="svg-icon svg-icon-information-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="information-circle" clip-path="url(#clip0_3_8619)"><path id="Vector" d="M14.25 16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V11.25C12 11.0511 11.921 10.8603 11.7803 10.7197C11.6397 10.579 11.4489 10.5 11.25 10.5H10.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M11.625 6.75C11.5508 6.75 11.4783 6.77199 11.4167 6.8132C11.355 6.8544 11.3069 6.91297 11.2785 6.98149C11.2502 7.05002 11.2427 7.12542 11.2572 7.19816C11.2717 7.2709 11.3074 7.33772 11.3598 7.39016C11.4123 7.44261 11.4791 7.47833 11.5518 7.49279C11.6246 7.50726 11.7 7.49984 11.7685 7.47145C11.837 7.44307 11.8956 7.39501 11.9368 7.33334C11.978 7.27167 12 7.19917 12 7.125C12 7.02554 11.9605 6.93016 11.8902 6.85984C11.8198 6.78951 11.7245 6.75 11.625 6.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8619"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</div>
<div class="toast__content__text">
<div class="toast__content__title">
<h3 class="h4">Info</h3>
<a href="" class="toast__close">
<div class="svg-icon svg-icon-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="close" clip-path="url(#clip0_3_8381)"><path id="Vector" d="M0.75 23.249L23.25 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M23.25 23.249L0.75 0.749023" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_8381"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
</a>
</div>
<div class="toast__content__paragraph">
<p>Your message here</p>
</div>
</div>
</div>
</div>