Code

Inline code outside running text - a name, a type, a value or a path - that stays whole and is copied exactly.

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.

Names and types in a tableClient

Prop	Type
`open`	`boolean`
`children`	`PayloadChildRenderFunction<…>`
`onOpenChangeComplete`	`((open: boolean) => void) \| undefined`

Full source examples/ui/code.tsx

// apps/docs/examples/ui/code.tsximport {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 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#

Import from @workspace/active-ui/components/composed/code

No props of its own.

Other props, such as the standard attributes of the underlying element, className and ref, are passed through.