KSelectableButtonGroup

示例

Single Select

Choose a color

Selected:

Multi Select (teal variant)

Choose colors

Selected:

A responsive grid of selectable buttons supporting single or multiple selection, with optional collapsible behavior.

Props

Name	Type	Default	Description
title	string	—	Group title displayed above the buttons.
items	SelectableButtonItem[]	— (required)	Array of items with value, label, optional icon, and optional tagCount.
modelValue	string | number | Array<string | number>	—	Currently selected value(s).
multiple	boolean	false	Whether multiple items can be selected.
collapsible	boolean	false	Whether to collapse the grid with a "Show more" toggle.
collapseHeight	number	160	Maximum height in pixels when collapsed.
loading	boolean	false	Whether to show a loading skeleton instead of buttons.
variant	'violet' | 'teal' | 'amber' | 'rose' | 'green'	'violet'	Color variant for active states and badges.
class	string	—	Additional CSS classes for the root element.

SelectableButtonItem: { value: string \| number; label: string; icon?: string; tagCount?: number }

Emits

Name	Parameters	Description
update:modelValue	string | number | Array<string | number>	Emitted when the selection changes.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

<script setup> import { ref } from 'vue' import { KSelectableButtonGroup } from '@kK-2004/ui-component' const selected = ref('') const items = [ { value: 'vue', label: 'Vue', icon: '🟢' }, { value: 'react', label: 'React', icon: '🔵' }, { value: 'svelte', label: 'Svelte', icon: '🟠' }, ] </script> <template> <KSelectableButtonGroup v-model="selected" title="Framework" :items="items" variant="violet" /> </template>

Framework