Code

Code renders inline <code> — a monospace pill for a short snippet, value, or identifier sitting in ordinary prose. No syntax highlighting; for a highlighted block, see CodeBlock. color tints the text only — the neutral background/border pill never changes.

import { Code } from '@42-central/ui-react/code';

<Code>const x = 1</Code>
<Code color="green">npm install</Code>

Playground

<Component>
  const x = 1
</Component>

Full prop browser

Colors

color tints the text only — background and border stay neutral regardless of color, so a Code snippet never turns into a colored chip.

{COLORS.map((c) => <Code key={c} color={c}>{c}</Code>)}

Nesting a Mark

Mark is also attached to Code as Code.Mark — the same component, for convenient composition when marking a token inside a snippet. Mark always declares its own explicit text color, so it wins over Code's own color with no special-case code needed.

<Code color="red">const <Code.Mark color="brand">x</Code.Mark> = 1</Code>

API

All other props are forwarded to the underlying <code> (or asChild element).

Accessibility

Code renders a semantic <code> element, the right markup for inline code/computer output. It carries no interactive behavior.

Changelog