---
title: "Code Block"
description: "Code Block with sizes and variants"
source: "Equality"
---
import { CodeBlock } from "@eqtylab/equality";

## Overview

---

The Code Block component comes with syntax highlighting and four color variants to visually communicate different statuses or contexts:

- **Neutral:** The default style, suitable for general blocks of code.
- **Primary:** Alternate style, general highlight.
- **Warning:** Highlights code that may have caveats, edge cases, or requires extra attention.
- **Danger:** Highlights code that can cause errors or undesirable outcomes.
- **Success:** Highlights recommended or preferred code patterns.

## Usage

---

Import the component:

```tsx
import { CodeBlock } from "@eqtylab/equality";
```

`code` is a required prop and should be set to the string of code you want to appear within the code block. Set the code language by using the `language` prop.

For example:

```tsx
const code = `
console.log('Hello, world!');
`;

<CodeBlock language="js" code={code} />;
```

`neutral` is the default variant. Select another by using the `variant` prop, for example:

```tsx
<CodeBlock title="Error" variant="danger" language="js" code={code} />
```

## Code Language Support

---

The Code Block component uses refractor and Prism for syntax highlighting. Most languages are supported - those that aren't will fallback to general `text` syntax highlighting.

See [Refractor's readme](https://github.com/wooorm/refractor/blob/main/readme.md#data) for the full list of languages supported by this package (all languages in the list are supported - this package uses `refractor/all`).

The language **must** be passed to the Code Block component via the `language` prop in order for syntax highlighting to work.

For example:

```tsx
<CodeBlock language="json" code={code} />
```

## Color Variants

---

Code blocks support color variants using either the brand primary color or status options. Available variants are `neutral`, `primary` (brand primary color), `success`, `danger`, and `warning`. Use these to visually distinguish different types of code or contexts according to your design needs.

### Primary (default)

<CodeBlock
  title="Example"
  language="tsx"
  codeLabel="// This is the code block component!"
  code={`import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import darkStyle from 'react-syntax-highlighter/dist/esm/styles/prism/a11y-dark';
import lightStyle from 'react-syntax-highlighter/dist/esm/styles/prism/prism';

import { Badge } from "@/components/badge/badge";
import styles from "@/components/code-block/code-block.module.css";
import { CopyButton } from "@/components/copy-button/copy-button";
import { cn } from "@/lib/utils";
import { useTheme } from "@/theme/hooks/use-theme";

interface CodeBlockProps {
className?: string;
title?: string;
code: string;
language?: string;
variant?: 'neutral' | 'primary' | 'success' | 'danger' | 'warning';
codeLabel?: string;
copy?: string;
}

const WRAP = true;

const CodeBlock = ({
className,
title,
code,
language = 'text',
variant = 'neutral',
codeLabel,
copy,
}: CodeBlockProps) => {
const [theme] = useTheme();

return (

<div className={cn(styles["code-block"], className)}>
  <div className={styles.header}>
    <div className={styles["header-left"]}>
      {title && <span className={styles.title}>{title}</span>}
      <Badge variant="neutral" className={styles["badge"]}>
        {language}
      </Badge>
    </div>
    <div className={styles["header-right"]}>
      <CopyButton value={copy || code} size="sm" />
    </div>
  </div>
  <div className={cn(styles.content, styles[variant])}>
    <div
      className={cn(styles["scroll-container"], "styled-vertical-scrollbar")}
    >
      {codeLabel && <div className={styles["code-label"]}>{codeLabel}</div>}
      <SyntaxHighlighter
        language={language}
        style={theme === "dark" ? darkStyle : lightStyle}
        wrapLines={WRAP}
        wrapLongLines={WRAP}
        className={styles.pre}
        codeTagProps={{ className: cn(styles.code, { [styles.wrap]: WRAP }) }}
      >
        {code}
      </SyntaxHighlighter>
    </div>
  </div>
</div>
); };

export { CodeBlock };
`}
client:only="react"
/>

### Success

<CodeBlock
  title="Success"
  language="js"
  code="console.log('Hello, world!');"
  variant="success"
  client:only="react"
/>

### Danger

<CodeBlock
  title="Danger"
  language="js"
  code="console.log('Hello, world!');"
  variant="danger"
  client:only="react"
/>

### Warning

<CodeBlock
  title="Warning"
  language="js"
  code="console.log('Hello, world!');"
  variant="warning"
  client:only="react"
/>

## Title

---

The Code Block component supports arbitrary titles:

<CodeBlock
  title="Custom Title"
  language="js"
  code="console.log('Hello, world!');"
  client:only="react"
/>

## Code label

---

The Code Block component supports arbitrary code labels:

<CodeBlock
  title="Example"
  language="js"
  codeLabel="/* This is a code label - it won't be copied to the clipboard */"
  code="console.log('Hello, world!');"
  client:only="react"
/>

## Props

---

| Prop        | Type                                                                   | Default     | Description                                                                           |
| ----------- | ---------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
| `language`  | `string`                                                               | `"text"`    | The language of the code for syntax highlighting.                                     |
| `variant`   | `"neutral"` \| `"primary"` \| `"warning"` \| `"danger"` \| `"success"` | `"neutral"` | The visual style variant of the code block.                                           |
| `title`     | `string`                                                               | -           | Text to display as the title.                                                         |
| `codeLabel` | `string`                                                               | -           | Text to display as the code label.                                                    |
| `code`      | `string`                                                               | Required    | String of text to display within the code block as code.                              |
| `copy`      | `string`                                                               | -           | String to copy when the copy button is clicked. Falls back to `code` if not provided. |
| `className` | `string`                                                               | -           | Additional CSS classes to apply to the badge.                                         |