Skip to main content
Pricing

Inline Code

Free

A monospace-styled text span for referencing code within body text — variable names, file paths, terminal commands, and API endpoints. Uses a subtle background to visually distinguish code from surrounding prose without breaking reading flow.

2 variants

Use the useState hook to manage state. Import from react.

Variants

VariantDescriptionWhen to use
DefaultStandard inline code with monospace font and subtle background.Use for variable names, function names, file paths, and short code references within paragraphs.

Usage Guidelines

Do

Use for code references within body text — variable names, commands, file paths.

Don't

Use inline code for emphasis — use <strong> or <em> instead.

Do

Keep inline code short — single tokens, not multi-line expressions.

Don't

Place multi-line code in an inline code element — use a Code Block.

Do

Use a monospace font that contrasts with the body font.

Don't

Style inline code identically to links — they must be visually distinct.

Do

Wrap inline code in the semantic <code> element.

Don't

Code

HTML
<p>
  Use the <code class="lex-inline-code">Button</code> component from the library
  by wrapping it with a <code class="lex-inline-code">FormActions</code> container.
</p>
CSS Custom Properties
.lex-inline-code {
  font-family: var(--lex-font-mono);
  font-size: 0.875em;
  background: var(--lex-code-inline-bg, var(--lex-bg-surface-subtle));
  color: var(--lex-code-inline-text, var(--lex-text-default));
  padding: 0.125em 0.375em;
  border-radius: var(--lex-radius-xs);
  border: 1px solid var(--lex-code-inline-border, transparent);
  white-space: nowrap;
  word-break: break-word;
}

.lex-inline-code--accent {
  background: var(--lex-code-inline-accent-bg);
  color: var(--lex-code-inline-accent-text);
}
React
// Using Lexicon CSS classes with React

export function InstallInstructions() {
  return (
    <p>
      Use the <InlineCode>Button</InlineCode> component from the library
      by wrapping it with a <InlineCode>FormActions</InlineCode> container.
    </p>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-inline-code-bg——bg
--lex-inline-code-text——text
--lex-inline-code-radius——radius
--lex-inline-code-padding——padding
--lex-inline-code-font-size——size

Accessibility

  • Use the native <code> element so assistive technology can identify code fragments.
  • Ensure the inline code background meets 3:1 contrast ratio against the page background.
  • Screen readers announce <code> content — keep it short so it does not disrupt reading flow.

Keyboard Interactions

TabSkips over inline code — it is not interactive.