Code

Code marks short inline references such as function names, variables, file paths, and command-line flags. Use CodeBlock for standalone or multi-line snippets.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Code

Code marks short inline references such as function names, variables, file paths, and command-line flags. Use CodeBlock for standalone or multi-line snippets.

Prop	Type	Default	Description
children *	ReactNode		The inline code content.
color	'primary' \| 'secondary' \| 'inherit'	'primary'	Text color. Use 'inherit' to take the surrounding text color.
size	'inherit'		Set to 'inherit' to take the surrounding font size and line height. Omit it to use the code type-scale size.
ref	React.Ref<HTMLElement>		Ref forwarded to the semantic code element.
xstyle	StyleXStyles		StyleX styles for layout customization. Must be a stylex.create() value, not an inline style object like style={{}}.
className	string		CSS class name for the root element. Prefer xstyle for styling.
style	CSSProperties		Inline styles for the root element. Prefer xstyle for StyleX-optimized styling.
data-testid	string		Test selector for automated testing frameworks.

Usage guidance

Use Code for short technical terms inside prose, such as a function name, prop, file path, or command-line flag.
Set size to 'inherit' when inline code should match the surrounding text size and line height.
Avoid: Use Code for multi-line or standalone snippets. Use CodeBlock instead so readers get appropriate block formatting and syntax support.
Avoid: Use Code as an interactive copy or navigation control. Pair it with the appropriate Button or Link when an action is required.

Theming API

{
  "targets": [
    {
      "className": "astryx-code",
      "visualProps": [
        "color"
      ]
    }
  ]
}

Anatomy

Container: The semantic code element that contains the inline code content and paints the background, typography, padding, and radius.

Examples

Code: Inline code snippets inside a sentence showing how Code renders alongside body text.
Code — Text Sizes: Inline code rendered inside heading, body, supporting, and label text. Code automatically matches the font size of its parent text element.
Code — Inline: Inline code references mixed within a paragraph of body text. Use Code to mark up function names, hooks, or API terms so they stand out from surrounding prose.
Code — Content Types: Inline code used for variables, terminal commands, CSS properties, file paths, and keyboard shortcuts. Shows how Code adapts to different kinds of technical content.