InlineCode

Stable
WCAG 2.2 evidence
RTL

A short piece of code inside a sentence: a <code> element on a sunken, bordered chip in the monospace text style. It is told apart from prose by its typeface and box, not by colour alone (WCAG 1.4.1), and it carries the semantics of code (1.3.1). Code is always read left to right: the element is dir="ltr", which also isolates it from the surrounding right-to-left text (1.3.2); pass your own dir to override. Long values wrap inside the chip, so nothing scrolls the page (1.4.10). Presentational: renders in React Server Components, without React Aria. Consumer duties: use it for code only (not for emphasis), and keep what it says understandable without seeing the chip.

import { InlineCode } from "@nexera-ui/react";

Loading example…

4
examples: 1
props: 1
live controls: 1
platform: 6
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

Generated code

import { InlineCode } from "@nexera-ui/react";

<InlineCode />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

In sentence

Inside a sentence: the chip is told apart by its monospace face and box, so it does not depend on colour.

Loading example…

app.tsx

import { InlineCode } from "@nexera-ui/react";

export function InSentence() {
  return (
    <p className="text-body-default text-primary m-0 max-w-md">
      Join the table on <InlineCode>employee_id</InlineCode> and filter by{" "}
      <InlineCode>department = &apos;Engineering&apos;</InlineCode> before you export the rows.
    </p>
  );
}

Long content

A long value wraps inside the chip (overflow-wrap: anywhere), so nothing scrolls the page at 320 px.

Loading example…

app.tsx

import { InlineCode } from "@nexera-ui/react";

export function LongContent() {
  return (
    <p className="text-body-default text-primary m-0 max-w-xs">
      Set{" "}
      <InlineCode>ACME_HRMS_SDK_PAYROLL_EXPORT_DESTINATION_BUCKET_NAME_FOR_PRODUCTION</InlineCode>{" "}
      before you start the worker.
    </p>
  );
}

Right to left

Right-to-left prose: the code stays left to right and is isolated from the Arabic text around it.

Loading example…

app.tsx

import { InlineCode } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <p dir="rtl" lang="ar" className="text-body-default text-primary m-0 max-w-md">
      اربط الجدول باستخدام <InlineCode>employee_id</InlineCode> ثم صفِّ النتائج حسب{" "}
      <InlineCode>department</InlineCode>.
    </p>
  );
}

Props 1

Press "Try it" on a card to load that prop into the playground.

children*Nexera

ReactNode

The code: a short identifier, file name, command or value, for example <InlineCode>employee_id</InlineCode>. Plain text is expected; wrap pieces in your own elements if you highlight it. For more than one line use CodeBlock.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

2 direct · 4 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<InlineCode className="shadow-sm" />

Used in blocks

Help articleMedia and content

Theme studio

InlineCode

Try every prop. Copy the code.

Examples 3

In sentence

Long content

Right to left

Props 1

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components