ComponentsToggle ButtonToggleButtonGitHub LogoSource CodeNPM Logouikit-react-core UsagePropsClassesselecteddisabled<HvToggleButton selected={false} disabled={false} notSelectedIcon={<HvIconFavorite />} selectedIcon={<HvIconFavoriteSelected />} /> <HvToggleButton selected={false} disabled={false} notSelectedIcon={<HvIconFavorite />} selectedIcon={<HvIconFavoriteSelected />} />With tooltipYou can wrap the toggle button with a tooltip to provide additional information.Hide Code 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 PickerTooltip