Skip to content

Modal

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Usage

vue
<script setup lang="ts">
import { ref } from 'vue';
import { Modal, PrimaryButton } from '@youcan/ui-vue3';

const showModal = ref(false);

const onConfirm = () => {
  showModal.value = false;
};
</script>

<template>
  <div class="container">
    <Modal v-model:visible="showModal" title="Edit profile" @on-confirm="onConfirm">
      <p class="content">
        The quick brown fox jumps over the lazy dog.
      </p>
    </Modal>
    <PrimaryButton @click="showModal = true;">
      <span>Open Modal</span>
    </PrimaryButton>
  </div>
</template>

API Reference