console.log("Hello, world!")Usage
import { Code } from "chakra-ui-solid";<Code>Hello world</Code>Examples
Sizes
Use the size prop to change the size of the code component.
console.log()console.log()console.log()console.log()Variants
Use the variant prop to change the appearance of the code component.
console.log()console.log()console.log()console.log()Colors
Use the colorPalette prop to change the color scheme of the component.
gray
console.log()console.log()console.log()console.log()red
console.log()console.log()console.log()console.log()green
console.log()console.log()console.log()console.log()blue
console.log()console.log()console.log()console.log()teal
console.log()console.log()console.log()console.log()pink
console.log()console.log()console.log()console.log()purple
console.log()console.log()console.log()console.log()cyan
console.log()console.log()console.log()console.log()orange
console.log()console.log()console.log()console.log()yellow
console.log()console.log()console.log()console.log()The palette is written out per row rather than looped over. colorPalette is a style prop, so its
value has to be one this library’s build could see: passed as a variable it computes a class with no
rule behind it, and the snippet renders with no colour and no error.
Props
| Prop | Default | Type |
|---|---|---|
size | 'sm' | ConditionalValue<'xs' | 'sm' | 'md' | 'lg' | PresetVariant<'code', 'size'>>The text style and horizontal padding together, with a matching minimum height. |
variant | 'subtle' | ConditionalValue<'solid' | 'subtle' | 'outline' | 'surface' | 'plain' | PresetVariant<'code', 'variant'>>How much of the palette the snippet spends — `solid` fills it, `subtle` and `surface` tint it, `outline` is a ring alone, and `plain` is the text with no box at all. |
Plus HTMLChakraProps<"code"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.
Code shares its five variants and four sizes with Badge — the recipe is
Badge’s, over a monospace base — so a variant means the same thing on both.