SwitchButton

Toggle button component with active/inactive states, perfect for filters and view mode switches.

Live Demo

States:
Toggle: Inactive
View: List
Archived: Hidden

States

Usage

Basic

<template>
  <orio-switch-button v-model="isEnabled">
    Enable Feature
  </orio-switch-button>
</template>

<script setup>
import { ref } from 'vue'

const isEnabled = ref(false)
</script>

Filter Buttons

<template>
  <div class="filters">
    <orio-switch-button v-model="showCompleted">
      Completed
    </orio-switch-button>
    <orio-switch-button v-model="showPending">
      Pending
    </orio-switch-button>
    <orio-switch-button v-model="showCancelled">
      Cancelled
    </orio-switch-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showCompleted = ref(true)
const showPending = ref(true)
const showCancelled = ref(false)
</script>

Disabled State

<orio-switch-button v-model="option" :disabled="true">
  Locked Option
</orio-switch-button>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Active state (v-model)
disabled	boolean	false	Disables button interaction

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when button is toggled

Slots

Slot	Description
default	Button label text/content

Keyboard Support

• Space or Enter - Toggle the button state
• Tab - Navigate between switch buttons

Styling

The switch button uses these CSS variables:

--color-surface         /* Inactive background */
--color-muted           /* Inactive text color */
--color-border          /* Default border */
--color-accent          /* Active text and border */
--color-accent-soft     /* Active background */
--border-radius-md      /* Border radius */

Use Cases

• Filters: Toggle visibility of specific content categories
• View Modes: Switch between different display layouts (grid/list, compact/detailed)
• Options: Enable/disable features or settings
• Multi-select: Allow users to select multiple independent options