Appearance
Button
The FTButton 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 { FTButton } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTButton } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTButton } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTButton
}
}
</script><script>
import { FTButton } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTButton
}
}
</script>Styles
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Buttons
vue
<template>
<FTButton primary>Primary</FTButton>
<FTButton secondary>Secondary</FTButton>
<FTButton tertiary>Tertiary</FTButton>
<FTButton action icon="fas plus">Action</FTButton>
</template><template>
<FTButton primary>Primary</FTButton>
<FTButton secondary>Secondary</FTButton>
<FTButton tertiary>Tertiary</FTButton>
<FTButton action icon="fas plus">Action</FTButton>
</template>Statuses
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Buttons
vue
<template>
<FTButton info>Info</FTButton>
<FTButton warning>Warning</FTButton>
<FTButton success>Success</FTButton>
<FTButton error>Error</FTButton>
</template><template>
<FTButton info>Info</FTButton>
<FTButton warning>Warning</FTButton>
<FTButton success>Success</FTButton>
<FTButton error>Error</FTButton>
</template>Disabled State
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Buttons
vue
<template>
<FTButton primary disabled>Primary</FTButton>
<FTButton secondary disabled>Secondary</FTButton>
<FTButton tertiary disabled>Tertiary</FTButton>
<FTButton action disabled icon="fas plus">Text</FTButton>
</template><template>
<FTButton primary disabled>Primary</FTButton>
<FTButton secondary disabled>Secondary</FTButton>
<FTButton tertiary disabled>Tertiary</FTButton>
<FTButton action disabled icon="fas plus">Text</FTButton>
</template>Loading State
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Buttons
vue
<template>
<FTButton primary loading>Primary</FTButton>
<FTButton tertiary loading>Tertiary</FTButton>
</template><template>
<FTButton primary loading>Primary</FTButton>
<FTButton tertiary loading>Tertiary</FTButton>
</template>Icons
Buttons can have icons placed on the left hand side of the text, exception made for action buttons which have it on the right.
Buttons
vue
<template>
<FTButton primary icon="fad circle-info">Primary</FTButton>
<FTButton secondary icon="fad circle-info">Secondary</FTButton>
<FTButton tertiary icon="fad circle-info">Tertiary</FTButton>
<FTButton action icon="fad circle-info">Action</FTButton>
</template><template>
<FTButton primary icon="fad circle-info">Primary</FTButton>
<FTButton secondary icon="fad circle-info">Secondary</FTButton>
<FTButton tertiary icon="fad circle-info">Tertiary</FTButton>
<FTButton action icon="fad circle-info">Action</FTButton>
</template>Custom Icon (SVG)
When the FontAwesome icon prop isn't a fit (e.g. a brand mark or a custom SVG asset), use the icon-left or icon-right named slots. They override the icon prop and accept any markup — inline <svg>, an <img>, or a custom component.
For iconOnly buttons just put the icon in the default slot:
Buttons
vue
<template>
<FTButton iconOnly tooltip="More">
<EllipsisIcon />
</FTButton>
<FTButton iconOnly iconSmall tooltip="Small">
<EllipsisIcon />
</FTButton>
<FTButton iconOnly iconBig tooltip="Big">
<EllipsisIcon />
</FTButton>
</template><template>
<FTButton iconOnly tooltip="More">
<EllipsisIcon />
</FTButton>
<FTButton iconOnly iconSmall tooltip="Small">
<EllipsisIcon />
</FTButton>
<FTButton iconOnly iconBig tooltip="Big">
<EllipsisIcon />
</FTButton>
</template>Left and right with a label
Buttons
vue
<template>
<FTButton primary>
<template #icon-left>
<MyCustomSvg />
</template>
Favorite
</FTButton>
<FTButton secondary>
Next
<template #icon-right>
<img src="/icons/arrow.svg" alt="" />
</template>
</FTButton>
</template><template>
<FTButton primary>
<template #icon-left>
<MyCustomSvg />
</template>
Favorite
</FTButton>
<FTButton secondary>
Next
<template #icon-right>
<img src="/icons/arrow.svg" alt="" />
</template>
</FTButton>
</template>TIP
Inline <svg> set to fill="currentColor" (or stroke="currentColor") will follow the button's text color across hover, active, and disabled states. <img>-based SVGs are static — use inline SVG when you need recoloring.
Icon Only
Buttons can be represented by a sole icon. These buttons can have Active, Inactive and Disabled states.
Buttons
vue
<template>
<FTButton active iconOnly icon="fad rocket-launch" tooltip="Active" />
<FTButton iconOnly icon="fad rocket-launch" tooltip="Inactive" />
<FTButton disabled iconOnly icon="fad rocket-launch" tooltip="Disabled" />
</template><template>
<FTButton active iconOnly icon="fad rocket-launch" tooltip="Active" />
<FTButton iconOnly icon="fad rocket-launch" tooltip="Inactive" />
<FTButton disabled iconOnly icon="fad rocket-launch" tooltip="Disabled" />
</template>Sizes
Buttons can be represented by a sole icon. These buttons can have Active, Inactive and Disabled states.
Buttons
vue
<template>
<FTButton iconOnly iconBig icon="fad rocket-launch" tooltip="Big" />
<FTButton iconOnly iconMedium icon="fad rocket-launch" tooltip="Medium" />
<FTButton iconOnly iconSmall icon="fad rocket-launch" tooltip="Small" />
</template><template>
<FTButton iconOnly iconBig icon="fad rocket-launch" tooltip="Big" />
<FTButton iconOnly iconMedium icon="fad rocket-launch" tooltip="Medium" />
<FTButton iconOnly iconSmall icon="fad rocket-launch" tooltip="Small" />
</template>Props
In addition to the standard attributes supported by HTML button FTButton accepts custom helper props
| Name | Default | Description |
|---|---|---|
loading | false | Display button in a loading state |
primary | false | Display button with primary styling |
secondary | true | Display button with secondary styling |
tertiary | false | Display button with tertiary styling |
action | false | Display button with action styling |
warning | false | Display button as warning |
success | false | Display button as success |
info | false | Display button as info |
error | false | Display button as error |
icon | '' | Display an icon within the button |
iconOnly | false | Display icon only (icon is required) |
iconSmall | false | Display icon only small |
iconBig | false | Display icon only big |
iconMedium | true | Display icon only medium |
active | false | Display icon only in active state |
tooltip | null | Display a tooltip |
tooltipPosition | up | Position of the tooltip (up, up-left, up-right, down, down-left, down-right, left, right) |
Slots
| Name | Description |
|---|---|
default | Button label content. For iconOnly buttons it acts as the icon. |
icon-left | Custom icon rendered to the left of the label. Overrides the icon prop when provided. |
icon-right | Custom icon rendered to the right of the label. Overrides the icon prop when used with action. |
CSS
Most of the default styles are setup using CSS variables for easy customization on a per project basis.
Examples
| CSS variable | Default Value |
|---|---|
--ft-btn-height | 32px |
--ft-btn-font-size | 12px |
--ft-btn-font-weight | 700 |
--ft-btn-padding-left | 16px |
--ft-btn-padding-right | 16px |
--ft-btn-main-bg-default | #E96092 |
--ft-btn-main-fg-default | #FFF |
--ft-btn-main-bg-hover | #D52454 |
...and many more...