Appearance
Confirm
The FTConfirm component replaces the standard html button with a design theme and a multitude of options.
Usage
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTConfirm } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTConfirm } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTConfirm } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTConfirm
}
}
</script><script>
import { FTConfirm } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTConfirm
}
}
</script>Live demo
Buttons
vue
<template>
<FTConfirm v-if="showModal" @close-modal="showModal = false" @confirm="handleConfirm">
Modal body text goes here.
</FTConfirm>
</template><template>
<FTConfirm v-if="showModal" @close-modal="showModal = false" @confirm="handleConfirm">
Modal body text goes here.
</FTConfirm>
</template>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 |
Events
| Name | Description |
|---|---|
confirm | Event when user click confirm button |
cancel | Event when user click cancel button |