DisplayOptions

A compact options bar component for toggling between different view modes or display settings (e.g., switching between table/card/calendar view). Renders a group of button options.

Usage

<script setup>
import { ref } from 'vue'
import { DisplayOptions } from 'praxis-vue-ui'

const view = ref('table')
const options = [
  { key: 'table', label: 'Table', icon: 'Table' },
  { key: 'card', label: 'Cards', icon: 'LayoutGrid' },
  { key: 'calendar', label: 'Calendar', icon: 'Calendar' },
]
</script>

<template>
  <DisplayOptions v-model="view" :options="options" />
</template>

Props

Prop	Type	Default	Description
modelValuerequired	string	—	Currently active option key. Use with v-model.
optionsrequired	DisplayOption[]	—	Array of display options to render as toggle buttons.

DisplayOption Interface

interface DisplayOption {
  key: string        // Unique identifier, used as modelValue
  label: string      // Button text
  icon?: string      // Optional Lucide icon name
}

Emits

Event	Payload	Description
update:modelValue	string	Emitted when the user clicks an option. Value is the clicked option's key.