Appearance
Greco Icon Buttons
The Greco theme (public/styles/greco-theme.css) restyles iconOnlyFTButtons into a compact grey "chip" — the appearance every Greco app (backoffice-admin, backoffice, rule-builder) ships. Import the theme once per app and all icon-only buttons pick it up automatically; this docs site loads it globally, so the demos below render the real Greco look.
TIP
This is a theme layer, not a component prop. The underlying component is the same FTButton iconOnly documented on the Button page — the Greco stylesheet only overrides its CSS custom properties and box size.
Default (grey) style
A resting button is a light-grey rounded box with a mid-grey icon. Hover darkens the background one step; the active state darkens it one step further (a clear step below hover) with a dark icon, so a pressed / toggled button never reads as inactive. Disabled fades to the lightest grey.
Greco icon-only — states
vue
<template>
<!-- resting -->
<FTButton iconOnly icon="fad rocket-launch" tooltip="Resting" />
<!-- pressed / toggled-on -->
<FTButton iconOnly active icon="fad rocket-launch" tooltip="Active" />
<!-- disabled -->
<FTButton iconOnly disabled icon="fad rocket-launch" tooltip="Disabled" />
</template><template>
<!-- resting -->
<FTButton iconOnly icon="fad rocket-launch" tooltip="Resting" />
<!-- pressed / toggled-on -->
<FTButton iconOnly active icon="fad rocket-launch" tooltip="Active" />
<!-- disabled -->
<FTButton iconOnly disabled icon="fad rocket-launch" tooltip="Disabled" />
</template>Sizes
The Greco theme compacts the default (medium) box to 28px (6px padding around a 16px icon) so it doesn't read as too chunky. iconSmall (24px) and iconBig (40px) keep the library's dimensions — they're explicit opt-ins.
Greco icon-only — sizes
vue
<template>
<FTButton iconOnly iconSmall icon="fad rocket-launch" tooltip="Small" />
<FTButton iconOnly icon="fad rocket-launch" tooltip="Medium (default)" />
<FTButton iconOnly iconBig icon="fad rocket-launch" tooltip="Big" />
</template><template>
<FTButton iconOnly iconSmall icon="fad rocket-launch" tooltip="Small" />
<FTButton iconOnly icon="fad rocket-launch" tooltip="Medium (default)" />
<FTButton iconOnly iconBig icon="fad rocket-launch" tooltip="Big" />
</template>Blue active variant
For icon-only buttons that toggle a mode (edit-mode toggles, active filter indicators) add data-variant="blue". The active state then fills brand blue with a white icon instead of grey-on-grey.
Greco icon-only — blue variant
vue
<template>
<FTButton iconOnly icon="fad rocket-launch" data-variant="blue" tooltip="Inactive" />
<FTButton iconOnly active icon="fad rocket-launch" data-variant="blue" tooltip="Active" />
</template><template>
<FTButton iconOnly icon="fad rocket-launch" data-variant="blue" tooltip="Inactive" />
<FTButton iconOnly active icon="fad rocket-launch" data-variant="blue" tooltip="Active" />
</template>Filter-icon variant
data-variant="filterIcon" is an extra-compact (18px) trigger for filtered-column / contextual buttons. The .is-active class marks an applied filter (green), .gray is a muted alternative.
Greco icon-only — filterIcon variant
vue
<template>
<FTButton iconOnly icon="fas filter-list" data-variant="filterIcon" tooltip="Filter" />
<FTButton
iconOnly
icon="fas filter-list"
data-variant="filterIcon"
class="is-active"
tooltip="Filtered"
/>
</template><template>
<FTButton iconOnly icon="fas filter-list" data-variant="filterIcon" tooltip="Filter" />
<FTButton
iconOnly
icon="fas filter-list"
data-variant="filterIcon"
class="is-active"
tooltip="Filtered"
/>
</template>Opting out — library default
To keep a single button on the library's bare appearance (transparent box, no grey chip) add data-appearance="lib". Everything else stays Greco-themed.
vue
<template>
<!-- keeps the unstyled library look -->
<FTButton iconOnly icon="fad rocket-launch" data-appearance="lib" tooltip="Lib default" />
</template><template>
<!-- keeps the unstyled library look -->
<FTButton iconOnly icon="fad rocket-launch" data-appearance="lib" tooltip="Lib default" />
</template>CSS custom properties
The Greco theme sets these on icon-only buttons. Override them on an ancestor to re-theme a region — they cascade like any custom property.
| CSS variable | Token | Value |
|---|---|---|
--ft-btn-border-radius | — | 4px |
--ft-btn-icon-only-bg | --color-mono-300 | #E5E5E5 |
--ft-btn-icon-only-fg | --color-mono-500 | #959595 |
--ft-btn-icon-only-bg-hover | --color-mono-400 | #CACACA |
--ft-btn-icon-only-bg-active | --color-mono-500 | #959595 |
--ft-btn-icon-only-fg-active | --color-mono-700 | #2C2C2C |
--ft-btn-icon-only-bg-loading | --color-mono-500 | #959595 |
--ft-btn-icon-only-fg-disabled | --color-mono-400 | #CACACA |
--ft-btn-icon-only-bg-disabled | --color-mono-200 | #F5F5F5 |
Blue variant (data-variant="blue") overrides the active state:
| CSS variable | Token | Value |
|---|---|---|
--ft-btn-icon-only-bg-active | --color-brand-blue-700 | #105DBA |
--ft-btn-icon-only-fg-active | --color-mono-white | #FFF |