Skip to Content

useToken

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

Import#

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

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

Return value#

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

Usage#

wonderful gradients

function Example() {
  const [red100, blue200] = useToken(
    // the key within the theme, in this case `theme.colors`
    "colors",
    // the subkey(s), resolving to `theme.colors.red.100`
    ["red.100", "blue.200"],
    // a single fallback or fallback array matching the length of the previous arg
  )

  return (
    <Box bg={`linear-gradient(${red100}, ${blue200})`}>
      <Text color="black">wonderful gradients</Text>
    </Box>
  )
}

function Example() {
  const [red100, blue200] = useToken(
    // the key within the theme, in this case `theme.colors`
    "colors",
    // the subkey(s), resolving to `theme.colors.red.100`
    ["red.100", "blue.200"],
    // a single fallback or fallback array matching the length of the previous arg
  )
  return (
    <Box bg={`linear-gradient(${red100}, ${blue200})`}>
      <Text color="black">wonderful gradients</Text>
    </Box>
  )
}

Editable Example