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

Abrir Block en Storybook

Inline Code

Abrir Inline en Storybook

Multi-Line

Abrir Multi Line en 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.

Abrir Block en 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.

Abrir Fit Fill en Storybook

Fixed Height

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

Abrir Fit Fixed en Storybook

See Also

• Paragraph - Body text
• Blockquote - Quoted text