ToggleButton

Use when two instances are opposite and the on/off analogy doesn’t apply. Only well-known icons should be used, otherwise, use a single checkbox for the same situation.

Source Code

uikit-react-core

disabled

<HvToggleButton 
  disabled={false}
  defaultSelected={false}
  notSelectedIcon={<HvIconFavorite />}
  selectedIcon={<HvIconFavoriteSelected />}
/>

<HvToggleButton 
  disabled={false}
  defaultSelected={false}
  notSelectedIcon={<HvIconFavorite />}
  selectedIcon={<HvIconFavoriteSelected />}
/>

You can wrap the toggle button with a tooltip to provide additional information.

import { useState } from "react";


export default function Demo() {
  const [selected, setSelected] = useState(false);


  return (
    <HvTooltip title={selected ? "Turn off" : "Turn on"}>
      <HvToggleButton onClick={() => setSelected(!selected)}>
        {selected ? <LightOn /> : <LightOff />}
      </HvToggleButton>
    </HvTooltip>
  );
}

import { useState } from "react";

export default function Demo() {
  const [selected, setSelected] = useState(false);

  return (
    <HvTooltip title={selected ? "Turn off" : "Turn on"}>
      <HvToggleButton onClick={() => setSelected(!selected)}>
        {selected ? <LightOn /> : <LightOff />}
      </HvToggleButton>
    </HvTooltip>
  );
}

Time Picker Tooltip

ToggleButton

With tooltip