# Code

> Inline code for identifiers, values and file names in running text.

Category: Typography · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/code

Use Code for short fragments inside a sentence. For multi-line samples use CodeBlock, and for one line the reader should copy use CopyableCode.

## Import

```tsx
import { Code } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Code, Text } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Text size="sm">
      Set <Code>STANCE_THEME</Code> to <Code>high-contrast</Code> to preview the accessible theme.
    </Text>
  );
}
```

### Plain

```tsx
import { Code, Text } from '@bindshq/stance-react';

export function Plain() {
  return (
    <Text size="sm">
      Templates live in <Code variant="plain">/dashboard/templates</Code>.
    </Text>
  );
}
```

### Small

```tsx
import { Code, Text } from '@bindshq/stance-react';

export function Small() {
  return (
    <Text size="sm">
      Organisation ID: <Code size="sm">org_8f2c91</Code>
    </Text>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Code | `variant` | `'muted' \| 'plain'` | `'muted'` | With or without a background chip. |
| Code | `size` | `'sm' \| 'md'` | `'md'` | Relative size. |

## Accessibility

- Renders <code>, which assistive technology can announce as code.
- Long values wrap anywhere instead of overflowing.

## Guidelines

**Do**

- Use for literal values the reader might type.

**Don’t**

- Use for emphasis.

## Related

- https://stanceui.com/components/code-block
- https://stanceui.com/components/copyable-code
- https://stanceui.com/components/kbd