Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Modal

It just pops and shows you something.

Default

Default

<template>
  <HLButton @click="showDefaultModal=!showDefaultModal" id="modal-btn-default">Default Modal</HLButton>
  <HLModal id="example-modal-default" type="default" v-model:show="showDefaultModal" :mask-closable="false">
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showDefaultModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

Info

<template>
  <HLButton @click="showInfoModal=!showInfoModal" id="modal-btn-info">Info Modal</HLButton>
  <HLModal id="example-modal-info" type="info" v-model:show="showInfoModal" :mask-closable="false">
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showInfoModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

Success

<template>
  <HLButton @click="showSuccessModal=!showSuccessModal" id="modal-btn-success">Success Modal</HLButton>
  <HLModal id="example-modal-success" type="success" v-model:show="showSuccessModal" :mask-closable="false">
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showSuccessModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

Warning

<template>
  <HLButton @click="showWarningModal=!showWarningModal" id="modal-btn-warning">Warning Modal</HLButton>
  <HLModal id="example-modal-warning" type="warning" v-model:show="showWarningModal" :mask-closable="false">
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showWarningModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

Error

<template>
  <HLButton @click="showErrorModal=!showErrorModal" id="modal-btn-error">Error Modal</HLButton>
  <HLModal id="example-modal-error" type="error" v-model:show="showErrorModal" :mask-closable="false">
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showErrorModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

With Custom Header

<HLButton @click="showCustomHeaderModal=!showCustomHeaderModal" id="modal-custom-header-btn-default">Open Modal</HLButton>
<HLModal id="example-custom-header-modal-default" type="default" v-model:show="showCustomHeaderModal" :showHeaderIcon="false">
  <template #header>
    <HLHeaderLite title="Modal Header" size="lg" subtitle="This is a sample subtitle" :closable="false">
      <template #header-title>
        <HLText size="2xl" :weight="'semibold'"> Modal Header with 2xl size </HLText>
      </template>
      <template #header-icons>
        <HLIcon size="lg" color="black">
          <TrendUp01Icon />
        </HLIcon>
      </template>
    </HLHeaderLite>
  </template>
  {{modalText}}
</HLModal>

Show Back Button

<template>
  <HLButton @click="showBackModal=!showBackModal" id="modal-back-btn-default">Open Modal</HLButton>
  <HLModal
    id="example-back-modal-default"
    type="default"
    v-model:show="showBackModal"
    showBack
    @back="showBackModal=false"
    :mask-closable="false"
  >
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showBackModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

Mask Closable

When the mask is closable, the modal will be closed when the mask is clicked.

<template>
  <HLButton @click="showMaskClosableModal=!showMaskClosableModal" id="modal-mask-closable-btn-default">Open Modal</HLButton>
  <HLModal id="example-mask-closable-modal-default" type="default" v-model:show="showMaskClosableModal" maskClosable>
    <template #header> Modal Header </template>
    {{modalText}}
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showMaskClosableModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

With Footer

<template>
  <HLButton @click="showModal=!showModal" id="modal-custom-header-footer-btn-default">Open Modal</HLButton>
  <HLModal id="example-custom-header-footer-modal-default" type="default" v-model:show="showModal">
    <template #header> Modal Header </template>
    {{modalText}}
    <template #footer>
      <div class="p-4">
        <HLSectionFooter id="footer" :top-padding="false" :bottom-padding="false" :horizontal-padding="false">
          <HLSectionFooterItem>
            <HLButton id="cancel">Discard</HLButton>
            <HLButton id="save" color="blue" variant="primary">Ok </HLButton>
          </HLSectionFooterItem>
        </HLSectionFooter>
      </div>
    </template>
  </HLModal>
</template>
<script setup lang="ts">
  import { HLModal, HLButton, HLSectionFooter, HLSectionFooterItem } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showModal = ref(false)
  const modalText = 'Tempore vivo desidero. Bene defungo perferendis calco avarus quas crepusculum accendo.'
</script>

Accessibility

• Always set role="dialog" + aria-modal="true" and wire the modal title into aria-labelledby.
• Point explanatory text to aria-describedby, especially for confirmations or forms.
• Sync the trigger button’s aria-expanded / aria-controls (or provide another status message) so users know when the modal opens/closes.

Imports

import { HLModal } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The unique identifier of the modal
autoFocus	boolean	false	Automatically focus on the modal when opened
className	string | undefined	undefined	Custom class name for the modal
closeOnEsc	boolean	true	Close the modal when the Escape key is pressed
maskClosable	boolean	true	Close the modal when clicking on the mask
show	boolean	false	Control the visibility of the modal
showBack	boolean	false	Show the back button in the modal
showClose	boolean	true	Show the close button in the modal
showFooter	boolean	true	Show the footer section in the modal
showHeader	boolean	true	Show the header section in the modal
showHeaderIcon	boolean	true	Show the icon in the header section
to	string | HTMLElement | undefined	undefined	Specify the container to which the modal is appended
trapFocus	boolean	true	Traps the focus inside the modal
type	'default' | 'info' | 'success' | 'warning' | 'error'	'default'	Type of the modal indicating its purpose
width	number	483	Width of the modal in pixels
zIndex	number | undefined	undefined	z-index of the modal

Note

If you're facing issues with unfocusable input elements when you have multiple instances open, try setting :trapFocus="false" on the underlying instance of the component.

Accessibility

• Focus trapping keeps keyboard users within dialogs/drawers so they can’t tab into the page behind the overlay. Disable it only when you intentionally need the background to stay reachable (for example, nested panels) and provide guidance on how to return to the original surface.
• When you turn trapping off, manage focus manually: move focus to the element that should be active next and offer a clear close button so users can re-enter the dialog flow without relying on a mouse.

Emits

Name	Default	Trigger
@after-enter	() => void	after the modal has fully entered
@after-leave	() => void	after the modal has fully left
@back	() => void	when the back button is clicked
@before-leave	() => void	before the modal starts to leave
@close	() => void	when the modal is closed
@esc	() => void	when the Escape key is pressed
@left-click	() => void	when the footer left button is clicked
@mask-click	(payload: PointerEvent) => void	when the mask (overlay) is clicked
@right-primary-click	() => void	when the footer right primary button is clicked
@right-secondary-click	() => void	when the when the footer right secondary button is clicked
@update:show	(payload: boolean) => void	when the visibility of the modal is updated (show/hide toggle)

Slots

Name	Parameters	Description
default	()	The default content slot
header	()	The header content slot
footer	()	The footer content slot