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

StorybookでBlockを開く

Inline Code

StorybookでInlineを開く

Multi-Line

StorybookでMulti Lineを開く

Fit Modes

Fit Content (default)

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

StorybookでBlockを開く

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.

StorybookでFit Fillを開く

Fixed Height

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

StorybookでFit Fixedを開く

See Also

• Paragraph - Body text
• Blockquote - Quoted text