Modal

Organism

Modals are overlay components used for tasks or decisions that require user focus and confirmation. They block access to the main interface and should be used only for critical actions or information that cannot appear inline. When a modal appears, a background overlay using black at 25% opacity (RGBA 0,0,0,0.25) is applied.

Playground

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

const modelValue = defineModel<boolean>('modelValue', {
  required: true,
  default: false,
});

Properties

export interface ModalProps {
  title?: string;
  closeOnClick?: boolean;
  size?: 'narrow' | 'wide';
  closeButton?: boolean;
  headingIcon?: IconName;
  headerSize?: 'default' | 'tiny';
  content?: any;
  infoText?: string;
  actions?: (AppButtonProps & {
    component?: 'AppButton',
    text: string;
    onClick: () => void;
  } | Omit<LinkProps, 'to'> & {
    component: 'Link',
    to?: string;
    text: string;
    onClick: () => void;
  })[];
}

Developer Notes

NOTE

Submit Event (@submit): Triggered when user clicks the default submit button or any other button who's onClick function calls the submit component method.

Usage Example

If you want to use the built-in code control, it is strongly recommended that you define your actions to include one of the exposed util functions cancel or submit via the component ref.

vue

<script lang="ts" setup>

const pg = reactive({
  modelValue: false,
  title: 'Dialog Window',
  closeOnClick: true,
  size: 'wide' as NonNullable<ModalProps['size']>,
  closeButton: true,
  actions: [
    {
      text: 'Link',
      component: 'Link' as const,
      type: 'primary' as NonNullable<LinkProps['type']>,
      onClick: () => {
        console.log('Cancel');
        modalRef.value?.cancel();
      },
    },
    {
      text: 'Secondary',
      secondary: true,
      icon: 'close' as IconName,
      onClick: () => {
        console.log('Close');
        modalRef.value?.cancel();
      },
    },
    {
      text: 'Primary',
      icon: 'send' as IconName,
      trailingIcon: true,
      onClick: () => {
        console.log('Send');
        modalRef.value?.submit();
      },
    },
  ],
});

const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modal');

const showModal = () => {
  modalRef.value?.showModal({
    title: 'Opened via code',
    size: pg.size,
    closeButton: pg.closeButton,
    headingIcon: 'ai' as IconName,
  });
};
</script>

<template>
  <Modal ref="modal" v-bind="pg" v-model="pg.modelValue" :headingIcon="icon">
    Here is your modal content definition
    <Logo :brand="'PohlCon'" />
  </Modal>
</template>

Tokens

SCSS Variable

Value

$modal-color

--bds-brand-primary-color

$modal-borderColor

--color-grey-90

$modal-color-text

--color-grey-25

$modal-color-text-locked

--color-grey-70

Anatomy

Icon - Optional leading status icon that communicates context (info/success/warning/error).
Heading - Concise, action-oriented title describing the purpose of the modal. Single line preferred.
Icon Button (Close) - Dismiss control in the top-right corner.
Slot (content area) - Flexible body region for any content. Adapts to content and becomes scrollable when height exceeds max (80vh).
Footer with Buttons — Primary, Secondary, Tertiary (link).

Variants

Content

Use the slot property to inject content into a Modal without detaching. Simply turn the card content into a local component and swap it out with the slot.

Size

Modals are available in two fixed widths: 400 px (narrow) and 600 px (wide)
The modal’s height automatically adjusts to its content, up to a maximum of 80vh
When the content exceeds this height, the modal body becomes scrollable to ensure accessibility and usability on all screen sizes.

Heading Icon

Show or hide a heading Icon

Buttons

Controls which action buttons to be rendered in the modal footer.
The footer can display a primary button, an optional secondary button, and an optional link.
Each of these buttons can be shown or hidden depending on the use case.

Close Button

Show or hide a close button

Modal ​

Playground ​