Appearance
ButtonAdd
The FTButtonAdd component provides an inline "add item" affordance — a full-width button typically placed at the bottom of a list or table to invite the user to add a new row or entry.
Basic usage
vue
<script lang="ts" setup>
import { FTButtonAdd } from '@fasttrack-solutions/vue-components-lib';
</script>
<template>
<FTButtonAdd label="Add item" />
</template><script lang="ts" setup>
import { FTButtonAdd } from '@fasttrack-solutions/vue-components-lib';
</script>
<template>
<FTButtonAdd label="Add item" />
</template>Playground
Properties
<template>
<FTButtonAdd />
</template>
The default slot overrides the label prop and accepts any markup.
Props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | 'Add item' | Button label text |
disabled | boolean | false | Disables the button and fades icon and label |
Slots
| Name | Description |
|---|---|
default | Overrides the label prop with any markup |
CSS
| CSS Variable | Default Value | Description |
|---|---|---|
--ft-button-add-height | 67px | Height of the button |
--ft-button-add-padding | 12px | Horizontal padding |