Toggle

Renders a button with role="switch". Can only be used as a controlled component.

const MyToggle = () => {
    const [ active, setActive ] = useState(false)

    return (
        <Toggle
            checked={active}
            onClick={() => setActive((a) => !a)}
        />
    )
}

render(<MyToggle />)
const MyToggle = () => {
    const [ active, setActive ] = useState(false)

    return (
        <Toggle
            checked={active}
            onClick={() => setActive((a) => !a)}
        />
    )
}

render(<MyToggle />)
Live Demo

The icon prop replaces the icon rendered by the component.

const MyToggle = () => {
    const [ active, setActive ] = useState(false)

    return (
        <Toggle
            color="Tertiary"
            backgroundColor="Primary"
            icon={
                <CheckIcon
                    fill={active ? "Tertiary" : "Primary"}
                    padding={2}
                />
            }
            checked={active}
            onClick={() => setActive((a) => !a)}
        />
    )
}

render(<MyToggle />)
const MyToggle = () => {
    const [ active, setActive ] = useState(false)

    return (
        <Toggle
            color="Tertiary"
            backgroundColor="Primary"
            icon={
                <CheckIcon
                    fill={active ? "Tertiary" : "Primary"}
                    padding={2}
                />
            }
            checked={active}
            onClick={() => setActive((a) => !a)}
        />
    )
}

render(<MyToggle />)
Live Demo