InlineCode

import {InlineCode} from '@sentry/scraps/code'; import {Heading, Prose, Text} from '@sentry/scraps/text';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/code/inlineCode');

The <InlineCode> component is designed for displaying short code snippets inline with text, such as variable names, function calls, or brief commands. It provides consistent monospace typography and subtle visual styling that distinguishes code from regular text.

<Text>
  Use the <InlineCode>useState</InlineCode> hook to manage component state.
</Text>

Basic Usage

Use <InlineCode> to highlight code elements within sentences or paragraphs.

<Storybook.Demo> <Text> The <InlineCode>console.log()</InlineCode> function outputs messages to the browser console. </Text> </Storybook.Demo>

<Text>
  The <InlineCode>console.log()</InlineCode> function outputs messages to the browser
  console.
</Text>

Within Prose Content

For long form content, <code> elements are automatically styled within the <Prose> component.

<Storybook.Demo> <Prose> <h2>Getting Started</h2> <p> To initialize a new React component, you'll need to import <code>React</code> from the <code>react</code> package. Then define your component using either the <code>function</code> keyword or as an arrow function. </p> <p> Remember to export your component using <code>export default MyComponent</code> so it can be imported elsewhere in your application. </p> </Prose> </Storybook.Demo>

<Prose>
  <h2>Getting Started</h2>
  <p>
    To initialize a new React component, you'll need to import <code>React</code> from the{' '}
    <code>react</code> package. Then define your component using either the
    <code>function</code> keyword or as an arrow function.
  </p>
  <p>
    Remember to export your component using <code>export default MyComponent</code>
    so it can be imported elsewhere in your application.
  </p>
</Prose>

Variants

Use variant="neutral" for page headings or other situations where the vibrancy of the default variant="accent" would be distracting.

<Storybook.Demo> <Heading as="h3"> Hello <InlineCode variant="neutral">:user</InlineCode> </Heading> </Storybook.Demo>

<Heading as="h3">
  Hello <InlineCode variant="neutral">:user</InlineCode>
</Heading>

Common Use Cases

<InlineCode> is perfect for:

<Storybook.Demo> <Prose> <ul> <li> Variable names: <InlineCode>userName</InlineCode> or{' '} <InlineCode>isLoading</InlineCode> </li> <li> Function names: <InlineCode>handleSubmit()</InlineCode> or{' '} <InlineCode>fetchData()</InlineCode> </li> <li> CSS properties: <InlineCode>display: flex</InlineCode> or{' '} <InlineCode>margin: 0</InlineCode> </li> <li> File paths: <InlineCode>/src/components/Button.tsx</InlineCode> </li> <li> Package names: <InlineCode>@sentry/react</InlineCode> or{' '} <InlineCode>lodash</InlineCode> </li> <li> HTML attributes: <InlineCode>className</InlineCode> or{' '} <InlineCode>onClick</InlineCode> </li> </ul> </Prose> </Storybook.Demo>

<ul>
  <li>
    Variable names: <InlineCode>userName</InlineCode> or{' '}
    <InlineCode>isLoading</InlineCode>
  </li>
  <li>
    Function names: <InlineCode>handleSubmit()</InlineCode> or{' '}
    <InlineCode>fetchData()</InlineCode>
  </li>
  <li>
    CSS properties: <InlineCode>display: flex</InlineCode> or{' '}
    <InlineCode>margin: 0</InlineCode>
  </li>
  <li>
    File paths: <InlineCode>/src/components/Button.tsx</InlineCode>
  </li>
  <li>
    Package names: <InlineCode>@sentry/react</InlineCode> or{' '}
    <InlineCode>lodash</InlineCode>
  </li>
  <li>
    HTML attributes: <InlineCode>className</InlineCode> or{' '}
    <InlineCode>onClick</InlineCode>
  </li>
</ul>

<Storybook.Demo> <Prose> <p> When documenting API endpoints, use <InlineCode>POST /api/events</InlineCode> for the endpoint itself, but use a CodeSnippet component for showing the full request example: </p> <Text size="sm" variant="muted"> (CodeSnippet would go here for multi-line code examples) </Text> <p> For non-code monospace content like user IDs, you can use{' '} <Text as="span" monospace> usr_1234567890 </Text> instead of InlineCode. </p> </Prose> </Storybook.Demo>

<Text>
  When documenting API endpoints, use <InlineCode>POST /api/events</InlineCode> for the
  endpoint itself, but use CodeSnippet for multi-line examples.
</Text>
<Text>
  For non-code content like user IDs, use <Text monospace>usr_1234567890</Text> instead.
</Text>

Related Components

For different code display needs, consider these alternatives:

• <CodeBlock>: Use for multi-line code snippets with syntax highlighting
• <Prose>: Use for long-form content that may contain code elements
• <Text monospace>: Use for monospace text that isn't necessarily code

Accessibility

<InlineCode> renders as a semantic <code> element, which provides appropriate meaning to screen readers and other assistive technologies. The component maintains sufficient color contrast to meet WCAG 2.2 AA requirements.