useToken is a custom hook used to resolve design tokens from the theme.


import { useToken } from '@chakra-ui/react'

Return value#

The useToken hook retrieves whatever is in the theme at the given path(s).


function Example() {
const [red100, blue200] = useToken(
// the key within the theme, in this case `theme.colors`
// the subkey(s), resolving to ``
['red.100', 'blue.200'],
// a single fallback or fallback array matching the length of the previous arg
return (
<Box p={4} boxShadow={`inset 0 4px 0 ${red100}, 0 0 8px ${blue200}`}>
You can utilize <Code>useToken</Code> to create a <Code>boxShadow</Code>{' '}
with colors from your theme.

Note that you can also use the sx prop to write styles freely using themes tokens.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel