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.

View source@chakra-ui/layout

Import

import { Code } from '@chakra-ui/react';

Usage

<Code>Hello world</Code>

<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>

<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

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"gray"

size

Description

Sizes for Code are not implemented in the default theme. You can extend the theme to implement them.

Type

string

variant

Type

"solid" | "subtle" | "outline"

Default

"subtle"