Appearance
Tag
The FTTag component displays a compact label — used for statuses, categories, filters, and metadata. The tag itself is interactive (click / Enter / Space emit select); the trailing slot can host a remove button or an edit button.
Basic usage
vue
<script setup lang="ts">
import { FTTag } from '@fasttrack-solutions/vue-components-lib';
function onSelect() {
/* ... */
}
</script>
<template>
<FTTag @select="onSelect">Status</FTTag>
</template><script setup lang="ts">
import { FTTag } from '@fasttrack-solutions/vue-components-lib';
function onSelect() {
/* ... */
}
</script>
<template>
<FTTag @select="onSelect">Status</FTTag>
</template>Playground
Tag label
Properties
Small
<template>
<FTTag>
Tag label
</FTTag>
</template>
Variants
Two visual variants: solid (dark background, default) and light.
Sizes
Three sizes: sm (20px, default), md (24px), lg (32px).
Tags hug their content by default — there is no fixed minimum width. To impose one (e.g. to keep a column of tags aligned), set --ft-tag-min-width-sm, --ft-tag-min-width-md, or --ft-tag-min-width-lg. For a hard fixed width regardless of label length, use the fixedWidth prop instead.
Icons
Pass a FA6 icon name to leadingIcon or trailingIcon (e.g. 'fas circle', 'fad star'). The prefix selects the style (fas, far, fad, …).
When trailingIcon is set and removable is false, the trailing icon renders as a button that emits the edit event when clicked.
Removable
Set removable to show an xmark dismiss button. Click emits remove. When both removable and trailingIcon are set, the remove button wins. The remove button is hidden when locked is true.
Active
The active flag applies a green status colour — useful for selected states inside filter rows or tab-like lists.
Fixed width
fixedWidth locks the tag to 160px regardless of label length — keeps a column of status tags aligned.
Custom Color
color overrides --ft-tag-bg and forces --ft-tag-fg / --ft-tag-icon to white. Use for brand or status colours that aren't covered by active.
States
disabled mutes the colour and blocks all interaction (root, remove, edit). locked mutes the colour and hides the remove / trailing-icon button entirely; the tag itself remains clickable.
Props
| Name | Default | Description |
|---|---|---|
solid | true | true = dark background variant, false = light variant |
size | 'sm' | Tag size: 'sm' (20px), 'md' (24px), or 'lg' (32px) |
disabled | false | Mutes colour and blocks every interaction (root + buttons) |
locked | false | Mutes colour, keeps cursor default, hides trailing slot (remove / edit). Root remains keyboard-focusable. |
active | false | Applies the green-teal "active" status colour |
fixedWidth | false | Locks width to 160px (centered content) |
leadingIcon | '' | FA6 icon name with style prefix (e.g. 'fas circle', 'fad star') |
trailingIcon | '' | FA6 icon name — same format as leadingIcon. Renders as an edit button. Ignored when removable is true or locked is true |
removable | false | Shows the xmark remove button. Suppressed when locked is true |
color | '' | CSS color string — overrides --ft-tag-bg and forces fg/icon to white |
ariaLabel | '' | Sets aria-label on the root element |
Events
| Name | Payload | Description |
|---|---|---|
select | — | Emitted when the root is clicked or activated via Enter / Space. Suppressed when disabled |
remove | — | Emitted when the xmark button is clicked or activated. Suppressed when disabled |
edit | — | Emitted when the trailing-icon button is clicked or activated. Suppressed when disabled |
Slots
| Slot | Description |
|---|---|
default | The tag's label |
CSS custom properties
| Variable | Default | Description |
|---|---|---|
--ft-tag-bg | var(--color-mono-700) | Background colour. Overridden per variant / state / color prop |
--ft-tag-fg | var(--color-mono-white) | Text colour. Overridden per variant / state |
--ft-tag-icon | var(--color-mono-500) | Leading-icon colour. Overridden by active and the color prop |
--ft-tag-fixed-width | 160px | Width applied when fixedWidth is true. Override per call-site to widen / narrow the column |
--ft-tag-min-width-sm | auto | Minimum width for sm tags. Defaults to auto (hug content); set to impose a floor |
--ft-tag-min-width-md | auto | Minimum width for md tags. Defaults to auto (hug content); set to impose a floor |
--ft-tag-min-width-lg | auto | Minimum width for lg tags. Defaults to auto (hug content); set to impose a floor |