# Modebarbutton toggle - off by default

**URL:** <https://community.plotly.com/t/modebarbutton-toggle-off-by-default/47502>\
**Category:** plotly.js\
**Created:** [November 23, 2020, 10:44pm UTC](https://community.plotly.com/t/modebarbutton-toggle-off-by-default/47502 "2020-11-23T22:44:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bishonen](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bishonen](https://community.plotly.com/u/Bishonen)\
**Post date:** [November 23, 2020, 10:44pm UTC](https://community.plotly.com/t/modebarbutton-toggle-off-by-default/47502/1 "2020-11-23T22:44:17Z")

</div>

Hi all,

I can’t really figure it out with the help of the documentation:

is there a way to make a custom modebarbutton to be a toggle with the default value being off? I’d like to indicate visually whether the button is off or on, but no combination of attr, val and toggle let me do that. Best I can get is to get it to become a toggle but with a default being turned on (color of the icon being darker).

```auto
modeBarButtonsToAdd: [
      {
        name: 'Toggle Hover Synchronisation',
        icon: mouse,
        click: toggleHover,
        attr: false,
        val: 'off',
        toggle: true,
      },
    ],

```

Thanks

---

<div class="post-metadata">

**Author:** ![EhBahSuper](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@EhBahSuper](https://community.plotly.com/u/EhBahSuper)\
**Post date:** [May 6, 2022, 5:33pm UTC](https://community.plotly.com/t/modebarbutton-toggle-off-by-default/47502/2 "2022-05-06T17:33:25Z")

</div>

There doesn’t seem to be a way to do that directly.

I set it like that to have the toggle option working (‘on’ by default):  
modeBarButtonsToAdd: [  
{  
name: ‘Toggle Hover Synchronisation’,  
icon: mouse,  
click: toggleHover,  
attr: ‘myAttr’,  
toggle: true,  
},  
],

And then I had to remove the ‘active’ class on that button so it appears ‘off’ by default :  
const myBtn = document.querySelector([‘data-attr=myAttr’]);  
myBtn?.classList.remove(‘active’);

And after that it displays and toggles as I want.