Code block | Surflane

AvailableSemantic HTML / product composition

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

# Local preview — no remote resources are created
name: platform-api
environment: demo-main
checks:
  - access.identity-control
  - access.env-allow
  - access.env-deny
labels:
  purpose: "한글과 공백을 보존하는 실행 예제"
  reference: "https://demo.example.invalid/api/deployments/environments/staging/projects/demo-e2e-01/build-logs?include=identity,roles,permissions,service-endpoints"
revision: 1

The source stays selectable when clipboard permission is denied.
<script>Example text is never executed.</script>

npm install @surflane/ui

Usage

Show code, configuration, and long identifiers with whitespace and line breaks preserved, ready to select and copy. The copy button shows its result in place: Copied, or Copy unavailable. Content scrolls horizontally by default. In documentation, set wrap so only long lines break.

Don't let syntax highlighting pass for syntax validation or an execution result. Report those separately instead.
Don't inject code as HTML or execute it. Pass a plain source string to code instead.
Don't treat a rejected clipboard write as success. Let a custom onCopy throw or reject on failure, so the button shows Copy unavailable.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → toolbar(label + language + CopyButton, which also shows the result) + labeled ScrollArea(pre/code). CopyButton also stands alone beside any value.

Keyboard and accessibility

Tab reaches the copy button and the scroll area.
Enter or Space copies. The result replaces the button label in place, so nothing else moves: Copied on success, Copy unavailable on failure.
On failure, the source is selected for the keyboard copy shortcut.
Changing the source clears the result, and late responses don't overwrite the new source's state.
The label is a polite live region and returns to the action after 2 seconds.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { CodeBlock } from '@surflane/ui'

<CodeBlock
  label='Runner task'
  language='YAML'
  code={'name: platform-api\n  environment: staging\n'}
/>
<CodeBlock label='Wrapped source' code={source} wrap />

Key API

Code block — common wrapper props
Prop	Contract	Default
`code`	plain source string	required
`label / language`	scroll region name / Shiki grammar and visible language hint; unknown languages render plain	Code / —
`wrap`	wrap long source lines visually	false
`onCopy`	optional clipboard writer (text) => void \| Promise<void>	navigator.clipboard.writeText
`labels`	{ copy, copied, copyError }: the localized action and short in-button results	Copy code / Copied / Copy unavailable
`CopyButton.value`	the text to copy, or a function that returns it, or a promise of it, when pressed	required
`CopyButton.labels / onCopy`	as on CodeBlock; the action defaults to Copy	Copy / Copied / Copy unavailable
`CopyButton.labelHidden`	the icon alone in a square button, where a row has no room; the label stays the name and the live result, and shows as a tooltip	false
`CopyButton.onResult`	hears 'copied' or 'failed' after each press, such as to select the source after a failure	—

The table lists the common wrapper's main props. See the package type declarations for the full types.