# Snippet

Shows a one-line command or value with a copy button.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Snippet.tsx)

## Overview

A snippet shows a one-line command or value with a copy button at the end.

Pass only the command text. The `prompt` glyph is decorative and hidden from assistive technology.

## Examples

### Basic

```tsx
import { Snippet, style } from '@tempoxyz/ds'

export function Demo() {
  return <Snippet {...styles.snippet()}>pnpm add @tempoxyz/ds</Snippet>
}

namespace styles {
  export const snippet = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Snippet/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Snippet, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.column()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Snippet key={size} size={size}>
          pnpm add @tempoxyz/ds
        </Snippet>
      ))}
    </div>
  )
}

namespace styles {
  export const column = style({
    display: 'grid',
    gap: '3',
    gridTemplateColumns: 'minmax(0, 28rem) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Snippet/Size.tsx)

### Prompt

Set `prompt` to a glyph, or `false` to hide it. It defaults to `$`.

```tsx
import { Snippet, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Snippet prompt={false} {...styles.snippet()}>
      https://ds.tempo.xyz
    </Snippet>
  )
}

namespace styles {
  export const snippet = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Snippet/Prompt.tsx)

## Guidelines

TODO: Write guidelines for Snippet.