Modal

Modal uses v-model to show some UI in front of other content.

Code Example

<!-- The button to open modal -->
<Button @click="isBasicModalOpen = true">
  open modal
</Button>

<Modal v-model="isBasicModalOpen">
  <ModalBox>
    <h3 class="text-lg font-bold">
      Congratulations random Interner user!
    </h3>
    <p class="py-4">
      You've been selected for a chance to get one year of subscription to use Wikipedia for
      free!
    </p>
    <ModalAction>
      <Button ghost @click="isBasicModalOpen = false">
        Cancel
      </Button>
      <Button @click="isBasicModalOpen = false">
        Buy
      </Button>
    </ModalAction>
  </ModalBox>
</Modal>

Components

The Modal components include the following:

Modal
ModalBox
ModalAction

The Modal component is the wrapper around the ModalBox. It shows the backdrop and controls open/close state.

Prop	Type	Description
`model-value`	boolean	Allows external control of the open/closed state. Use with the default `v-model`
`close-on-click-outside`	boolean	When enabled, closes the modal when clicking the modal backdrop. default: false
`top`	boolean	Aligns the modal to the top of the window.
`bottom`	boolean	Aligns the modal to the bottom of the window.

ModalBox

The ModalBox is the content box for the modal. It sits directly in front of the dark modal backdrop.

ModalAction

The ModalAction is the container for modal action buttons.

Align to Top

Use the top prop to align the modal to the top of the window.

Code Example

<!-- The button to open modal -->
<Button @click="isOpen = true">
  open modal
</Button>

<Modal v-model="isOpen" top close-on-click-outside name="my-modal">
  <ModalBox>
    <h3 class="text-lg font-bold">
      Flash Sale!
    </h3>
    <p class="py-4">
      Wanna buy a sundial?
    </p>
    <ModalAction>
      <Button ghost @click="isOpen = false">
        Cancel
      </Button>
      <Button @click="isOpen = false">
        Buy
      </Button>
    </ModalAction>
  </ModalBox>
</Modal>

Align to Bottom

Use the bottom prop to align the modal to the top of the window.

Code Example

<!-- The button to open modal -->
<Button @click="isOpen = true">
  open modal
</Button>

<Modal v-model="isOpen" bottom close-on-click-outside name="my-modal">
  <ModalBox>
    <h3 class="text-lg font-bold">
      Flash Sale!
    </h3>
    <p class="py-4">
      Wanna buy a sundial?
    </p>
    <ModalAction>
      <Button ghost @click="isOpen = false">
        Cancel
      </Button>
      <Button @click="isOpen = false">
        Buy
      </Button>
    </ModalAction>
  </ModalBox>
</Modal>

Close on Click Outside

Use the close-on-click-outside prop on the ModalWrapperto close when clicking outside of the Modal.

Code Example

<!-- The button to open modal -->
<Button @click="isOpen = true">
  open modal
</Button>

<Modal v-model="isOpen" name="close-on-click-outside" close-on-click-outside>
  <ModalBox>
    <h3 class="text-lg font-bold">
      Congratulations random Interner user!
    </h3>
    <p class="py-4">
      You've been selected for a chance to get one year of subscription to use Wikipedia for
      free!
    </p>
    <ModalAction>
      <Button ghost @click="isOpen = false">
        Cancel
      </Button>
      <Button @click="isOpen = false">
        Buy
      </Button>
    </ModalAction>
  </ModalBox>
</Modal>

Custom Width in Teleport

Code Example

<!-- The button to open modal -->
<Button @click="isOpen = true">
  open modal
</Button>

<Teleport to="body">
  <Modal v-model="isOpen" name="my-wide-modal" close-on-click-outside>
    <ModalBox class="w-11/12 max-w-5xl">
      <h3 class="text-lg font-bold">
        This is a wide modal!
      </h3>
      <Prose class="w-full max-w-full py-4">
        We put it inside of a `Teleport` to the `body` to keep it from
        hiding behind the sidebar navigation.
      </Prose>
      <ModalAction>
        <Button ghost @click="isOpen = false">
          Cancel
        </Button>
        <Button @click="isOpen = false">
          Buy
        </Button>
      </ModalAction>
    </ModalBox>
  </Modal>
</Teleport>

Prev Dropdown

Next Swap