Skip to content
Primitiv home
Framework
Consumption mode
Search the docs

Inline Code

stableSource Figma

Inline code — a <code> fragment set in the mono face on a tinted, hairline-bordered chip. Sized xs–xl so a snippet tracks the surrounding text; data-density scales each size further.

Playground

Density

Preview

npm install
Size
import { InlineCode } from "@/components/ui/inline-code";
<InlineCode size="md">npm install</InlineCode>

Density is set by a data-density ancestor — the Context system, not a InlineCode prop.

Installation

npx primitiv add inline-code

Import

import { InlineCode } from "@/components/ui/inline-code";

No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.

Props

Generated from the copied file’s props type and contract.json. Never hand-maintained.

InlineCode

Extends HTMLElement — every native attribute of that element is accepted and forwarded.

PropTypeDefaultDescription
asChildboolean—Render the single child element instead of a wrapping <code>, merging the inline-code classes onto it — e.g. <InlineCode asChild><kbd>...</kbd></InlineCode>.
size"xs" | "sm" | "md" | "lg" | "xl"mdSnippet size; data-density scales each size further.

Styling contract

10 CSS custom properties on .primitiv-inline-code — mode-agnostic. These names are the stable surface; the values are not.

--primitiv-inline-code-font-family--primitiv-inline-code-font-size--primitiv-inline-code-line-height--primitiv-inline-code-color--primitiv-inline-code-background--primitiv-inline-code-border-color--primitiv-inline-code-border-width--primitiv-inline-code-radius--primitiv-inline-code-padding-inline--primitiv-inline-code-padding-block

Accessibility

  • InlineCode renders a real <code> element, so assistive tech treats it as code rather than emphasised prose — the semantics are the element's, not a style.
  • It is presentational by default and adds no ARIA. Under asChild the semantics are whatever element you supply — a rendered <a> stays a link.
  • The chip is tint + a hairline border, not colour alone, so the distinction from surrounding text survives for low-vision readers and does not lean on a single hue.

Examples

Every example below reacts to the density control. Currently showing Styled mode.

Inline in text

A <code> fragment for a value, identifier or path named in running text — useState, --primitiv-space-16, package.json. It reads as code without breaking the line. Reach for Kbd instead when the thing is a key to press.

Density

Every component is imported from @primitiv-ui/react, and its class is .primitiv-button.

import { InlineCode } from "@/components/ui/inline-code";
<p>  Import it from <InlineCode>@primitiv-ui/react</InlineCode>.</p>

Sizing to the text

size tracks the type around the chip — sm beside body text, xs inside a caption or a table cell — so the code never looms larger than the words it sits among. It inherits nothing from context, so set size at each call site.

Density
xssmmdlgxl
import { InlineCode } from "@/components/ui/inline-code";
<InlineCode size="xs">xs</InlineCode><InlineCode size="sm">sm</InlineCode><InlineCode size="md">md</InlineCode>

As a link (asChild)

asChild renders your own element with the code styling merged on — a <code> fragment that is also a link to an API reference, say. The chip's look transfers to the element you supply.

Density

See the components index for the full list.

import { InlineCode } from "@/components/ui/inline-code";
<InlineCode asChild>  <a href="/api/use-state">useState</a></InlineCode>