# <motion-code-inline>

Inline code snippet with an optional copy-to-clipboard button. Renders the
slotted text inside a styled `<code>` element; the copy button fades in on
hover, or stays visible with `copy-visible`. The copy icon is a
`motion-icon-state` that morphs into a check after copying, and it scales
with the text.

**Use it for:** short code inside running text, such as a command, a file
name, an attribute or a CSS variable, with an optional copy button.

**Avoid it for:** code that spans more than one line or is long, because
it never wraps; use `motion-code` for blocks.

**Accessibility:** the text is in a real `<code>` element. The copy button
is a native `<button>` named "Copy", which changes to "Copied" for 1.8
seconds after a click. With `copy` alone, the button stays transparent
until the pointer is over the component or the button has keyboard focus.
Set `copy-visible` to show it at all times.

**Reduced motion:** the copy icon switches to the check at once, with no
morph. The copy button keeps its short 0.15 s CSS fade on hover.

**Common mistakes:** putting a prompt such as `$ ` inside the element: the
button copies all of the element's text, prompt included. Expecting copy to
work on a page served over plain HTTP: the Clipboard API needs HTTPS or
localhost, so the button does nothing there.

Docs: https://www.motion-components.dev/docs/code/motion-code-inline/

## Install

```js
import 'motion-components/motion-code-inline'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-code-inline.js/+esm"></script>
```

## Example

```html
<motion-code-inline copy>npm i motion-components</motion-code-inline>
<motion-code-inline copy-visible>--mc-color-accent</motion-code-inline>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `copy` | `boolean` | `false` | Show a copy-to-clipboard button that fades in on hover. |
| `copy-visible` | `boolean` | `false` | Show the copy button and keep it permanently visible, without needing hover. Implies `copy`. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | The code text to render and copy. |

## CSS custom properties

| Property | Description |
| --- | --- |
| `--mc-color-accent` | Code text color, and the copy button color on hover. |
| `--mc-color-accent-dim` | Background behind the code. |
| `--mc-color-muted` | Copy button color. |
| `--mc-icon-color-active` | Color of the check after copying. Default the copy button color. |