---
id: "packages/active-ui/code"
title: "Code"
description: "Inline code outside running text - a name, a type, a value or a path - that stays whole and is copied exactly."
url: "/packages/active-ui/code"
locale: "en"
revision: "42453f7484b1473a"
---

# Code

`Code` marks a name, a type, a value or a path outside running text: in a table cell, a reference
list or metadata. It has the look of inline code in prose, a muted fill in the monospace font. For
a block of code, use [CodeBlock](/packages/active-ui/code-block).

**Example: Names and types in a table**

Client: Runs entirely in your browser. Source: `examples/ui/code.tsx`.

```tsx
// apps/docs/examples/ui/code.tsx
import {Code} from '@workspace/active-ui/components/composed/code';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@workspace/active-ui/components/primitives/table';

/**
 * Inline code outside running text, in a table. A long name moves to the
 * next line as a whole and breaks only at its readable points when the
 * column is narrower than the name; `…` keeps its closing brackets. Copying
 * a name gives it exactly. Narrow the window to see the breaks.
 */
export default function CodeExample() {
  return (
    <Table className="w-full max-w-xl">
      <TableHeader>
        <TableRow>
          <TableHead>Prop</TableHead>
          <TableHead>Type</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>
            <Code>open</Code>
          </TableCell>
          <TableCell>
            <Code>boolean</Code>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Code>children</Code>
          </TableCell>
          <TableCell>
            <Code>PayloadChildRenderFunction&lt;…&gt;</Code>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Code>onOpenChangeComplete</Code>
          </TableCell>
          <TableCell>
            <Code>((open: boolean) =&gt; void) | undefined</Code>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

## What the composition adds

- **A name stays whole.** It moves to the next line as a word does; its minimum width is the whole
  name, so a table that sizes itself to its content does not tear names apart.
- **Readable break points**, between the words of `camelCase`, after `_` and `/`, after a `.`
  before a name and after a hyphen between words, marked with `<wbr>`: off by default, turned on by a
  container that must narrow its names, such as a text [Table](/packages/active-ui/table) that does
  not fit otherwise. Without a fitting break it breaks between characters only
  as a last resort.
- **Exact copy**: `<wbr>` adds no character, so a copied name is the name.
- **Clean continuation lines**: each line keeps the padding and radius, and an ellipsis keeps the
  closing brackets after it (`Props<…>`), so no line starts with a lone `>`.

## Usage

```tsx
import {Code} from '@workspace/active-ui/components/composed/code';

<Code>onOpenChangeComplete</Code>;
```

Pass the name as a string: break points are added to text only.

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

Code has no props of its own.