Skip to content

CodeChip

In the app

A token, path or identifier inline. Menlo on the fill surface with the soft hairline.

@varick/ui/components/code-chipAdded 26 Aug 2026

Deployed order-to-cash to prod with varick-docs attached.

Usage

import { CodeChip } from "@varick/ui/components/code-chip";

export function Example() {
  return <CodeChip>order-to-cash</CodeChip>;
}

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
childrenReactNoderequiredThe identifier. Never a sentence.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.code-chip {
  display: inline-block;
  background: var(--fill);
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-family: 'Menlo', monospace;
  color: var(--fg-mid);
}