PixelCodeInline

Inline <code> element with tone tinting and surface-aware framing for highlighting commands, identifiers, and short snippets in flowing prose.

  • Semantic <code> root so assistive tech announces the inline-code role.
  • Tone-tinted border, background, and text for at-a-glance categorisation (neutral, cyan, green, gold, red, purple, pink).
  • Surface-aware: pixel chamfered border + pixel font, or linear pill.
  • Composable inline — takes any inline content, such as icons or multi-token snippets.
Status
stable
Category
data
Since
v1.0.0

API

import { PixelCodeInline } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
children (required)React.ReactNode—Code content.
tone'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink' | 'neutral''cyan'Tone tint. Defaults to 'cyan'.
surface'pixel' | 'linear'—Visual surface override.

Accessibility

WCAG target: 2.1 AA

  • code

Renders as a native <code> element so screen readers convey the inline-code semantic. PixelCodeInline is presentational (not focusable, not actionable) — tone is purely decorative, so the surrounding prose must carry the meaning (e.g. mark error snippets with adjacent text, not tone alone). For multi-line code blocks use a block-level <pre><code> primitive instead.

Usage

import { PixelCodeInline } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelCodeInline>npm install</PixelCodeInline>;
}

Examples

Default

import { PixelCodeInline } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelCodeInline>npm install</PixelCodeInline>;
}

Tones

import { PixelCodeInline } from '@pxlkit/ui-kit';

export function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <PixelCodeInline tone="neutral">neutral</PixelCodeInline>
      <PixelCodeInline tone="cyan">cyan</PixelCodeInline>
      <PixelCodeInline tone="green">green</PixelCodeInline>
      <PixelCodeInline tone="gold">gold</PixelCodeInline>
      <PixelCodeInline tone="red">red</PixelCodeInline>
      <PixelCodeInline tone="purple">purple</PixelCodeInline>
      <PixelCodeInline tone="pink">pink</PixelCodeInline>
    </div>
  );
}

Surfaces

import { PixelCodeInline } from '@pxlkit/ui-kit';

export function Surfaces() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <PixelCodeInline surface="pixel">surface=&quot;pixel&quot;</PixelCodeInline>
      <PixelCodeInline surface="linear">surface=&quot;linear&quot;</PixelCodeInline>
    </div>
  );
}

Inline in Prose

import { PixelCodeInline } from '@pxlkit/ui-kit';

export function InlineInProse() {
  return (
    <p className="text-sm text-retro-text">
      Run <PixelCodeInline>pnpm dev</PixelCodeInline> to start the local server,
      then open <PixelCodeInline tone="green">http://localhost:3000</PixelCodeInline>.
    </p>
  );
}

Code Samples

import { PixelCodeInline } from '@pxlkit/ui-kit';

export function CodeSamples() {
  return (
    <div className="flex flex-col gap-2">
      <div>
        Import: <PixelCodeInline>{`import { PixelCodeInline } from '@pxlkit/ui-kit'`}</PixelCodeInline>
      </div>
      <div>
        Hotkey: <PixelCodeInline tone="purple">Ctrl+K</PixelCodeInline>
      </div>
      <div>
        Error: <PixelCodeInline tone="red">EACCES</PixelCodeInline>
      </div>
    </div>
  );
}

Related