Code

Preview

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

Installation

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

import { Code } from '@kerf-js/veneer'<Code>kerf deploy</Code>

Usage

import { Code } from '@kerf-js/veneer'<Code>kerf deploy</Code>

Names and values

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

import { Code } from '@kerf-js/veneer'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.

import { Card, Code, Text } from '@kerf-js/veneer'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

Accessibility

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

API Reference

RelatedCode blockSnippetKbd