"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Code
Code
is a component used to display inline code. It is composed from the
Box component with a font family of mono
for displaying
code.
Import#
import { Code } from '@chakra-ui/react'
Usage#
<Code>Hello world</Code>
Colors#
You can change the color scheme of the component by passing the colorScheme
prop.
<Stack direction='row'><Code children='console.log(welcome)' /><Code colorScheme='red' children="var chakra = 'awesome!'" /><Code colorScheme='yellow' children='npm install chakra' /></Stack>
Props#
colorScheme
colorScheme
Type
Default
"gray"
size
size
Description
Sizes for Code
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
variant
variant
Type
"solid" | "subtle" | "outline"
Default
"subtle"