ToggleButton

Use when two opposing states are represented and the on/off analogy doesn’t fit.

Only use well-known icons—otherwise, prefer a single checkbox instead.

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