primereact/components/toast/Toast.css

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primereact) [![Discord Chat](https://img.shields.io/discord/5579

.p-toast {
    position: fixed;
    width: 25rem;
}

.p-toast-message-content {
    display: flex;
    align-items: flex-start;
}

.p-toast-message-text {
    flex: 1 1 auto;
}

.p-toast-top-right {
	top: 20px;
	right: 20px;
}

.p-toast-top-left {
	top: 20px;
	left: 20px;
}

.p-toast-bottom-left {
	bottom: 20px;
	left: 20px;
}

.p-toast-bottom-right {
	bottom: 20px;
	right: 20px;
}

.p-toast-top-center {
	top: 20px;
    left: 50%;
    margin-left: -10em;
}

.p-toast-bottom-center {
	bottom: 20px;
	left: 50%;
    margin-left: -10em;
}

.p-toast-center {
	left: 50%;
	top: 50%;
    min-width: 20vw;
    transform: translate(-50%, -50%);
}

.p-toast-icon-close {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.p-toast-icon-close.p-link {
	cursor: pointer;
}

/* Animations */
.p-toast-message-enter {
    opacity: 0;
    transform: translateY(50%);
}

.p-toast-message-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: transform .3s, opacity .3s;
}

.p-toast-message-enter-done {
    transform: none;
}

.p-toast-message-exit {
    opacity: 1;
    max-height: 1000px;
}

.p-toast-message-exit-active {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
}