Confirm

The FTConfirm component is a confirmation dialog built on top of FTModal. It exposes confirm and cancel events, customisable button labels, and an opt-in Enter-key shortcut for the confirm action.

Playground

Properties

Title

Confirm Text

Cancel Text

Wide

Submit on Enter

<template>
  <FTConfirm title="Are you sure?">
    Are you sure you want to perform this action?
  </FTConfirm>
</template>

Basic usage

vue

<script setup lang="ts">
import { ref } from 'vue';
import { FTButton, FTConfirm } from '@fasttrack-solutions/vue-components-lib';

const show = ref(false);
const onConfirm = () => {
  show.value = false;
};
</script>

<template>
  <FTButton primary @click="show = true">Delete item</FTButton>
  <FTConfirm v-if="show" title="Are you sure?" @confirm="onConfirm" @cancel="show = false">
    Are you sure you want to perform this action?
  </FTConfirm>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { FTButton, FTConfirm } from '@fasttrack-solutions/vue-components-lib';

const show = ref(false);
const onConfirm = () => {
  show.value = false;
};
</script>

<template>
  <FTButton primary @click="show = true">Delete item</FTButton>
  <FTConfirm v-if="show" title="Are you sure?" @confirm="onConfirm" @cancel="show = false">
    Are you sure you want to perform this action?
  </FTConfirm>
</template>

Keyboard

Enter / NumpadEnter — emits confirm when submitOnEnter is enabled
Escape — emits cancel. Escape handling is inherited from FTModal and can be suppressed by passing the inherited disableEsc prop (not listed in the table below)

Props

TIP

Check FTModal for all the available options in addition to the ones mentioned on this page.

Name	Default	Description
`title`	`Confirm`	Set the title on the confirm modal
`confirmText`	`Confirm`	Text label for the confirm button
`cancelText`	`Cancel`	Text label for the cancel button
`submitOnEnter`	`false`	When `true`, pressing Enter / NumpadEnter emits `confirm` while modal is open
`wide`	`false`	Inherited from `FTModal`. Renders the dialog at the wider modal width

Events

Name	Description
`confirm`	Emitted when the confirm button is clicked, or Enter / NumpadEnter is pressed when `submitOnEnter` is enabled
`cancel`	Emitted when the cancel button or close (×) is clicked, or Escape is pressed

Slots

Name	Description
`default`	Body content rendered between the headings

Confirm ​

Playground ​

Properties

Basic usage ​

Keyboard ​

Props ​

Events ​

Slots ​