Toggle

Toggle switch estilo terminal con [ON] / [OFF].

Toggle

Demo

<Toggle v-model="enabled" />
<Toggle v-model="custom" :labels="{ on: 'SI', off: 'NO' }" color="success" />

Props

modelValue

Estado del toggle (v-model booleano).

<Toggle v-model="enabled" />

color

Color del texto cuando está activo.

<Toggle v-model="custom" color="primary" />
<Toggle v-model="custom" color="success" />
<Toggle v-model="custom" color="warning" />
<Toggle v-model="custom" color="danger" />

disabled

Deshabilita la interacción.

[OFF]

<Toggle v-model="enabled" disabled />

labels

Texto personalizado para los estados on/off.

<Toggle v-model="enabled" :labels="{ on: 'SI', off: 'NO' }" />

Events

Evento	Payload	Descripción
update:modelValue	boolean	Se emite al hacer toggle

Tipos

Labels

Campo	Tipo	Requerido	Descripción
on	string	✅	Texto estado ON
off	string	❌	Texto estado OFF

API

Prop	Tipo	Default	Descripción
modelValue	boolean	false	Estado del toggle (v-model)
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color del toggle
disabled	boolean	false	Deshabilitar
labels	Labels	{ on: 'ON', off: 'OFF' }	Texto personalizado

Tokens usados

--font-mono, --color-*