InlineCode

Updated: May 9, 2025

The InlineCode component is used to display code snippets inline with text. It provides consistent styling with a monospace font and a subtle background to make code stand out from regular text.

InlineCode

npm install once-uiconst value = 42;

<InlineCode>npm install once-ui</InlineCode>
<InlineCode>const value = 42;</InlineCode>

Inline

InlineCode can be used within text elements to highlight code snippets.

Inline

Install the package using npm install once-ui or yarn add once-ui.

<Text>
  Install the package using <InlineCode>npm install once-ui</InlineCode> or <InlineCode>yarn add once-ui</InlineCode>.
</Text>

Custom styling

InlineCode inherits Flex props, allowing for customization of its appearance.

Custom styling

Custom backgroundAccent styleSuccess style

<InlineCode background="brand-alpha-weak" border="brand-alpha-medium">
  Custom background
</InlineCode>
<InlineCode background="accent-alpha-weak" border="accent-alpha-medium">
  Accent style
</InlineCode>
<InlineCode background="success-alpha-weak" border="success-alpha-medium">
  Success style
</InlineCode>

API reference

Prop	Type	Default
children	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

ComponentsInfoTip

ComponentsKbd

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club