FTxButton

A custom button component that extends Quasar's QBtn with default styling.

Props

All standard Quasar QBtn props are supported.

Defaults:

• unelevated: true
• color: 'primary'

Usage

<template>
  <FTxButton @click="handleClick">
    Click Me
  </FTxButton>
</template>

<script setup>
import { FTxButton } from '@ftx/ui';

function handleClick() {
  console.log('Button clicked');
}
</script>

Examples

Different Colors

<template>
  <div>
    <FTxButton color="primary">Primary</FTxButton>
    <FTxButton color="secondary">Secondary</FTxButton>
    <FTxButton color="negative">Negative</FTxButton>
    <FTxButton color="positive">Positive</FTxButton>
  </div>
</template>

With Icons

<template>
  <FTxButton icon="save" label="Save" />
  <FTxButton icon-right="arrow_forward" label="Next" />
</template>

Loading State

<template>
  <FTxButton :loading="isLoading" @click="handleSave">
    Save
  </FTxButton>
</template>

<script setup>
import { ref } from 'vue';
import { FTxButton } from '@ftx/ui';

const isLoading = ref(false);

async function handleSave() {
  isLoading.value = true;
  await saveData();
  isLoading.value = false;
}
</script>

Related

• Quasar QBtn Documentation