# Prompt

The KPrompt component is used to display a dialog that prompts a user to take an action.

<KButton
  appearance="primary"
  @click="defaultIsOpen = true"
>
  Prompt
</KButton>

<KPrompt
  :is-visible="defaultIsOpen"
  message="Hello, World?"
  @canceled="defaultIsOpen = false"
  @proceed="defaultIsOpen = false"
/>

export default {
  data () {
    return {
      defaultIsOpen: false
    }
  }
}

# Props

# isVisible

Tells the component whether or not to render the open prompt.

# title

Text displayed in header if not using slot. If no title is provided, the prompt type is used.

# message

Text to display in body section if not using slot.

<KPrompt
  :is-visible="contentIsOpen"
  title="Look Mah!"
  message="I'm prompting you"
  @canceled="contentIsOpen = false"
  @proceed="contentIsOpen = false"
/>

# actionButtonText

Change the text content of the submit/proceed button.

# cancelButtonText

Change the text content of the close/cancel button.

<KPrompt
  :is-visible="contentIsOpen"
  actionButtonText="Let's do it!"
  cancelButtonText="Abort"
  @canceled="buttonsIsOpen = false"
  @proceed="buttonsIsOpen = false"
/>

# actionPending

This boolean indicates if an action is being taken on the dialog and we should disable the action button to prevent spam clicking.

<KPrompt
  :is-visible="pendingIsOpen"
  message="Click Cancel to close me"
  :action-pending="true"
  @canceled="pendingIsOpen = false"
  @proceed="pendingIsOpen = false"
/>

# type

This prop determines the look and feel of the dialog. Can be danger, warning, or info. Defaults to info.

# Information

Use the info prompt type to notify the user about general information associated with the action about to be taken.

<KPrompt
  :is-visible="infoIsOpen"
  message="You have been informed 🕵🏻‍♂️"
  @canceled="infoIsOpen = false"
  @proceed="infoIsOpen = false"
/>

# Warning

Use the warning prompt type if the user needs to be notified that there is a risk associated with the action about to be taken. We will display a warning icon and prepend the 'Warning:' in the title for this flavor.

<KPrompt
  :is-visible="warningIsOpen"
  message="I'm warning you 🤔"
  type="warning"
  @canceled="warningIsOpen = false"
  @proceed="warningIsOpen = false"
/>

# Danger

Use the danger prompt type if the user is taking an irreversible action, like deleting an item. You can use this type in conjuction with confirmationText to further restrict the action.

<KPrompt
  :is-visible="dangerIsOpen"
  type="danger"
  message="This is dangerous ☠️"
  @canceled="dangerIsOpen = false"
  @proceed="dangerIsOpen = false"
/>

# confirmationText

Provide a string the user must type before the action button becomes enabled

<KPrompt
  :is-visible="dangerConfirmIsOpen"
  type="danger"
  message="This is dangerous ☠️"
  confirmationText="I Agree"
  @canceled="dangerConfirmIsOpen = false"
  @proceed="dangerConfirmIsOpen = false"
/>

# preventProceedOnEnter

If you don't want to emit the proceed event upon pressing the Enter key, you can prevent it using this prop. Defaults to false.

<KPrompt
  :is-visible="preventProceed"
  type="danger"
  message="I don't care if you press Enter"
  prevent-proceed-on-enter
  @canceled="preventProceed = false"
  @proceed="preventProceed = false"
/>

# Slots

There are 3 designated slots you can use to display content in the modal.

header-content
body-content
action-buttons - Contains cancel & action buttons by default.

<KPrompt
  :is-visible="slotsIsOpen"
  @canceled="slotsIsOpen = false"
  @proceed="slotsIsOpen = false">
  <template v-slot:header-content>
    <KIcon
      icon="immunity"
      color="#7F01FE"
      class="mr-2"
      size="20" />
    Look Mah!
  </template>
  <template v-slot:body-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
  </template>
  <template v-slot:action-buttons>
    <KButton appearance="outline" @click="slotsIsOpen = false" class="non-visual-button">Close</KButton>
  </template>
</KPrompt>

# Events

@canceled - Emitted when cancel/close button is clicked or the Escape key is pressed
@proceed - Emitted when action button is clicked or the Enter key is pressed

# Theming

Variable	Purpose
`--KPromptMaxHeight`	Max height of body content in prompt

← Popover Radio →