Image Viewer | Dialtone Design System

Examples

import { DtImageViewer } from '@dialpad/dialtone-vue';

Name	Default	Type
`ariaLabel` required		`string` Aria label
`imageAlt` required		`string` Alt text of image
`imageSrc` required		`string` URL of the image to be shown
`appendTo`	`'body'`	`string\|HTML_ELEMENT_TYPE` By default the portal appends to the nearest ancestor element when inside one (keeping the image viewer in the browser's top layer), or to the body otherwise. We can modify this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent. The appendTo prop expects a CSS selector string or an actual DOM node. type: string \| HTMLElement, default: 'body'
`contentMode`		`"light"` \| `"dark"` \| `"invert"` Applies a color mode to the positioned content element. `light` and `dark` are explicit overrides. `invert` computes the opposite of the nearest ancestor's mode and stays reactive.
`imageButtonClass`	`''`	`string` Image Class
`open`	`null`	`"null"` \| `"true"` \| `"false"` Controls whether the image modal is shown. When null (default), the image modal triggers on click. When set to true or false, the default trigger is disabled and the parent controls visibility via v-model:open.

Name	Type
`opened`	`Boolean` Emitted when popover is shown or hidden
`update:open`	`undefined` Event fired to sync the open prop with the parent component

Image Viewer documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope