Toggle Button
Keep one action pressed until the same action is invoked again.
Usage
Formatting
Keep a formatting action pressed until the same action is invoked again.
Keep a formatting action pressed until the same action is invoked again.
<!-- Toggle Button / Formatting -->
<script setup lang="ts">
import { ref } from 'vue'
import { ToggleButton } from '@sectile/vue/toggle-button'
const pressed = ref(false)
</script>
<template>
<ToggleButton v-model="pressed">Bold</ToggleButton>
</template>Alert
Keep an alert-watching action active until the user turns it off.
Keep an alert-watching action active until the user turns it off.
<!-- Toggle Button / Alert -->
<script setup lang="ts">
import { ref } from 'vue'
import { ToggleButton } from '@sectile/vue/toggle-button'
const pressed = ref(false)
</script>
<template>
<ToggleButton v-model="pressed">Bold</ToggleButton>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Let the parent own the current value and apply accepted changes back to the component.
<!-- Toggle Button / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { ToggleButton } from '@sectile/vue/toggle-button'
const pressed = ref(false)
</script>
<template>
<ToggleButton v-model="pressed">Bold</ToggleButton>
</template>API
Vue package: @sectile/vue/toggle-button
ToggleButton
Props
ToggleButtonProps
as- Type
PrimitiveAsDefault'button'Element or component rendered for this part.
asChild- Type
booleanDefaultfalseWhether to merge this part into its single child instead of rendering a wrapper.
defaultValue- Type
booleanDefaultfalseInitial value used when the component owns its state.
disabled- Type
booleanDefaultfalseWhether interaction is unavailable.
modelValue- Type
booleanDefaultundefinedCurrent value when state is controlled by the parent.
readonly- Type
booleanDefaultfalseWhether the value can be inspected but not changed.
Slots
ToggleButtonSlotProps
disabled- Type
booleanWhether interaction is unavailable.
pressed- Type
booleanWhether the toggle is pressed.
readonly- Type
booleanWhether the value can be inspected but not changed.
Events
ToggleButton
update:modelValue- Payload
booleanEmitted when the component requests a new controlled value.
Other types
ToggleButtonValueChangeHandler
type ToggleButtonValueChangeHandler = (value: boolean) => voidParts
Shared scope: [data-scope="toggle-button"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Defines the component boundary and owns its composed parts. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Space | Toggle the current value. |
| Tab | Move through the normal document focus order. |
Accessibility
The button exposes pressed state and keeps disabled and readonly behavior distinct.
See the corresponding WAI-ARIA pattern for the host accessibility contract.