Content & statusBrick 0.1.2

Code Block

Code Block presents structured multi-line source with native scrolling, explicit language metadata, and truthful Atom-backed copy behavior.

Live example

Built from the published package

Interactive

Button.tsxtsx

<Button tone="accent">Publish</Button>

Choose with confidence

Know when Code Block is the right part

Use it when

Use it for examples, configuration, commands, generated markup, and other preserved multi-line technical content that may overflow its container.

Choose another path when

Do not use it for inline literals, Markdown rendering, editable source, terminal output, executable sandboxes, or accidental layout overflow.

Installation and imports

tsx

import { CodeBlock } from "@flowstack-ui/brick/code-block";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/code-block.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

CodeBlock and every direct part are also available from the package root.

Quick start

tsx

<CodeBlock.Root value={source} language="tsx">
  <CodeBlock.Header>
    <CodeBlock.Title>Button example</CodeBlock.Title>
    <CodeBlock.Language />
    <CodeBlock.Actions>
      <CodeBlock.CopyTrigger>Copy</CodeBlock.CopyTrigger>
    </CodeBlock.Actions>
  </CodeBlock.Header>
  <CodeBlock.Content aria-label="Button example source" />
</CodeBlock.Root>

Visual recipes and states

subtle supplies a quiet filled surface, bordered a transparent bordered surface, and plain removes surrounding paint. Size changes only component rhythm and technical typography. Atom supplies idle, copying, copied, and error copy states; the trigger is disabled when the clipboard contract is disabled. Scroll and wrap differ only in long-line handling.

Examples

Copy feedback

tsx

<CodeBlock.CopyStatus>
  <CodeBlock.CopyIndicator when="copying">Copying…</CodeBlock.CopyIndicator>
  <CodeBlock.CopyIndicator when="copied">Copied</CodeBlock.CopyIndicator>
  <CodeBlock.CopyIndicator when="error">Copy failed</CodeBlock.CopyIndicator>
</CodeBlock.CopyStatus>

Wrapped content

tsx

<CodeBlock.Root value={longLine} language="text">
  <CodeBlock.Content wrap="wrap" aria-label="Wrapped example" />
</CodeBlock.Root>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Part or prop	Values	Default
`Root.value`	copied plain-text source	required
`variant`	`subtle`, `bordered`, `plain`	`subtle`
`size`	`sm`, `md`	`md`
`Root.language`	explicit string	none
`wrap`	`scroll`, `wrap`	`scroll`
`focusable`	`boolean`	`true`
Clipboard behavior	`disabled`, `timeout`, `writeValue`, `onStatusChange`	Atom defaults

Public parts are Root, Header, Title, Language, Actions, Content, CopyTrigger, CopyIndicator, and CopyStatus. Direct exports are CodeBlockRoot, CodeBlockHeader, CodeBlockTitle, CodeBlockLanguage, CodeBlockActions, CodeBlockContent, CodeBlockCopyTrigger, CodeBlockCopyIndicator, and CodeBlockCopyStatus. Their prop types are CodeBlockRootProps, CodeBlockHeaderProps, CodeBlockTitleProps, CodeBlockLanguageProps, CodeBlockActionsProps, CodeBlockContentProps, CodeBlockCopyTriggerProps, CodeBlockCopyIndicatorProps, and CodeBlockCopyStatusProps. Type exports also include CodeBlockVariant, CodeBlockSize, and CodeBlockWrap.

Shared responsibility

Accessibility

Give focusable Content a specific aria-label or aria-labelledby; it is the only scroll-region keyboard stop. CopyTrigger retains focus. Author concise CopyStatus text for copying, success, and failure so Atom can announce truthful results. Do not add role="application".

Responsive behavior

The root fills available inline space but owns no external dimensions or breakpoints. scroll preserves long lines in the horizontal viewport; wrap reflows them. Code defaults to LTR inside an RTL page while Header follows page direction.

Stable visual contract

Styling and tokens

Customization

tsx

<CodeBlock.Root
  value={source}
  style={{ "--brick-code-block-border-color": "rebeccapurple" }}
>
  <CodeBlock.Content aria-label="Customized source" />
</CodeBlock.Root>

Language highlighting is consumer-owned. Pass trusted highlighted React nodes to Content while keeping Root value as the matching plain text. Unsafe HTML is not accepted and Brick does not bundle a tokenizer.

Tokens and CSS hooks

Hooks include .brick-code-block and its part classes, Atom data-state, plus data-slot, data-language, data-size, data-variant, and data-wrap. Public variables are --brick-code-block-background, --brick-code-block-foreground, --brick-code-block-border-color, --brick-code-block-border-width, --brick-code-block-radius, --brick-code-block-header-padding, --brick-code-block-content-padding, --brick-code-block-gap, --brick-code-block-font-family, --brick-code-block-font-size, --brick-code-block-font-weight, --brick-code-block-line-height, --brick-code-block-letter-spacing, --brick-code-block-selection-background, and --brick-code-block-selection-foreground.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground