# Is there a way to create a custom settings toggle button?

**URL:** https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036
**Category:** Support
**Tags:** react, bitmovin-player, bitmovin, web
**Created:** [June 24, 2024, 6:15pm UTC](https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036 "2024-06-24T18:15:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![carlos.salmanca](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@carlos.salmanca](https://community.bitmovin.com/u/carlos.salmanca)
#### Post date: [June 24, 2024, 6:15pm UTC](https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036/1 "2024-06-24T18:15:09Z")

</div>

### Product

Player

### Question

I’m creating a custom ui config for bitmovin on my react app but I’m not sure how can I create a custom SettingsToggleButton because there is not documentation about it. This is what I have so far:

```auto
new SettingsToggleButton({
    autoHideWhenNoActiveSettings: false,
    settingsPanel: new SettingsPanel({
      components: [
        new SettingsPanelPage({
            title: 'Las settings',
          components: [
            new SettingsPanelItem({
                label: 'Label Text', 
              }),
          ]
        })
      ]
    })
  });

```

Actually I can see the button, but if I click on it nothing happens.

---

<div class="post-metadata">

### Author: ![ludovic.michaud](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/ludovic.michaud/32/811_2.png) [@ludovic.michaud](https://community.bitmovin.com/u/ludovic.michaud)
#### Post date: [June 24, 2024, 9:23pm UTC](https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036/2 "2024-06-24T21:23:18Z")

</div>

Hi,  
The following code sample shows how to create a custom Setting menu and button.

> <https://github.com/bitmovin/bitmovin-player-web-samples/blob/main/playerUi/separatedAudioSubtitleSettings.html#L204>

Please let me know in case you have any questions.

---

<div class="post-metadata">

### Author: ![carlos.salmanca](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@carlos.salmanca](https://community.bitmovin.com/u/carlos.salmanca)
#### Post date: [June 25, 2024, 4:03pm UTC](https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036/3 "2024-06-25T16:03:07Z")

</div>

Thanks for the help Ludo, I’m able to see the settings toggle button but when I click on it nothing happens and nothing is displayed, just an empty click. This is what I got so far

```auto
export const settingsToggleButton = new SettingsToggleButton({
    autoHideWhenNoActiveSettings: true,
    text: 'The Settings',
    settingsPanel: new SettingsPanel({
      components: [
        new SettingsPanelPage({
          tabIndex: 0,
          components: [
            new SettingsPanelItem('Quality',new VideoQualitySelectBox()),
            new SettingsPanelItem('Speed',new PlaybackSpeedSelectBox()),
          ]
        })
      ],
      hidden: true
    })
  });

```

I was checking the repo that you send to me and everything seems alrigth, I’m not sure what I’m missing

---

<div class="post-metadata">

### Author: ![carlos.salmanca](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@carlos.salmanca](https://community.bitmovin.com/u/carlos.salmanca)
#### Post date: [June 25, 2024, 6:24pm UTC](https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036/4 "2024-06-25T18:24:55Z")

</div>

I found the problem, we have to add the settingsPanel to the ControlBar first and then add it again (not sure why) to the SettingsToggleButton inside of a Container within the same ControlBar.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/bitmovin/original/1X/1ab86334145095b0af9c5b924fa3ae6d920b6482.png) [@system](https://community.bitmovin.com/u/system)
#### Post date: [June 25, 2024, 7:25pm UTC](https://community.bitmovin.com/t/is-there-a-way-to-create-a-custom-settings-toggle-button/3036/5 "2024-06-25T19:25:12Z")

</div>

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.