Button Group
Group buttons with UiButtonGroup, build segmented toggles with UiButtonToggleGroup, or pin floating actions with UiButtonFabGroup.
Connect buttons
<template>
<UiButtonGroup connected>
<UiButton variant="outline" text="Day" />
<UiButton variant="outline" text="Week" />
<UiButton variant="outline" text="Month" />
</UiButtonGroup>
</template>
Add joined for a seamless (gap-less) group, or vertical to stack.
A group of only text buttons, like a row of icon actions, sits closer (--cffy-space-4): a text button has no visible edge, so its own padding already spaces it.
Build a toggle group
<script setup lang="ts">
import type { IButtonToggleOption } from '@colorffy/ui'
import { ref } from 'vue'
const view = ref('list')
const options: IButtonToggleOption[] = [
{ id: 'list', title: 'List', icon: '' },
{ id: 'grid', title: 'Grid', icon: '' },
]
</script>
<template>
<UiButtonToggleGroup
v-model="view"
:options="options"
aria-label="View mode"
/>
</template>
It is single-select (role="radiogroup"): arrow keys, Home and End move the selection, and disabled options are skipped.
Pin floating actions
<template>
<UiButtonFabGroup>
<UiButton variant="filled" color="primary" icon>
<template #icon><UiIconMaterial icon-code="" /></template>
</UiButton>
</UiButtonFabGroup>
</template>
UiButtonGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
connected | boolean | false | Reduced gap; the ends are pill-shaped (square when --cffy-shape-control is 0) and the inner corners follow --cffy-shape-control, up to a quarter of the button's height. |
joined | boolean | false | Seamless, gap-less group (requires connected). |
vertical | boolean | false | Stack buttons vertically. |
customClass | string | null | — | Extra classes. |
UiButtonToggleGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
options | IButtonToggleOption[] | — | Options: { id, title, icon?, iconClass?, text?, badge?, active?, disabled? }. |
modelValue | string | — | Selected option id, bound with v-model. When bound, it overrides each option's active. |
ariaLabel | string | 'Toggle button group' | Accessible group label. |
Emits: update:modelValue (the selected id) and optionClick(event, item), on pointer or keyboard selection; neither fires for disabled options.
UiButtonFabGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
top | boolean | false | Anchor to the top instead of the bottom. |
start | boolean | false | Anchor to the start (left) instead of the end. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |
CSS variables
Set these on :root or on a wrapper. Connected and joined groups, and groups of only text buttons, keep their tight gap, the FAB group its mobile offsets, and the selected toggle its wider corners.
:root {
--cffy-toggle-btn-active-border-color: var(--cffy-accent-a10);
--cffy-fab-group-offset-block: var(--cffy-space-32);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-btn-group-gap | --cffy-space-12 --cffy-space-8 | Gap of UiButtonGroup (row, column) |
--cffy-chip-group-gap | --cffy-space-8 | Gap of UiChipGroup |
--cffy-fab-group-offset-block / --cffy-fab-group-offset-inline | --cffy-space-24 + --cffy-space-4 | FAB distance from the screen edges |
--cffy-fab-group-gap | --cffy-space-16 | Space between FABs |
--cffy-toggle-btn-group-gap | --cffy-space-14 | Gap of UiButtonToggleGroup |
--cffy-toggle-btn-bg-color / --cffy-toggle-btn-color | transparent / --cffy-on-background | Toggle background and text |
--cffy-toggle-btn-subtitle-color | --cffy-muted-a10 | Toggle subtitle |
--cffy-toggle-btn-border-width / --cffy-toggle-btn-border-color | --cffy-border-width-sm / --cffy-outline-button | Toggle border |
--cffy-toggle-btn-radius / --cffy-toggle-btn-padding | --cffy-shape-control, up to --cffy-shape-container / --cffy-space-12 | Toggle corners and padding |
--cffy-toggle-btn-hover-border-color | --cffy-primary-a10 | Hovered or focused toggle outline |
--cffy-toggle-btn-active-bg-color / --cffy-toggle-btn-active-border-color | --cffy-surface-container-low / --cffy-primary-a10 | Selected toggle |
--cffy-toggle-btn-easing / --cffy-toggle-btn-duration | --cffy-ease-decelerate / --cffy-duration-300 | Toggle transitions |