# CopySnippet

A code block with copy-to-clipboard functionality and syntax highlighting. Extends `Card`.

## When to Use

- Documentation code examples
- API response displays
- Sharing code snippets with copy functionality

## Properties

- **`code`** `string` (default: `''`) — The code to display
- **`language`** `string` (default: `'javascript'`) — Syntax highlighting language
- **`title`** `string` (default: `'Code example'`) — Accessible title used in the copy toast message
- **`prefix`** `string` (default: `''`) — Prefix for each line of code (e.g. `'$ '` for bash snippets)
- **`nowrap`** `boolean` — Force single-line display even for multi-line code
- **`serif`** `boolean` — Use serif (non-monospace) font for the code
- **`hideText`** `string | string[] | boolean` — Hide sensitive text with bullet characters. `true` hides all text, a string hides that substring, an array hides multiple substrings. A toggle button appears to reveal hidden content.
- **`actions`** `ReactNode` — Additional action buttons displayed alongside the copy button. Use `CopySnippet.Button` for consistent styling.
- **`showTooltip`** `boolean` (default: `false`) — Show tooltip with the full content on hover

### Style Defaults

- `fill` — `#dark-bg`
- `border` — `0`
- `radius` — `1r`
- `padding` — `0`
- `preset` — `default`

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Text:** `textTransform`, `fontWeight`, `fontStyle`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<CopySnippet code="const x = 1;" language="javascript" />

<CopySnippet
  code={'{\n  "key": "value"\n}'}
  language="json"
  multiline
/>
```
