# Code A function name or a flag, inside a sentence. - Group: Display - Import: `import { Code } from '@misoto22/design'` - Page: https://ui.misoto22.com/components/code/ - Related: code-block, kbd ## When to reach for it Inline code within running text. A multi-line snippet is a CodeBlock. ## Anatomy - **Chip** (required) — A real

 on the --radius-sm corner, filled with --stone. Sized at 0.85em rather than in pixels, so the same token is proportionate in body copy, in a caption and in a table cell.

## Best practices

### Do

- Use it for anything the reader would type or the machine would read: a flag, a path, a function, an env var name. The mono face is the signal that the string is literal.
- Let it inherit its size. It is set in em on purpose — fixed at one pixel value, the identical token comes out three different sizes on one page depending on where it landed.

### Don’t

- Do not hand it a multi-line string. It keeps no whitespace and draws no plate, so the snippet collapses into one run — that is CodeBlock’s job.
- Do not style a  to look like this instead. The element is the whole point: a mono span reads identically and tells a screen reader nothing, and "pass dash dash force" is not what the sentence said.

## Accessibility

- Renders , which is what tells assistive tech the run is literal rather than prose.

## Code

A function name, a flag, a filename — inside a sentence. Renders a ``, which is the element that means this. A `` in a mono face looks identical and tells a screen reader nothing, and "pass dash dash force" is not what the sentence said. Sized in `em` rather than in pixels, so the chip tracks whatever type it sits beside — the same rule `Kbd` follows, and for the same reason: fixed at one value, the identical token came out three different sizes on one page depending on whether it landed in body copy, a caption or a table cell. The block form is `CodeBlock`. This one is inline by construction: it draws no plate, keeps no whitespace, and a multi-line string handed to it collapses into one run.

### Props

- `children` (required) — `ReactNode`.

Also accepts: `HTMLAttributes`.

## Example — inline

```tsx
import { Code, Text } from '@misoto22/design'


  
    Pass --force to overwrite dist/, and read the
    merge helper in src/lib/cn.ts.
  
  
    At the small step it tracks down with the sentence: --force.
  

```

## Example — a literal or a key

```tsx
import { Code, Kbd, Text } from '@misoto22/design'


  
    Press ⌘ K to open the palette, then type{' '}
    Markdown to reach the component.
  
  
    The flag is --force; the key that cancels the run is Esc.
  

```

## Example — a list of flags

```tsx
import { Code } from '@misoto22/design'


  --force
  Overwrites dist/ instead of failing on it.
  --filter
  Runs in one workspace package.
  --dry-run
  Prints what would be published, and publishes nothing.

```