Display and feedback

CodeBlock

Readable source code with an optional language label and copy action.

Live example

          const preference = "system";
applyTheme(preference);

const preference = "system";
applyTheme(preference);

const preference = "system";
applyTheme(preference);

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { CodeBlock } from "@cofob/design-system-react";

/**
 * Complete CodeBlock parameter reference.
 * @param code
 *   type: string
 *   required
 *   example: "const ready = true;"
 * @param language
 *   type: string
 *   default: —
 *   example: "typescript"
 * @param showLanguage
 *   type: boolean
 *   default: true when language is set
 *   example: true
 * @param copyable
 *   type: boolean
 *   default: true
 *   example: true
 * @param copyLabel
 *   type: string
 *   default: "Copy"
 *   example: "Accessible label"
 * @param copiedLabel
 *   type: string
 *   default: "Copied"
 *   example: "Accessible label"
 * @param copyErrorLabel
 *   type: string
 *   default: "Try again"
 *   example: "Accessible label"
 * @param copyResetAfter
 *   type: number (milliseconds)
 *   default: 1800
 *   example: 1800
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function CodeBlockExample() {
  return (
    <CodeBlock code={source} language="typescript" />
  );
}

Svelte

<script lang="ts">
  import { CodeBlock } from "@cofob/design-system-svelte";

  // Complete CodeBlock parameter reference.
  // code
  //   type: string
  //   required
  //   example: "const ready = true;"
  // language
  //   type: string
  //   default: —
  //   example: "typescript"
  // showLanguage
  //   type: boolean
  //   default: true when language is set
  //   example: true
  // copyable
  //   type: boolean
  //   default: true
  //   example: true
  // copyLabel
  //   type: string
  //   default: "Copy"
  //   example: "Accessible label"
  // copiedLabel
  //   type: string
  //   default: "Copied"
  //   example: "Accessible label"
  // copyErrorLabel
  //   type: string
  //   default: "Try again"
  //   example: "Accessible label"
  // copyResetAfter
  //   type: number (milliseconds)
  //   default: 1800
  //   example: 1800
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<CodeBlock code={source} language="typescript" />

HTML

<!--
  Complete CodeBlock parameter reference.
  code
    type: string
    required
    example: "const ready = true;"
  language
    type: string
    default: —
    example: "typescript"
  showLanguage
    type: boolean
    default: true when language is set
    example: true
  copyable
    type: boolean
    default: true
    example: true
  copyLabel
    type: string
    default: "Copy"
    example: "Accessible label"
  copiedLabel
    type: string
    default: "Copied"
    example: "Accessible label"
  copyErrorLabel
    type: string
    default: "Try again"
    example: "Accessible label"
  copyResetAfter
    type: number (milliseconds)
    default: 1800
    example: 1800
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-code-block" data-cf-copy-scope><button data-cf-copy-button>Copy</button><pre><code data-cf-copy-source>const value = 1;</code></pre></div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-code-block`
Adapters	Native · React · Svelte
Primary props	code · language · showLanguage · copyable · copyLabel · copiedLabel · copyErrorLabel · copyResetAfter · div attributes
Documented states	without toolbar · language · copyable · copied · copy error
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`code`required	`string`	`required`	React · Svelte · HTML	`"const ready = true;"`	Exact source text to render and copy.
`language`	`string`	`—`	React · Svelte · HTML	`"typescript"`	Syntax language identifier and optional visible label.
`showLanguage`	`boolean`	`true when language is set`	React · Svelte · HTML	`true`	Controls whether the language label is visible.
`copyable`	`boolean`	`true`	React · Svelte · HTML	`true`	Enables the clipboard action.
`copyLabel`	`string`	`"Copy"`	React · Svelte · HTML	`"Accessible label"`	Initial accessible copy button text.
`copiedLabel`	`string`	`"Copied"`	React · Svelte · HTML	`"Accessible label"`	Temporary success label after copying.
`copyErrorLabel`	`string`	`"Try again"`	React · Svelte · HTML	`"Accessible label"`	Error label when clipboard access fails.
`copyResetAfter`	`number (milliseconds)`	`1800`	React · Svelte · HTML	`1800`	Delay before the copy action returns to its initial label.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.