Skip to content

Code usage guidelines

Usage guidelines API Resources

The code component can be used to display short, inline code snippets within text content.

When to use

To show inline commands such as npm run test in body copy.
To highlight identifiers like file names.
To present short fragments of syntax directly in a sentence.

When not to use

For multi-line snippets or preformatted examples; use code block instead.
For plain emphasis where regular text styling is sufficient.

Usage

Preview
Code

The product ID is: 452389f9-686b-4c15-846b-a12c468c8579.

import { Text, Code } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Text as="p" variant="body">
      The product ID is: <Code>452389f9-686b-4c15-846b-a12c468c8579</Code>.
    </Text>
  );
}