Inline Code

Overview

Inline Code highlights short technical fragments inside normal prose — package names, commands, file paths, props, CSS variables, Tailwind utility classes, API names, data attributes, and short configuration values. It keeps technical writing readable across Byteion documentation, developer setup guides, dashboard settings screens, API configuration pages, starter-kit docs, and Laravel/React/Vue usage examples. Inline Code is a Typography component available in both @byteion/react and @byteion/vue that renders a semantic <code> element with token-based monospace styling.

Why this exists

Without a shared Inline Code style, every page uses ad-hoc monospace text — font-family: monospace here, bg-gray-100 there, inconsistent dark-mode contrast, and no semantic distinction between code, keyboard input, and normal text. Inline Code unifies technical inline fragments into a single, accessible, token-based system with consistent background, border, font-family, and text color that adapts to light mode, dark mode, and branded themes without manual overrides.

Mental model

• Inline Code identifies technical tokens inside a sentence — it tells readers "this is code, not plain English." Use it for things users might type, reference, or configure.
• Keep it short — a single word or a short phrase. If the fragment exceeds one line, use Code Block instead.
• It should not interrupt reading flow — the background and font change should be subtle enough that prose stays readable, but visible enough that code tokens are instantly recognizable.
• KBD is a separate concept — keyboard shortcuts and key labels use the <kbd> element, not <code>. Do not wrap keyboard shortcuts in Inline Code.
• If users need to copy the text — use Code Block with a copy button. Inline Code is for reference reading, not interaction.

Inline Code vs Code Block vs Text vs KBD

When to use

• Package names — @byteion/core, @byteion/react, @byteion/vue
• Commands — npm install, pnpm add, npx create-byteion
• File paths — apps/docs/content/, packages/core/src/
• CSS variables — --primary, --background, --card
• Tailwind utility classes — bg-primary, text-muted-foreground, rounded-xl
• Prop names and data attributes — variant, data-bi-modal, aria-label
• API names and function names — cva(), useToast(), toast.show()
• Short terminal flags or config keys — --save-dev, DEBUG=true
• Token names — bg-card, text-foreground, shadow-card

When not to use

• Do not use Inline Code for long multi-line snippets — use Code Block with a copy button for terminal commands, file contents, or any snippet longer than one line
• Do not use Inline Code for copyable blocks — Code Block provides the copy interaction; Inline Code does not
• Do not use Inline Code for decorative emphasis — use <strong> or <em> for styling emphasis in prose
• Do not use KBD for non-keyboard labels — <kbd> is for physical keyboard input only. Package names, commands, and props belong in <code>
• Do not use Inline Code for long wrapping text inside small cards or tables — use text-muted-foreground with truncate instead
• Do not use Inline Code as a Badge replacement — Badge is for status indicators and counts, not code fragments

Basic example

A developer setup guide uses Inline Code to reference packages, commands, file paths, and keyboard shortcuts within natural prose:

<p>
  Install <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">@byteion/react</code>
  using <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">npm install @byteion/react</code>.
</p>
<p>
  Configure <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">--primary</code>
  then press <kbd class="rounded border border-border bg-background px-1.5 font-mono text-[10px] text-muted-foreground">Ctrl+S</kbd>.
</p>

Code and KBD usage

Inline Code and KBD are separate visual variants that serve different purposes:

Variants and composition

Inline Code is part of the shared Typography CVA schema. It provides two semantic variants plus truncation support:

Truncation

When a code token appears inside a constrained layout (table cell, sidebar item, compact card) and risks overflow, apply the truncate utility. This prevents the token from breaking the layout or forcing horizontal scroll:

<p class="text-sm text-foreground truncate">
  <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground truncate">
    packages/core/src/components/typography/variants.html
  </code>
</p>

Anatomy

• The HTML element — <code> for code fragments, <kbd> for keyboard shortcuts
• Background — bg-muted for code, bg-background for kbd
• Border — kbd adds border border-border for a physical key appearance
• Font — font-mono for both code and kbd
• Text color — text-foreground for code, text-muted-foreground for kbd
• Radius and padding — rounded with px-1.5 py-0.5 for compact inline fit
• Optional truncation — applied via truncate when tokens overflow constrained containers

Usage guidelines

• Keep inline code short — one word or a short phrase. Long tokens belong in Code Block
• Use <code> for package names, commands, file paths, props, CSS variables, Tailwind classes, API names
• Use <kbd> only for physical keyboard keys and shortcut combinations
• Do not wrap entire sentences or paragraphs in <code> — apply it only to the technical fragment
• When a code token appears inside a table or card, apply truncate to prevent overflow
• Test wrapping on mobile — long package names like @byteion/react can break awkwardly at small viewport widths
• Keep docs and product settings screens visually consistent — use the same code styling for technical references in both documentation and UI

Do and Don't

Accessibility

• Inline Code has no keyboard behavior by itself — it is a passive inline element. Interactive children manage their own focus
• Use semantic <code> for code fragments — screen readers announce <code> as pre-formatted text, distinguishing it from surrounding prose
• Use semantic <kbd> for keyboard input — screen readers can identify keyboard shortcuts and announce them appropriately
• Use Code Block for long or copyable snippets — large blocks of inline code are hard to read and difficult to select or copy with assistive technology
• Keep contrast readable — bg-muted with text-foreground is designed to pass WCAG AA in light mode, dark mode, and branded themes. For kbd, bg-background with border-border provides a distinct visual key appearance
• Do not rely on background color alone — the monospace font and semantic tag (<code> or <kbd>) identify the content type. Color is supplementary, not primary
• Links near inline code — links adjacent to code fragments must remain visually identifiable. Use text-primary hover:underline with sufficient contrast against bg-muted

Customization

Inline Code should be customized through Byteion tokens — monospace font family, background color (bg-muted), border color (border-border), text color (text-foreground / text-muted-foreground), border radius (rounded), and inline padding (px-1.5 py-0.5). Each of these maps to the standard Tailwind token scale. Avoid arbitrary one-off font sizes, colors, or backgrounds unless intentionally extending the token system. To add a new inline style, extend the component's CVA variant map or use the className prop with standard Tailwind utilities.

HTML example

<!-- Package name inside prose -->
<p>Install <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">@byteion/core</code> to get started.</p>

<!-- File path inside prose -->
<p>Configure your theme in <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">apps/docs/content/</code>.</p>

<!-- Tailwind class and CSS variable -->
<p>Add <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">bg-primary</code> and set <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">--primary: hsl(220 70% 50%)</code>.</p>

<!-- Prop name -->
<p>Pass the <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">variant</code> prop with value <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground">"outline"</code>.</p>

<!-- Keyboard shortcut -->
<p>Press <kbd class="rounded border border-border bg-background px-1.5 font-mono text-[10px] text-muted-foreground">Ctrl+K</kbd> to open search.</p>

<!-- Code Block for multi-line (reference) -->
<p>For a full setup example, see the <a href="/docs/components/code-block.html" class="text-primary hover:underline">Code Block</a> documentation.</p>

React example

React exports the Typography component from @byteion/react. Use variant="code" for inline code and variant="kbd" for keyboard shortcuts:

import { Typography } from '@byteion/react';

export default function SetupGuide() {
  return (
    <div>
      <p>
        Install <Typography variant="code">@byteion/react</Typography>
        using <Typography variant="code">npm install @byteion/react</Typography>.
      </p>
      <p>
        Press <Typography variant="kbd">Ctrl+K</Typography> to open search.
      </p>
      <p>
        Set the <Typography variant="code">variant</Typography> prop to
        <Typography variant="code">"outline"</Typography>.
      </p>
    </div>
  );
}

// For long snippets, use Code Block instead:
export function InstallGuide() {
  return (
    <div>
      <p>Run the following command in your terminal:</p>
      <div className="rounded-xl border border-border bg-card overflow-hidden">
        <pre className="p-4 text-sm font-mono">
          <code>npm create byteion@latest my-app</code>
        </pre>
      </div>
    </div>
  );
}

Vue example

Vue exports the Typography component from @byteion/vue with the same variant prop:

<script setup lang="ts">
import { Typography } from '@byteion/vue';
</script>

<template>
  <div>
    <p>
      Install <Typography variant="code">@byteion/react</Typography>
      using <Typography variant="code">npm install @byteion/react</Typography>.
    </p>
    <p>
      Press <Typography variant="kbd">Ctrl+K</Typography> to open search.
    </p>
    <p>
      Set the <Typography variant="code">variant</Typography> prop to
      <Typography variant="code">"outline"</Typography>.
    </p>
  </div>
</template>

API Reference

Inline Code is rendered via the Typography component in both @byteion/react and @byteion/vue. The relevant variants and props are:

The Typography schema includes 14 variants total. For inline technical text, use code and kbd. The full variant set is documented on the Heading and Text pages.

Developer tips

• Keep inline code short — if the fragment exceeds one line, promote it to a Code Block. Inline code that wraps awkwardly hurts readability
• Use Code Block when copy/paste matters — terminal commands, JSON configs, and multi-line snippets need a copy button. Inline Code is not copyable by default
• Use KBD only for actual keys — <kbd> is a semantic HTML element. Screen readers announce it as keyboard input. Do not use it for package names, props, or commands
• Test wrapping in tables, cards, and mobile screens — long package names or file paths can break mid-word on small viewports. Use truncate for constrained layouts
• Keep docs and product settings screens consistent — use the same code styling (bg-muted, font-mono, text-foreground) in both documentation and UI settings panels so technical references look the same everywhere
• Test dark mode contrast — bg-muted with text-foreground must pass WCAG AA contrast in both themes

Common mistakes

• Using inline code for long commands — a full npm install @byteion/react @byteion/vue @byteion/core inside a paragraph wraps poorly and is hard to read. Use Code Block instead
• Using KBD for non-keyboard text — wrapping npm install in <kbd> is semantically incorrect and confuses screen readers
• Using inline code as visual emphasis — ordinary words wrapped in <code> for styling alone misleads users into thinking they are technical values
• Hardcoding monospace styles — font-family: 'Courier New' or arbitrary pixel values break dark mode and theme consistency
• Not testing dark mode contrast — a light-gray bg-gray-100 that works in light mode may be invisible on a dark background
• Making wrapped inline code unreadable in small containers — long tokens in table cells or sidebar items overflow without truncate

Production usage tips

• Test dark mode contrast — verify bg-muted with text-foreground passes WCAG AA in both light mode and dark mode across all branded themes
• Test wrapping on mobile — narrow viewports may force inline code to break mid-word; verify wrapping does not break the reading flow
• Test long file paths and package names — a token like packages/core/src/components/typography/variants.html should truncate or wrap gracefully inside constrained parents
• Confirm code/kbd usage is semantic — audit your documentation and product UI to ensure every <code> element is actually code and every <kbd> is actually a keyboard key
• Keep React and Vue output aligned with the core Typography schema — both @byteion/react and @byteion/vue share the same variant set for code and kbd
• Use the canonical HTML as the source of truth — keep React and Vue wrappers aligned with the documented token classes

Premium examples

Pro patterns available in Byteion Pro:

• Command palette shortcut list — a keyboard shortcut reference panel with grouped shortcut pairs, each using KBD for keys and Inline Code for related commands
• Developer settings panel — a settings card showing environment variables, file paths, and feature flags with Inline Code tokens inside each setting description
• API key setup guide — a step-by-step guide with copyable commands in Code Blocks and inline references to endpoints, headers, and parameters in Inline Code
• Package installation steps — multi-framework install instructions showing npm, pnpm, yarn commands with inline package name highlighting
• Keyboard shortcut reference card — a compact card listing all app keyboard shortcuts with KBD-labeled keys and Inline Code descriptions for each action
• Code-heavy documentation callout — an inline callout box that mixes natural language with syntax-colored Inline Code fragments for API reference sections

Related components

• Code Block — multi-line code snippets with syntax highlighting and copy button
• Text — normal prose, descriptions, labels, metadata, captions
• Paragraph — standard body text with optimal readability
• Badge — compact status and count labels (not a code replacement)
• Heading — page and section titles with display variants
• Tooltip — hover or focus tooltip for additional code context

API Reference

Related components

Pair this component with adjacent Byteion primitives from the same workflow: form controls for data entry, feedback components for validation, and layout primitives for spacing.

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX