Typography

Code

Marks text to signify a short fragment of computer code.

Code marks a short fragment of computer code. It renders a native code element, which conveys code semantics to assistive technology, and applies the theme's monospace code font.

Code: Basic

Open in playground

console.log()

import { Code } from '@luke-ui/react/code';

export default () => {
	return <Code>console.log()</Code>;
};

Code: Basic

Loading Code: Basic example

In context

Code is inline, so it inherits the surrounding size and stays on one line by default. Pass lineClamp of 2 or more, or pass textWrap, when the content should wrap. Its neutral chip sets its own text colour, so it stays readable on a solid background. Inside a pre code block, Code draws no chip and takes the block's colour and metrics.

Code: In context

Open in playground

Use the useTheme hook to access the current theme. The theme prop supports "light", "dark", and "system".

import { Code } from '@luke-ui/react/code';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			Use the <Code>useTheme</Code> hook to access the current theme. The <Code>theme</Code> prop
			supports <Code>"light"</Code>, <Code>"dark"</Code>, and <Code>"system"</Code>.
		</Text>
	);
};

Code: In context

Loading Code: In context example

API

CodeProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
lineClamp	1 \|⁠ 2 \|⁠ 3 \|⁠ 4 \|⁠ 5 \|⁠ boolean \|⁠ undefined	—
Clamps the text to a number of lines. `true` clamps to 1 line; a number clamps to 1–5. A value of 2 or more allows wrapping. A single-line clamp wins over `textWrap`.
textWrap	"balance" \|⁠ "default" \|⁠ "pretty" \|⁠ undefined	`'default'`
Sets text wrapping. `'balance'` and `'pretty'` wrap across lines unless `lineClamp` clamps to a single line.