ToggleWidget

This widget renders an icon button with internal on/off state. It is useful for lightweight toggles such as layer visibility, mode switches, or filter controls.

JavaScript

import {Deck} from '@deck.gl/core';
import {ToggleWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new ToggleWidget({
      icon: `./moon.png`,
      onIcon: `./sun.png`,
      label: 'Color mode',
      color: 'dodgerblue',
      onColor: 'orange',
      onChange: checked => updateLayers(checked ? 'light' : 'dark')
    })
  ]
});

TypeScript

import {Deck} from '@deck.gl/core';
import {ToggleWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new ToggleWidget({
      icon: `./moon.png`,
      onIcon: `./sun.png`,
      label: 'Color mode',
      color: 'dodgerblue',
      onColor: 'orange',
      onChange: checked => updateLayers(checked ? 'light' : 'dark')
    })
  ]
});

React

import React from 'react';
import DeckGL, {ToggleWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL>
      <ToggleWidget
        icon="./moon.png"
        onIcon="./sun.png"
        label="Color mode"
        color="dodgerblue"
        onColor="orange"
        onChange={checked => updateLayers(checked ? 'light' : 'dark')}
      />
    </DeckGL>
  );
}

Constructor

import {ToggleWidget, type ToggleWidgetProps} from '@deck.gl/widgets';
new ToggleWidget({} satisfies ToggleWidgetProps);

Types

ToggleWidgetProps

The ToggleWidget accepts the generic WidgetProps and:

initialChecked (boolean, optional)

• Default: false

Whether the widget starts in the checked state.

icon (string, required)

Data URL used as the default button icon mask.

onIcon (string, optional)

• Default: same as icon

Data URL used as the icon when the widget is checked.

label (string, optional)

Tooltip message displayed while hovering over the widget.

tooltip (string | HTMLElement | false, optional)

• Default: value of label

Custom tooltip content. Overrides the default label text in the tooltip. Pass false to disable.

onLabel (string, optional)

• Default: same as label

Tooltip shown while the widget is checked.

onTooltip (string | HTMLElement | false, optional)

• Default: value of onLabel

Custom tooltip content when the widget is checked. Overrides the default onLabel text in the tooltip. Pass false to disable.

color (string, optional)

CSS color of the icon.

onColor (string, optional)

• Default: same as color

CSS color of the icon while the widget is checked.

onChange (function, optional)

(checked: boolean) => void

Callback invoked after the widget toggles state.

Styles

The ToggleWidget uses the shared button theme variables described in the styling guide.

Source

modules/widgets/src/toggle-widget.tsx