Editor formatting
Represent an on/off command such as bold with a pressed button.
Components / Actions
Toggle
A native two-state button with pressed semantics.
Preview
Use cases
Persistent view preference
Bind a boolean preference and reflect its current value.
Usage example
Vue
<script setup lang="ts">
import { ref } from 'vue'
import Toggle from './components/ui/toggle/Toggle.vue'
const bold = ref(false)
</script>
<template>
<Toggle v-model="bold" variant="outline" aria-label="Bold">B</Toggle>
</template>More examples
Bold text
The button communicates the state with aria-pressed.
Bold text
<script setup lang="ts">
import { ref } from 'vue'
import Toggle from './components/ui/toggle/Toggle.vue'
const bold = ref(false)
</script>
<template><Toggle v-model="bold" aria-label="Bold" variant="outline"><strong>B</strong></Toggle></template>Show grid lines
A text label can provide the accessible name directly.
Show grid lines
<script setup lang="ts">
import { ref } from 'vue'
import Toggle from './components/ui/toggle/Toggle.vue'
const showGrid = ref(true)
</script>
<template><Toggle v-model="showGrid">Grid lines</Toggle></template>Key API
The most useful props, models, slots, events, and methods for this component.
| Name | Type | Default or requirement |
|---|---|---|
v-model | boolean | false |
variant | default | outline | default |
size | sm | md | lg | md |
disabled | boolean | false |
type | button | submit | reset | button |
default | slot with { pressed } | required |
The native button exposes aria-pressed and data-state. Give it visible text or an ARIA name; disabled toggles cannot update the model and leave the tab order.
Implementation notes
- Toggle models a boolean pressed state, not a form checkbox value.
- The default slot can receive { pressed } when the visual content needs to react to state.
Accessibility and localization
- Give a symbol-only toggle an aria-label.
- Keep the accessible name stable while aria-pressed communicates on and off.