# Code

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Code>console.log()</Code>
```

## API Reference

This component is based on the `code` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                                                                   | Type                                                      | Default  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                                 | —        |
| `size`                                                                                                                                                                 | `Responsive<enum>`                                        | —        |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.                                                     | `"solid" \| "soft" \| "outline" \| "ghost"`               | `"soft"` |
| `weight`                                                                                                                                                               | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | —        |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details.                                          | `enum`                                                    | `""`     |
| `highContrast`Uses a higher contrast color for the component.                                                                                                          | `boolean`                                                 | —        |
| `truncate`Truncates text with an ellipsis. Be aware of [common pitfalls](https://css-tricks.com/flexbox-truncated-text/) in flex layouts.                              | `boolean`                                                 | —        |
| `wrap`Controls the wrapping behavior of the text. See the corresponding [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) values for details.    | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | —        |

## Examples

### Size

Use the `size` prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

```jsx
<Flex direction="column" gap="3" align="start">

	<Code size="1">console.log()</Code>

	<Code size="2">console.log()</Code>

	<Code size="3">console.log()</Code>

	<Code size="4">console.log()</Code>

	<Code size="5">console.log()</Code>

	<Code size="6">console.log()</Code>

	<Code size="7">console.log()</Code>

	<Code size="8">console.log()</Code>

	<Code size="9">console.log()</Code>

</Flex>
```

### Variant

Use the `variant` prop to control the visual style.

```jsx
<Flex direction="column" align="start" gap="2">

	<Code variant="solid">console.log()</Code>

	<Code variant="soft">console.log()</Code>

	<Code variant="outline">console.log()</Code>

	<Code variant="ghost">console.log()</Code>

</Flex>
```

### Color

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<Flex direction="column" align="start" gap="2">

	<Code color="indigo">console.log()</Code>

	<Code color="crimson">console.log()</Code>

	<Code color="cyan">console.log()</Code>

	<Code color="orange">console.log()</Code>

</Flex>
```

### High-contrast

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<Flex gap="3">

	<Flex direction="column" align="start" gap="2">

		<Code color="gray" variant="solid">

			console.log()

		</Code>

		<Code color="gray" variant="soft">

			console.log()

		</Code>

		<Code color="gray" variant="outline">

			console.log()

		</Code>

		<Code color="gray" variant="ghost">

			console.log()

		</Code>

	</Flex>



	<Flex direction="column" align="start" gap="2">

		<Code color="gray" variant="solid" highContrast>

			console.log()

		</Code>

		<Code color="gray" variant="soft" highContrast>

			console.log()

		</Code>

		<Code color="gray" variant="outline" highContrast>

			console.log()

		</Code>

		<Code color="gray" variant="ghost" highContrast>

			console.log()

		</Code>

	</Flex>

</Flex>
```

### Weight

Use the `weight` prop to set the text weight.

```jsx
<Flex direction="column" gap="2" align="start">

	<Code weight="regular">console.log()</Code>

	<Code weight="bold">console.log()</Code>

</Flex>
```

### Truncate

Use the `truncate` prop to truncate text with an ellipsis when it overflows its container.

```jsx
<Flex maxWidth="200px">

	<Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code>

</Flex>
```