Skip to content
v2.5.0
English
Русский
Documentation

Code

Code is the inline code primitive.
StorybookSourceFigma
pnpm add @vega-ui/react
code.tsx · 3 lines
import { Code } from '@vega-ui/react';

<Code size={3}>pnpm add @vega-ui/react</Code>
Browser support
Widely available
  • Chrome 111
  • Edge 111
  • Firefox 113
  • Safari 15.4
  • Safari on iOS 15.4
Bundle size
Tested in
8 tests

Summary

Code is the inline code primitive. It reuses the Text contract while rendering semantic <code> content with a subdued inline surface.

Imports

import { Code, type CodeProps } from '@vega-ui/react';

Exported Types

  • CodeProps

Basic Usage

basic-usage.tsx · 11 lines
import { Code, Text } from '@vega-ui/react';

export default function BasicUsage() {
  return (
    <Text asChild size={3}>
      <p>
        Run <Code>pnpm dev</Code> and open <Code>localhost:3000</Code> in your browser.
      </p>
    </Text>
  );
}

Variants

  • Typography: inherits Text sizing
  • Composition: semantic inline <code> element
  • Presentation: inline-block code chip with subdued surface

Edge Cases

  • Long values may wrap because the component allows word-wrap: break-word.
  • Code is optimized for inline snippets, not large fenced code blocks.
  • It inherits Text props, so size changes also affect the chip surface proportions.

Common Mistakes

  • Using Code for multiline documentation blocks.
  • Using code styling for normal labels or badges.
  • Hard-coding colors instead of letting the theme tokens drive contrast.

Examples

Basic

Basic: commands in setup steps

Each step is a list item rendered through Text asChild, and only the command itself is wrapped in Code. The surrounding sentence stays readable prose.

inline-command.tsx · 21 lines
import { Code, Text } from '@vega-ui/react';

const steps = [
  { text: 'Install the package:', command: 'pnpm add @vega-ui/react' },
  { text: 'Import the styles once in your entry file:', command: 'import \'@vega-ui/react/style.css\'' },
  { text: 'Start the dev server:', command: 'pnpm dev' },
];

export default function InlineCommand() {
  return (
    <ol style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%', margin: 0, paddingInlineStart: 'var(--spacing-10)' }}>
      {steps.map((step) => (

Controlled/Stateful

Controlled/Stateful: copy to clipboard

The copy button keeps a small status: the icon switches to a check and a role='status' message confirms the copy, then resets after two seconds. A failed navigator.clipboard call shows a fallback instruction instead of failing silently.

copy-command.tsx · 44 lines
import { Code, Icon, IconButton, Text } from '@vega-ui/react';
import { Check, Copy } from '@vega-ui/icons';
import { useEffect, useState } from 'react';

const command = 'npx @vega-ui/cli init --template dashboard';

type CopyStatus = 'idle' | 'copied' | 'failed';

export default function CopyCommand() {
  const [status, setStatus] = useState<CopyStatus>('idle');

  useEffect(() => {

Form/Integration

Form/Integration: derived identifier in helper text

The workspace URL is derived from the name as the user types and shown in Code inside the HelperText that the input references with aria-describedby. The slug is submitted through a hidden input and read with FormData; an empty slug disables the submit.

inline-identifier-in-helper-copy.tsx · 46 lines
import { Button, Code, HelperText, Label, Text, TextField, TextFieldInput } from '@vega-ui/react';
import { useState, type FormEvent } from 'react';

function toSlug(value: string) {
  return value
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '');
}

export default function InlineIdentifierInHelperCopy() {

Layout/Overlay

Layout/Overlay: commands in a dialog

Commands sit inside dialog body copy. Code defaults to size 3, so inside the size 2 note it gets size={2} to match the surrounding text.

command-in-a-dialog-body.tsx · 54 lines
import {
  Button,
  Code,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
  Heading,
  Icon,
  IconButton,
  Text,
} from '@vega-ui/react';

Error

Error: invalid variable name

The name is checked against the pattern on submit. An invalid name turns the hint into an error, which shows the expected format as Code, and sets aria-invalid; typing clears the error.

invalid-token-name.tsx · 50 lines
import { Button, Code, HelperText, Label, Text, TextField, TextFieldInput } from '@vega-ui/react';
import { useState, type FormEvent } from 'react';

const namePattern = /^[A-Z_][A-Z0-9_]*$/;

export default function InvalidTokenName() {
  const [invalid, setInvalid] = useState(false);
  const [added, setAdded] = useState('');

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const name = String(new FormData(event.currentTarget).get('variable'));

Disabled

Disabled: why a command is unavailable

The deploy button is disabled and the reason, with the branch and the command in Code, is linked with aria-describedby.

unavailable-command-hint.tsx · 17 lines
import { Button, Code, Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';

export default function UnavailableCommandHint() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-4)', justifyItems: 'start', width: '100%' }}>
      <Button disabled aria-describedby='deploy-blocked-reason'>Deploy to production</Button>
      <Text
        id='deploy-blocked-reason'
        size={2}
        style={{ '--t-color': 'var(--label-secondary)' } as CSSProperties}
      >

Edge

Edge: long paths and hashes

Code is an inline block with word-wrap: break-word, so a long path or commit hash breaks inside the chip instead of overflowing a narrow column. The whole chip moves to a new line first, which leaves a gap at the end of the previous line.

long-inline-path.tsx · 19 lines
import { Code, Text } from '@vega-ui/react';

export default function LongInlinePath() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%' }}>
      <Text asChild size={2}>
        <p>
          Edit <Code size={2} style={{ overflowWrap: 'anywhere' }}>packages/ui/src/DataGrid/components/DataGridColumnHeader/DataGridColumnHeader.tsx</Code>{' '}
          to change the sort icon.
        </p>
      </Text>
      <Text asChild size={2}>

Edge: multi-line snippet

Code inherits white-space: pre-line from Text, which collapses indentation. For a snippet, wrap it in <pre>, set whiteSpace: 'pre' and display: 'block' on Code, and let the <pre> scroll horizontally.

multiline-snippet.tsx · 18 lines
import { Code } from '@vega-ui/react';

const snippet = `{
  "extends": "@vega-ui/eslint-config",
  "rules": {
    "react/jsx-quotes": ["error", "prefer-single"]
  }
}`;

export default function MultilineSnippet() {
  return (
    <pre style={{ margin: 0, width: '100%', overflowX: 'auto' }}>

Edge: code inside right-to-left text

Inside an Arabic sentence a command like --filter=@acme/web gets reordered by the bidi algorithm. dir='ltr' on Code keeps the command in its original order.

code-in-rtl-text.tsx · 11 lines
import { Code, Text } from '@vega-ui/react';

export default function CodeInRtlText() {
  return (
    <Text asChild size={3}>
      <p dir='rtl' lang='ar'>
        شغّل الأمر <Code dir='ltr'>pnpm build --filter=@acme/web</Code> قبل النشر.
      </p>
    </Text>
  );
}

Anatomy

Overview

Code is a single-part primitive. It renders semantic <code> content and applies the VegaUI inline-code surface.

Required Parts

Code

Required. Owns both the semantic element and the inline chip styling.

Optional Parts

There are no exported child parts.

Composition Order

  1. Code
  2. inline code content

Valid Composition Patterns

Code sits inline inside a Text paragraph and wraps only the machine-readable fragments.

basic-usage.tsx · 11 lines
import { Code, Text } from '@vega-ui/react';

export default function BasicUsage() {
  return (
    <Text asChild size={3}>
      <p>
        Run <Code>pnpm dev</Code> and open <Code>localhost:3000</Code> in your browser.
      </p>
    </Text>
  );
}

Invalid Composition Patterns

Large code samples rendered inline

This makes long commands or snippets hard to read.

Using Code as a generic highlighted label

The component should keep code semantics.