Code

Inline code component for displaying code snippets.

Code

Code is a typography component for rendering inline code with monospace styling.

Import

import { Code } from 'radix-native-ui';

Usage

import { Text, Code } from 'radix-native-ui';

<Text>
  Use the <Code>useState</Code> hook for state management.
</Text>

Props

Examples

Sizes

<Flex direction="column" gap={2}>
  <Code size={1}>Small code</Code>
  <Code size={2}>Default code</Code>
  <Code size={3}>Medium code</Code>
  <Code size={4}>Large code</Code>
  <Code size={5}>Extra large code</Code>
  <Code size={6}>Extra Extra large code</Code>
  <Code size={7}>Extra Extra Extra large code</Code>
  <Code size={8}>Massive code</Code>
  <Code size={9}>Extra Massive code</Code>
</Flex>

Inline Code

<Text>
  Import React with <Code>import React from 'react'</Code>.
</Text>

Variable Names

<Text>
  The <Code>count</Code> variable holds the current value.
</Text>

Function Names

<Text>
  Call the <Code>handlePress()</Code> function when pressed.
</Text>

With Custom Color

<Text>
  Error in <Code color="red">validateInput()</Code> function.
</Text>

Multiple Code Snippets

<Text>
  Use <Code>npm install</Code> to install and <Code>npm start</Code> to run.
</Text>

In Callout

<Callout>
  <Text>
    Tip: Use <Code>console.log()</Code> for debugging.
  </Text>
</Callout>

Related

• Text - Text component
• Kbd - Keyboard shortcut styling
• Callout - Callout component