Components / agents

Code Block

A block of code with a header (file name or language) and a Copy button.

import { CodeBlock } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { CodeBlock } from '@basiiik/ui';

<CodeBlock code="npm install @basiiik/ui" />

• Example values were filled in for the required prop code: replace them with your own.
• Hover and Focused are CSS on the Copy button and the focusable code region. Copied is internal: it shows for two seconds after the code was copied and is announced through a status region.
• Storybook: Agents/Code block.

Props

States. Hover and Focused are CSS on the Copy button and the focusable code region. Copied is internal: it shows for two seconds after the code was copied and is announced through a status region.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Code an agent shows or proposes: a snippet, a command, a config
• A command the person should copy and run

Do not use it when

• The change to a file (use File Diff)
• Inline code in a sentence (use the code element)
• Output of a running tool (use Tool Call)

Rules for agents

• Pass the code as code, a plain string, without Markdown fences
• Set filename when the code belongs to a file, otherwise language
• Use lineNumbers when the answer refers to lines by number
• Put it inside the assistant ChatMessage, between paragraphs
• Never put a person's secret or token in a CodeBlock example

Avoid

• A <pre> hand-built with a copy button of your own
• Code in a Card or Alert
• Several lines of a diff shown as a CodeBlock (use File Diff)
• Screenshots of code

Writing the content

• File name: the path from the project root
• Language: the lower-case name the person knows ("tsx", "bash")

Keyboard

• Tab moves to the Copy button, then into the code region
• Arrow keys scroll the code once the region has focus
• Enter or Space on Copy copies the code

Accessibility

• The code sits in a region named "Code: <file name or language>" that can take focus, so keyboard users can scroll long lines
• The Copy button has a name ("Copy code"); "Copied" is announced through a polite status region
• Line numbers are aria-hidden and cannot be selected, so they are never read or copied

Colour tokens it reads

Related

• File Diff
• Tool Call
• Chat Message

agents 4 Figma variants Try it in the live demo