Code

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Displays inline or block code with a monospace font.

Import

import { Code } from "~lib/typography";

Props

Name	Type	Required	Default	Description
children	ReactNode	Yes	N/A	Code content to display
inline	boolean	No	false	Render as inline <code>
truncate	boolean	No	false	Truncate overflow (block)
fit	"content" | "fill" | number	No	"content"	Container height behavior

Examples

Block Code

Open Block in Storybook

Inline Code

Open Inline in Storybook

Multi-Line

Open Multi Line in Storybook

Fit Modes

Fit Content (default)

Container sizes to its text content. Use when the text should take only as much space as it needs.

Open Block in Storybook

Fit Fill

Container fills available flex space. Use inside flex layouts when the text should expand to fill remaining space. Text that runs past that space is cut at the container's edge instead of drawn over the block below, which keeps a widget's saved render tidy when it is laid out in a smaller box than the one it was measured in.

Open Fit Fill in Storybook

Fixed Height

Container has a hard-coded pixel height. Use when you need a precise, known container size.

Open Fit Fixed in Storybook

See Also

• Paragraph - Body text
• Blockquote - Quoted text