# Snippet
Use snippets for compact copyable values and reusable MDX fragments inside prose, tables, callouts, and setup instructions.
Source: /docs/components/snippet
Last modified: 2026-06-20
import OfferTermSnippet, { offerSnippetDefaults } from "../../../src/components/docs/snippets/OfferTermSnippet.mdx";

Snippets are for short values that readers may need to copy without breaking the flow into a full code block. Use them for API keys, package names, offer IDs, headers, environment variables, and command fragments.


> **Keep snippets inline**
>

  Use `Snippet` for one value. Use a fenced code block or `CodeGroup` when the reader needs multiple lines, syntax highlighting, or surrounding context.


## Basic example

Set `PLANDALF_PUBLIC_KEY` in your client environment and keep `PLANDALF_API_KEY` on the server.

```mdx title="snippet-basic.mdx"
Set `PLANDALF_PUBLIC_KEY` in your client environment and keep `PLANDALF_API_KEY` on the server.
```

## Labels and children

Use `label` when the snippet is generated from props, or put short inline content between the tags when porting existing MDX.


> **Offer identifiers**
>

  Use `offer_founder_launch` as the offer slug in examples. Use `test mode` when the value should read like inline code but not show a copy action.


```mdx title="snippet-labels.mdx"

> **Offer identifiers**
>

  Use `offer_founder_launch` as the offer slug in examples.
  Use `test mode` when the value should read like inline code but not show a copy action.


```

## Reusable MDX snippets

Mintlify also uses snippets for reusable MDX fragments. In Plandalf docs, put the reusable fragment outside `content/docs`, import it into any page, and pass variables as props.


> **Keep reusable snippets outside the docs collection**
>

  Files under `content/docs` become public docs routes. Store reusable MDX fragments under `src/components/docs/snippets` so they can be imported without rendering as standalone pages.


> **Imported snippet with variables**
>

  <OfferTermSnippet term="offer" href={offerSnippetDefaults.href} />


```mdx title="src/components/docs/snippets/OfferTermSnippet.mdx"
import Tooltip from '../v2/Tooltip.astro';
import Snippet from '../v2/Snippet.astro';

export const offerSnippetDefaults = {
  term: 'offer',
  href: '/docs/offers/overview',
};

export const OfferTermSnippet = ({ term = offerSnippetDefaults.term, href = offerSnippetDefaults.href }) => (
  <span>
    A Plandalf {term} is the root object behind checkout. Use `offer_founder_launch` as the reusable example slug.
  </span>
);

export default OfferTermSnippet;
```

```mdx title="content/docs/example-page.mdx"
import OfferTermSnippet, { offerSnippetDefaults } from "../../../src/components/docs/snippets/OfferTermSnippet.mdx";

<OfferTermSnippet term="offer" href={offerSnippetDefaults.href} />
```

## Authoring rules


### Snippet usage


- `Use for literal values` (IDs, keys, headers):
    Snippets should represent exact values, variables, package names, or small command fragments.


- `Do not hide setup logic` (not a code block):
    If the reader needs to understand more than one line, use a fenced code block with a title and language.


- `Keep copy behavior intentional` (copy by default):
    Copy is enabled by default. Disable it for labels that describe a concept rather than a value.


- `Use MDX imports for reusable fragments` (shared content):
    Import a reusable MDX fragment when the same definition, warning, setup step, or product explanation appears on multiple docs pages.


## Properties


- `text` (string):
  Literal value shown in the snippet and copied by the button.


- `label` (string):
  Alias for `text` when imported MDX uses label-style props.


- `children` (ReactNode):
  Inline fallback content when the snippet wraps a short value instead of receiving `text` or `label`.


- `icon` (string; default: copy):
  Icon rendered before the value through the shared docs icon layer.


- `copy` (boolean; default: true):
  Shows or hides the copy button.


- `class | className` (string):
  Optional local utility classes for rare inline layout adjustments.


## Related


  - [Code groups](/docs/components/code-groups): Use for multi-line language examples.
  - [Tooltips](/docs/components/tooltips): Use for inline definitions.
  - [Attention](/docs/components/attention): Use snippets beside callouts and notices.