Custom Modal Components

Default Modal

<div> <button class="btn btn-gradient" data-modal-target="default-modal"> Open Default Modal </button>  <div class="modal" id="default-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal default.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Small Modal

<div> <button class="btn btn-gradient" data-modal-target="small-modal"> Open Small Modal </button>  <div class="modal modal--sm" id="small-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal small.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Medium Modal

<div> <button class="btn btn-gradient" data-modal-target="medium-modal"> Open Medium Modal </button>  <div class="modal modal--md" id="medium-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal medium.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Large Modal

<div> <button class="btn btn-gradient" data-modal-target="large-modal"> Open Large Modal </button>  <div class="modal modal--lg" id="large-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal large.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Extra Large Modal

<div> <button class="btn btn-gradient" data-modal-target="extra-large-modal"> Open Extra Large Modal </button>  <div class="modal modal--xl" id="extra-large-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal extra-large.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Full Modal

<div> <button class="btn btn-gradient" data-modal-target="full-modal"> Open Full Modal </button>  <div class="modal modal--full" id="full-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal full.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Modal Top

<div> <button class="btn btn-gradient" data-modal-target="top-modal"> Open Modal Top </button>  <div class="modal modal--top" id="top-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal top.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>

Modal Bottom

<div> <button class="btn btn-gradient" data-modal-target="bottom-modal"> Open Modal Bottom </button>  <div class="modal modal--bottom" id="bottom-modal"> <div class="modal__container"> <div class="modal__header"> <h2 class="modal__title">Default Modal</h2> <button class="btn btn-icon modal__close"> <i data-lucide="x"></i> </button> </div> <div class="modal__body"> <p>This is a Default modal bottom.</p> </div> <div class="modal__footer"> <button class="btn btn-gradient">Cancel</button> <button class="btn btn-gradient">Confirm</button> </div> </div> </div> </div>