Prompt

KPrompt is a pop-up window that temporarily interrupts the user's interaction with the main content, usually to require user confirmation before proceeding with an action. This component uses KModal under the hood.

NOTE

Consider using KModal instead if your use case is one of the below:

• you need to display some information to the user but their input/interaction is not required
• you need to customize the appearance of elements in the modal (e.g. hide the title or provide custom footer content)
• you need to provide a custom modal layout that differs significantly from the default layout (modal header, followed by content section, followed by footer)

<KPrompt
  confirmation-text="confirm"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

Props

visible

A boolean that defines whether the prompt is shown.

<template>
  <KButton @click="promptVisible = true">Prompt</KButton>

  <KPrompt
    :visible="promptVisible"
    title="Prompt"
    @cancel="handlePromptClose"
    @proceed="handlePromptClose"
  />
</template>

<script setup lang="ts">
const promptVisible = ref<boolean>(false)

const handlePromptClose = () => {
  promptVisible.value = false
}
</script>

title

A string to be displayed as the prompt dialog title. Can also be slotted. If no title provided, defaults to "Confirm your action".

<KPrompt
  title="Long prompt title gets truncated with an ellipsis"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

confirmationText

A string the user must type before the action button becomes enabled. Pressing Enter in the confirmation text input will trigger the proceed action.

<KPrompt
  confirmation-text="confirm"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

message

Message string to be displayed in prompt content section.

<KPrompt
  message="This action cannot be reversed."
  confirmation-text="confirm"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

confirmationPrompt

String above the input field when confirmationText prop is present.

Defaults to 'Type "{confirmationText}"" to confirm your action.' where {confirmationText} is replaced with the string passed through the confirmationText prop.

<KPrompt
  confirmation-prompt="Please type {confirmationText} below to delete this resource permanently."
  confirmation-text="delete permanently"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

actionButtonText

Text to be displayed in action button. Defaults to "Confirm".

<KPrompt
  action-button-text="Acknowledge"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

actionButtonAppearance

Appearance of action button. See KButton appearance prop for more details. Defaults to primary.

<KPrompt
  action-button-appearance="danger"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

actionButtonDisabled

Set to true to disable the action button. Defaults to false.

Action button enabled

<KPrompt
  :action-button-disabled="false"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

cancelButtonText

Text to be displayed in cancel button. Defaults to "Cancel".

<KPrompt
  cancel-button-text="Leave"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

cancelButtonAppearance

Appearance of cancel button. See KButton appearance prop for more details. Defaults to tertiary.

<KPrompt
  cancel-button-appearance="secondary"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

cancelButtonDisabled

Set to true to disable the cancel button. Defaults to false.

Cancel button enabled

<KPrompt
  :cancel-button-disabled="false"
  :visible="promptVisible"
  title="Prompt"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

modalAttributes

KPrompt provides a modalAttributes prop to expose secondary KModal component props for customization (check out KModal props for details).

interface ModalAttributes {
  tabbableOptions?: Object
  maxWidth?: string
  maxHeight?: string
  closeOnBackdropClick?: boolean
  inputAutofocus?: boolean
}

NOTE

inputAutofocus prop defaults to true in KPrompt for better UX when confirmationText is provided. You can change that simply by setting inputAutofocus property to false through modalAttributes prop.

<KPrompt
  :modal-attributes="{ maxWidth: '90%' }"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

errorMessage

Error message text that will be displayed once user attempts to proceed after having typed in the wrong confirmation prompt. Default value is "You must enter the text as indicated above to confirm.".

<KPrompt
  error-message="Wrong confirmation text entered."
  confirmation-text="confirm"
  confirmation-prompt="Type in something other than {confirmationText} and press Enter."
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
/>

Slots

default

Slot for prompt content.

<KPrompt
  title="Prompt"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
>
  <KInput label="First name" required />
  <KInput label="Last name" required />
</KPrompt>

title

Slot for title string.

<KPrompt
  title="Title"
  :visible="promptVisible"
  @cancel="handlePromptClose"
  @proceed="handlePromptProceed"
>
  <template #title>
    Slotted title
  </template>
</KPrompt>

Events

proceed

Emitted when action button is clicked. Doesn't pass any payload.

cancel

Emitted when cancel button or close icon (when not hidden) is clicked. Doesn't pass any payload.