Skip to contentSkip to navigationSkip to topbar
Figma
Star

Inline Code

Version 4.1.1GithubStorybookPeer review pending

An inline code component visually distinguishes pieces of texts as fragments of code.

Component preview theme
<InlineCode>
console.log(mySustainabilityGoals)
</InlineCode>

Guidelines

Guidelines page anchor

About Inline Code

About Inline Code page anchor

The Inline Code component emphasizes short, inline pieces of computer code such as variable names, commands, and function calls. It's also used to display important inline code snippets, such as SIDs, IDs, and API keys

The most common use for Inline Code is inside of other pieces of text. Inline Code emphasizes that the text is a piece of code using styling conventions.

Component preview theme
<Text as="span">
A <InlineCode>Service</InlineCode> is the top-level scope of all other resources in the REST API. It owns
{' '}<InlineCode>Sessions</InlineCode> and <InlineCode>Participants</InlineCode> for a Proxy application.
</Text>

Inline Code is also commonly used standalone for key pieces of code text, such as SIDs or Keys.

Component preview theme
<Stack orientation="vertical" spacing="space30">
<Text fontWeight="fontWeightMedium" as="div">
API Key
</Text>
<InlineCode>WQC0000001111111122234444444</InlineCode>
</Stack>