React Component

The official react component library for our toggles built from the HTML package


  1. Install
yarn add @theme-toggles/react
# or
npm install @theme-toggles/react
  1. Import css into app.js or equivalent
// app.js or equivalent
import "@theme-toggles/react/css/[toggle name].css"

Note: You can import all css using bundle.css but this isn't recommended unless all toggles are being used since you will have unused css.

  1. Import and use the component, so the classic toggle would look like
import { Classic } from "@theme-toggles/react"

<Classic />


All the toggles are reversible via the reversed prop

import { Classic } from "@theme-toggles/react"

<Classic reversed />

Handling state

The component can handle it's own state internally but also provides a way for you to have complete control. The following example shows how you can provide your own state

const [isToggled, setToggle] = useState(false)

<Classic toggled={isToggled} toggle={setToggle} />


The toggles use currentColor for their SVGs. To change the color of a toggle, simply change the css color property of the component.


Find the full range of toggles here. The React code can be found via the upper tab when on a toggle's page


The component accepts all the button props as well as the following

duration: number
The duration of the animation in milliseconds

Default: 500ms

reversed: boolean
Reverses the animation

Default: false

onToggle: (toggled: boolean) => void
Called when a user clicks the toggle

Default: undefined

toggled: boolean
Used to specify if the toggle active. If undefined, the toggle will use it's internal state

Default: undefined

toggle: Dispatch<SetStateAction<boolean>>
Used to provide your own state

Default: undefined

forceMotion: boolean
Used to force motion despite the client having reduced motion applied. For accessability reasons, this library respects reduced motion by default

Default: false

idPrefix: string
Used to prefix the id's used in the SVGs. Useful for when multiple versions of the same toggle are being used on a page

Default: ""


As the toggle is a button, we use the aria-label for accessability. Since these components are built with accessability in mind, this defaults to "Toggle theme".

It's also recommend to add a title for accessability. Since these components are built with accessability in mind, this defaults to "Toggle theme".

You can also provided a tabIndex attribute

Reduced Motion

This library respects reduced motion and removes the animations when a client has this enabled.