InlineCode

A short code span set apart from prose as a bordered, mono chip. It shares the bordered-chip language with Kbd but stays flat and reads as code, and sizes in em so it sits proportionally inside any text.

Basic

Wrap a snippet in InlineCode and it renders a <code> chip — bordered, mono, on the well shade. Its corners are a tight, em-relative 0.35em rather than the global radius knob, so the chip reads as a code token at any type size and never pills under the rounded default.

import { InlineCode } from "@stridge/noctis";

export default function InlineCodeBasic() {
    return (
        <div className="flex flex-wrap items-center gap-3">
            <InlineCode>npm install</InlineCode>
            <InlineCode>useState</InlineCode>
            <InlineCode>bg-surface</InlineCode>
        </div>
    );
}

Within prose

Because the chip sizes in em, it tracks the surrounding font size and sits proportionally on a line of running text. Drop one mid-sentence to name an API or a token without breaking the rhythm. For multi-line fenced code, reach for CodeBlock.

import { InlineCode } from "@stridge/noctis";

export default function InlineCodeWithinProse() {
    return (
        <p className="max-w-md text-regular text-muted">
            Style a panel with <InlineCode>bg-surface</InlineCode> and lean on <InlineCode>text-muted</InlineCode> for secondary
            copy — never a raw value.
        </p>
    );
}

Anatomy

InlineCode is a single part — a styled <code> element with no compound subparts.

• InlineCode — the code chip. Forwards a plain className and every native <code> attribute to the rendered element.
• InlineCode.props(...) — the D12 escape hatch: a spreadable data-slot bag for styling a foreign element as an inline-code chip in place.

The rendered element carries data-slot="noctis-inline-code", the anchor the precompiled inline-code.css keys off.

On surfaces

The same control re-tuned across the elevation scopes — the root canvas, an elevated panel, a menu, and a sunken well. It stays legible on every layer.

Design tokens

Generated from the component's declaration — the same graph that mints the CSS, so a variable name or its resolution default can't drift. The chip metrics are minted as --noctis-inline-code-* tokens, each em-relative on purpose — set one on any ancestor and every chip in that region retunes — e.g. .dense { --noctis-inline-code-padding-inline: 0.25em; } tightens every chip beneath it. See Customization for the full override ladder and Tokens for the whole graph.

API reference

Generated from the component's types — every prop, type, default, and description comes straight from the source. InlineCode takes the native <code> props (className, children, and the rest); expand a row for the full type and description.