Code

A short piece of code inside a sentence.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Code, Text } from '@weft-js/warp'export function InSentence() {  return (    <Text>Set <Code>WEFT_TOKEN</Code> before you run <Code>weft deploy</Code>.</Text>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { Code } from '@weft-js/warp'<Code>weft deploy</Code>

Names and values

Use Code to mark a name or value inside a sentence.

tsx

import { Code } from '@weft-js/warp'export function Names() {  return (    <>      <Code>main</Code>      <Code>9f3ac21</Code>      <Code>eu-west</Code>    </>  )}

On a card

A Code can sit inline in a sentence, here on a card, to mark a commit, a branch and a region.

tsx

import { Card, Code, Text } from '@weft-js/warp'export function OnACard() {  return (    <Card eyebrow="Latest" title="Cache product images at the edge">      <Text subtle>Deployed <Code>9f3ac21</Code> from <Code>main</Code> to <Code>eu-west</Code>.</Text>    </Card>  )}

When to use

Use it for

Names, flags and commands in running text

Reach for something else

CodeBlock, when it runs to more than a line
Snippet, when people will copy it

Playground

Code

import { Code } from '@weft-js/warp'<Code>weft deploy</Code>

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`children`	`unknown`	—	What it contains.

RelatedCode block Snippet Kbd