Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Twilio-labs/paste/llms.txt

Use this file to discover all available pages before exploring further.

Inline Code

The Inline Code component is used to display short code snippets or technical terms inline with text.

Installation

yarn add @twilio-paste/inline-code

Usage

import { InlineCode } from '@twilio-paste/inline-code';
import { Paragraph } from '@twilio-paste/paragraph';

<Paragraph>
  To install the package, run <InlineCode>npm install @twilio-paste/core</InlineCode> in your terminal.
</Paragraph>

Props

InlineCode

element
string
default:"INLINE_CODE"
Overrides the default element name to apply unique styles with the Customization Provider.
variant
'default' | 'minimal'
default:"default"
Only the “default” variant should be used as the “minimal” variant is deprecated.

Examples

Basic Usage

<Paragraph>
  Use the <InlineCode>useState</InlineCode> hook to add state to your component.
</Paragraph>

Multiple Inline Code Elements

<Paragraph>
  Import <InlineCode>Box</InlineCode> and <InlineCode>Text</InlineCode> from <InlineCode>@twilio-paste/core</InlineCode>.
</Paragraph>

In Lists

import { UnorderedList, ListItem } from '@twilio-paste/list';

<UnorderedList>
  <ListItem>
    <InlineCode>const</InlineCode> for constants
  </ListItem>
  <ListItem>
    <InlineCode>let</InlineCode> for variables
  </ListItem>
  <ListItem>
    <InlineCode>var</InlineCode> (avoid using)
  </ListItem>
</UnorderedList>

Styling

The Inline Code component features:
  • Monospace font family
  • Subtle background color
  • Border for visual separation
  • Inherits text size and line height from parent
  • Rounded corners
  • Consistent padding

Best Practices

  • Use for short code snippets, function names, variable names, or technical terms
  • For multi-line code, use the Code Block component instead
  • Keep inline code concise to maintain readability
  • Use within text content like paragraphs, headings, or list items

Accessibility

  • Renders as semantic <code> element
  • Inherits color from parent for better contrast customization
  • Works with screen readers to indicate code content

Build docs developers (and LLMs) love