Code

Code is the inline code primitive.

Overview

Code applies a compact inline surface on top of the shared Text model.

Public CSS Variables

pnpm add @vega-ui/react

Variable	Value	Affects
inline code font familyroot		No visible change in this state
background fillroot		No visible change in this state
code text color`--t-color` mapping		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root sets:

monospace font fallback through --code-font-family
background-color: var(--fills-secondary)
--t-color: var(--label-secondary) for inherited text color

State And Variant Interaction

Code does not define local state variants.
Visual changes mainly come from inherited Text sizing and global theme tokens.

Examples

Size inside surrounding text

Code has its own size, 3 by default, and does not inherit the size of the text around it. Pass the same size as the surrounding Text or Heading so the chip matches the line.

LTRRTL

inline-code-token.tsx · 17 lines

import { Code, Heading, Text } from '@vega-ui/react';

export default function InlineCodeToken() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)' }}>
      <Text size={2}>
        Default size inside small text: <Code>workspace_slug</Code>
      </Text>
      <Text size={2}>
        Matched to the text: <Code size={2}>workspace_slug</Code>
      </Text>
      <Heading as='h3' size={6}>

Do Not Override

removing code semantics and keeping only the chip styling
using low-contrast background and text combinations
forcing block-level layout for long snippets instead of switching to a proper code block component