Code

Code is a component that represents a code block. By default, it renders a code element.

Import

import { Code } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Code>console.log("Hello, Yamada!")</Code>

Copied!

Change Variant

Editable example

<VStack alignItems="start">
  <For each={["solid", "outline", "subtle", "surface"]}>
    {(variant, index) => (
      <Code key={index} variant={variant}>
        console.log("Hello, Yamada!")
      </Code>
    )}
  </For>
</VStack>

Copied!

Change Size

Editable example

<VStack alignItems="start">
  <For each={["xs", "sm", "md", "lg"]}>
    {(size, index) => (
      <Code key={index} size={size}>
        console.log("Hello, Yamada!")
      </Code>
    )}
  </For>
</VStack>

Copied!

Change Color Scheme

Editable example

<Wrap gap="md" w="full">
  <VStack w="auto">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Code key={index} variant="solid" colorScheme={colorScheme}>
          console.log("Hello, Yamada!")
        </Code>
      )}
    </For>
  </VStack>

  <VStack w="auto">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Code key={index} variant="outline" colorScheme={colorScheme}>
          console.log("Hello, Yamada!")
        </Code>
      )}
    </For>
  </VStack>

  <VStack w="auto">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Code key={index} variant="subtle" colorScheme={colorScheme}>
          console.log("Hello, Yamada!")
        </Code>
      )}
    </For>
  </VStack>

  <VStack w="auto">
    <For
      each={[
        "primary",
        "secondary",
        "success",
        "warning",
        "danger",
        "link",
        "gray",
        "neutral",
        "red",
        "rose",
        "pink",
        "orange",
        "amber",
        "yellow",
        "lime",
        "green",
        "emerald",
        "teal",
        "cyan",
        "sky",
        "blue",
        "indigo",
        "violet",
        "purple",
        "fuchsia",
      ]}
    >
      {(colorScheme, index) => (
        <Code key={index} variant="surface" colorScheme={colorScheme}>
          console.log("Hello, Yamada!")
        </Code>
      )}
    </For>
  </VStack>
</Wrap>

Copied!

Edit this page on GitHub

PreviousEm NextHighlight