Modal & Dialog

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <span class="modal__overlay" onclick="toggleModal()"></span>
   <article class="modal__content">
      <div class="modal__header">
         <div class="modal__close">
            <svg onclick="toggleModal()" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M7.99982 7.05773L11.2998 3.75773L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998 12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716 8.0004L3.75716 4.7004L4.69982 3.75773L7.99982 7.05773Z" fill="#757575"/>
            </svg>
         </div>
         <h2 class="modal__title">Item adicionado ao carrinho</h2>
         <p class="modal__subtitle">Lorem ipsum sit amet consectetur sit amet</p>
      </div>
      <div class="modal__footer">
         <p class="modal__description">There are special offers for some of the items on your wishlist. Do you want to see these deals before proceeding to checkout page?</p>
         <div class="modal__footer-buttons">
            <button class="modal__button-ghost" type="button">
               Cancelar
            </button>
            <button class="modal__button" type="button">
               Confirmar
            </button>
         </div>
      </div>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');
   const modalOverlay = document.querySelector('.modal__overlay');
   const html = document.documentElement;

   function toggleModal(){
      modalContent.classList.toggle('show');
      modalOverlay.classList.toggle('show-overlay');
      html.style.overflow = html.style.overflow === 'hidden' ? '' : 'hidden';
   } 

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 152px;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal__button-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 152px;
  height: 44px;
  padding: 12px 20px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  background-color: transparent;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  transition: all linear 150ms;
  cursor: pointer;
}

.modal__button-ghost:hover {
  color: #000000;
  background-color: #f0f0f0;
}

.modal__button-ghost:active {
  background-color: #EBEBEB;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 101;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__content.show:hover {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 12px;
}

.modal__header {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 12px 16px;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
}

.modal__close {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.modal__close svg {
  cursor: pointer;
}

.modal__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.modal__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.modal__footer {
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px 16px;
}

.modal__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
  margin-bottom: 24px;
}

.modal__footer-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.modal__overlay{
  position: fixed;
  z-index: 100;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  bottom: 0;
  display: none;
  top: 0;
  right: 0;
  cursor: pointer;
}

.modal__overlay.show-overlay {
  display: block;
}

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <span class="modal__overlay" onclick="toggleModal()"></span>
   <div class="modal__content">
      <p class="modal__description">There are special offers for some of the items on your wishlist. Do you want to see these deals before proceeding to checkout page?</p>
      <div class="modal__footer-buttons">
         <button class="modal__button-ghost" type="button">
            Cancelar
         </button>
         <button class="modal__button" type="button">
            Confirmar
         </button>
      </div>
   </div>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');
   const modalOverlay = document.querySelector('.modal__overlay');
   const html = document.documentElement;

   function toggleModal(){
      modalContent.classList.toggle('show');
      modalOverlay.classList.toggle('show-overlay');
      html.style.overflow = html.style.overflow === 'hidden' ? '' : 'hidden';
   } 

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 152px;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal__button-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 152px;
  height: 44px;
  padding: 12px 20px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  background-color: transparent;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  transition: all linear 150ms;
  cursor: pointer;
}

.modal__button-ghost:hover {
  color: #000000;
  background-color: #f0f0f0;
}

.modal__button-ghost:active {
  background-color: #EBEBEB;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 101;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
  margin-bottom: 24px;
}

.modal__footer-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.modal__overlay{
  position: fixed;
  z-index: 100;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  bottom: 0;
  display: none;
  top: 0;
  right: 0;
  cursor: pointer;
}

.modal__overlay.show-overlay {
  display: block;
}

Dialog padrão

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <h2 class="modal__title">Item adicionado ao carrinho</h2>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}
.modal{
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content{
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 12px 16px 12px 16px;
  display: flex;
  align-items:center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show{
  opacity: 1;
  visibility: visible;
}

.modal__title{
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

Dialog com botão de fechar

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <div class="modal__close">
         <svg onclick="toggleModal()" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99982 7.05773L11.2998 3.75773L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998 12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716 8.0004L3.75716 4.7004L4.69982 3.75773L7.99982 7.05773Z" fill="#757575"/>
         </svg>
      </div>
      <h2 class="modal__title">Item adicionado ao carrinho</h2>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}
.modal{
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content{
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 8px 8px 12px 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show{
  opacity: 1;
  visibility: visible;
}

.modal__close{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.modal__close svg{
  cursor: pointer;
}

.modal__title{
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

Dialog com subtítulo

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <h2 class="modal__title">Item adicionado ao carrinho</h2>
      <p class="modal__subtitle">Lorem ipsum sit amet consectetur sit amet</p>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 12px 16px 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.modal__subtitle{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

Dialog com subtítulo e botão de fechar

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <div class="modal__close">
         <svg onclick="toggleModal()" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99982 7.05773L11.2998 3.75773L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998 12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716 8.0004L3.75716 4.7004L4.69982 3.75773L7.99982 7.05773Z" fill="#757575"/>
         </svg>
      </div>
      <h2 class="modal__title">Item adicionado ao carrinho</h2>
      <p class="modal__subtitle">Lorem ipsum sit amet consectetur sit amet</p>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 8px 8px 12px 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__close {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.modal__close svg {
  cursor: pointer;
}

.modal__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.modal__subtitle{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

Dialog com ícone

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <div class="modal__icon">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="#2C2C2C"/>
            <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="black" fill-opacity="0.2"/>
         </svg>
      </div>
      <h2 class="modal__title">Item adicionado ao carrinho</h2>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 12px 16px 12px 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__icon{
  width: 32px;
  min-width: 32px;
  height: 32px;
  background-color: #E6E6E6;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

Dialog com ícone e botão de fechar

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <div class="modal__close">
         <svg onclick="toggleModal()" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99982 7.05773L11.2998 3.75773L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998 12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716 8.0004L3.75716 4.7004L4.69982 3.75773L7.99982 7.05773Z" fill="#757575"/>
         </svg>
      </div>
      <div class="modal__info">
         <div class="modal__icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="#2C2C2C"/>
               <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="black" fill-opacity="0.2"/>
            </svg>
         </div>
         <h2 class="modal__title">Item adicionado ao carrinho</h2>
      </div>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 8px 8px 12px 16px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__close {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.modal__close svg {
  cursor: pointer;
}

.modal__info{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.modal__icon{
  width: 32px;
  min-width: 32px;
  height: 32px;
  background-color: #E6E6E6;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

Dialog com ícone e subtítulo

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <div class="modal__icon">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="#2C2C2C"/>
            <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="black" fill-opacity="0.2"/>
         </svg>
      </div>
      <div class="modal__texts">
         <h2 class="modal__title">Item adicionado ao carrinho</h2>
         <p class="modal__subtitle">Lorem ipsum sit amet consectetur sit amet</p>
      </div>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 12px 16px 12px 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__texts{
  display: flex;
  flex-direction: column;
}

.modal__icon{
  width: 32px;
  min-width: 32px;
  height: 32px;
  background-color: #E6E6E6;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.modal__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

Dialog com ícone, subtítulo e botão de fechar

Preview
HTML
CSS

<button type="button" id="trigger" class="modal__button" onclick="toggleModal()">Show Modal</button>

<div class="modal">
   <article class="modal__content">
      <div class="modal__close">
         <svg onclick="toggleModal()" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99982 7.05773L11.2998 3.75773L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998 12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716 8.0004L3.75716 4.7004L4.69982 3.75773L7.99982 7.05773Z" fill="#757575"/>
         </svg>
      </div>
      <div class="modal__info">
         <div class="modal__icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="#2C2C2C"/>
               <path d="M0.666672 9.66691C0.666262 8.93055 0.85362 8.20625 1.21104 7.56245C1.56846 6.91865 2.08414 6.37662 2.70934 5.98758C2.87435 4.70097 3.50254 3.51858 4.47635 2.66168C5.45016 1.80479 6.70286 1.33211 8.00001 1.33211C9.29715 1.33211 10.5498 1.80479 11.5237 2.66168C12.4975 3.51858 13.1257 4.70097 13.2907 5.98758C14.0662 6.47004 14.6694 7.18518 15.0142 8.0309C15.359 8.87662 15.4278 9.80966 15.2108 10.6968C14.9937 11.584 14.5019 12.3798 13.8056 12.9708C13.1092 13.5618 12.244 13.9177 11.3333 13.9876L4.66667 14.0002C2.42934 13.8176 0.666672 11.9482 0.666672 9.66691ZM11.232 12.6582C11.8626 12.6098 12.4617 12.3633 12.9437 11.9539C13.4258 11.5446 13.7662 10.9934 13.9163 10.3791C14.0664 9.76473 14.0185 9.11867 13.7795 8.53317C13.5405 7.94767 13.1225 7.45268 12.5853 7.11891L12.0473 6.78358L11.9673 6.15558C11.8427 5.19137 11.3713 4.30554 10.6411 3.66364C9.91086 3.02174 8.9719 2.6677 7.99967 2.6677C7.02745 2.6677 6.08849 3.02174 5.35829 3.66364C4.62809 4.30554 4.15662 5.19137 4.03201 6.15558L3.95201 6.78358L3.41534 7.11891C2.8782 7.45264 2.46026 7.94757 2.2212 8.53301C1.98215 9.11846 1.9342 9.76447 2.08421 10.3788C2.23422 10.9931 2.57452 11.5443 3.05651 11.9537C3.53849 12.363 4.13751 12.6096 4.76801 12.6582L4.88334 12.6669H11.1167L11.232 12.6582ZM8.66667 8.66691V11.3336H7.33334V8.66691H5.33334L8.00001 5.33358L10.6667 8.66691H8.66667Z" fill="black" fill-opacity="0.2"/>
            </svg>
         </div>
         <div class="modal__texts">
            <h2 class="modal__title">Item adicionado ao carrinho</h2>
            <p class="modal__subtitle">Lorem ipsum sit amet consectetur sit amet</p>
         </div>
      </div>
   </article>
</div>

<script>
   const modalContent = document.querySelector('.modal__content');

   const toggleModal = () => modalContent.classList.toggle('show');

   document.addEventListener('click', (event) => event.target.closest('.modal__button') || event.target.closest('.modal__content')|| modalContent.classList.remove('show'));
</script>

.modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #01141E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  margin: 0 auto;
}

.modal__button:hover {
  background-color: #48545d;
}

.modal__button:active {
  background-color: #01141E;
}

.modal {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal__content {
  width: 348px;
  height: auto;
  min-height: 58px;
  padding: 8px 8px 12px 16px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-radius: 4px 4px 0px 0px;
  opacity: 0;
  visibility: hidden;
}

.modal__content.show {
  opacity: 1;
  visibility: visible;
}

.modal__close {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.modal__close svg {
  cursor: pointer;
}

.modal__info{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.modal__texts{
  display: flex;
  flex-direction: column;
}

.modal__icon{
  width: 32px;
  min-width: 32px;
  height: 32px;
  background-color: #E6E6E6;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.03em;
  color: #2C2C2C;
}

.modal__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

Modal & Dialog

Modal com cabeçalho, conteúdo e botões​

Modal com conteúdo e botões​

Dialog padrão​

Dialog com botão de fechar​

Dialog com subtítulo​

Dialog com subtítulo e botão de fechar​

Dialog com ícone​

Dialog com ícone e botão de fechar​

Dialog com ícone e subtítulo​

Dialog com ícone, subtítulo e botão de fechar​

Modal com cabeçalho, conteúdo e botões

Modal com conteúdo e botões

Dialog padrão

Dialog com botão de fechar

Dialog com subtítulo

Dialog com subtítulo e botão de fechar

Dialog com ícone

Dialog com ícone e botão de fechar

Dialog com ícone e subtítulo

Dialog com ícone, subtítulo e botão de fechar