Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



You can install the component using NPM or Yarn.

npm install @tournant/switch-button --save

If you use Yarn:

yarn add @tournant/switch-button

Once the component is installed you need to import it wherever you want to use it.

import TournantSwitchButton from '@tournant/switch-button'

Don’t forget to add it to the registered components (been there, done that):

components: {
  // ... all the other amazing components


Use this switch button, or toggle button as they are sometimes called, to implement a setting where you need literally an on-off switch (think: dark mode). Read here more about the decision to not implement it with a checkbox input.


Use the value prop to set the switch button's state:

<tournant-switch-button value="true">Tournant awesomeness</tournant-switch-button>

To use <tournant-switch-button> as a controlled component, use the v-model attribute to bind it:

<tournant-switch-button v-model="pidgeon">Notify me by carrier pidgeon</tournant-switch-button>

To supply a both visual and programmatically determined label for your switch button instance use the default slot like this:

<tournant-switch-button>Dark mode</tournant-switch-button>

Other visually perceivable texts are available: the on-label prop (default value: "On", type String) labels the "on" state, whereas – surprisingly – the off-label prop (default value: "Off", type String) labels the "off" state:

<tournant-switch-button onLabel="An" offLabel="Aus">Kontrastmodus</tournant-switch-button>


The component exposes the following CSS classes for its parts:

Classname Element
t-ui-switch-button Root
t-ui-switch-button__button The button itself
t-ui-switch-button__label The visual label
t-ui-switch-button_\text Generic container for the visual state label
t-ui-switch-button_\text--on Visual state label for "on" state
t-ui-switch-button_\text-off Visual state label for "off" state

Bugs & Enhancements

If you found a bug, please create a bug ticket.

For enhancements please refer to the contributing guidelines.

You can’t perform that action at this time.