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>