Code - Docs - Artefact

Code

Typography

Presentational

Introduction

An inline <code> element for short snippets of code or monospace text within a line of prose.

Usage

npm installconst x = 5;GET /api/users

import { Code } from "../components/ui";

export default function MyPage() {
  return (
    <p>
      Run <Code>npm install</Code> to install dependencies.
    </p>
  );
}

Props

Prop	Type	Description
`children`	`Child`	The code content.
`variant`	`"solid" \| "surface" \| "subtle" \| "outline" \| "plain"`	Visual style. Default `"subtle"`.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	Font/padding size. Default `"md"`.
`colorPalette`	`"blue" \| "green" \| "red" \| "purple" \| "orange" \| "cyan" \| "yellow" \| "pink" \| "teal" \| "indigo" \| "gray" \| "success" \| "error" \| "warning"`	The color theme.
`class`	`string`	Custom CSS classes.

Accessibility

Code renders a native <code> element, so screen readers announce it as code content with no extra ARIA wiring needed. For multi-line code blocks, wrap a <pre> around it yourself — Code only styles the inline case.