Open this component in Storybook
The <dsgn-code-snippet> component frames a multi-line code sample. Slot in a
<pre> — plain, or already highlighted by a tool such as Shiki or Prism — and
the snippet adds a header with an optional filename and language label and a
copy-to-clipboard button. For a single terminal command with a success line,
use CodeBlock instead.
Usage
<dsgn-code-snippet
filename="main.ts"
language="TypeScript"
copy-label="Copy"
copied-label="Copied"
>
<pre><code>import '@ds-gn/ui/button';</code></pre>
</dsgn-code-snippet>Import the component module in your application entrypoint:
import '@ds-gn/ui/code-snippet';Props
| Prop | Type | Default | Description |
|---|---|---|---|
| copied-label | string | '' | Label shown on the button and announced after a successful copy (copiedLabel). |
| copy-label | string | '' | Copy button label (copyLabel). The button is only rendered when a label is supplied. |
| filename | string | '' | File name shown in the header. |
| language | string | '' | Language label shown in the header. |
The header is only rendered when at least one of filename, language, or
copy-label is set. All labels follow the
content ownership policy.
Slots
| Slot | Description |
|---|---|
| (default) | The code, typically a <pre>. Highlighter markup is preserved. |
Events
| Event | Detail | Description |
|---|---|---|
dsgn-copy | { text } | Fired after the code is copied. Bubbles and crosses the shadow boundary. |
In React, the generated wrapper exposes this as onDsgnCopy.
Examples
Highlighted code
Highlight at build time and slot the result in. The snippet frame owns the background, so the highlighter’s own background is made transparent.
<dsgn-code-snippet language="Shell" copy-label="Copy" copied-label="Copied">
<pre
class="shiki"
><code><span style="color:#B392F0">bun</span> add @ds-gn/ui</code></pre>
</dsgn-code-snippet>Without a header
<dsgn-code-snippet>
<pre><code>const theme = 'dark';</code></pre>
</dsgn-code-snippet>Accessibility
The copy button is a native <button> with a visible text label. After a
successful copy its label switches to copied-label, and the same text is
announced through a polite live region before the button resets. If clipboard
access is denied the button does not confirm, and the code remains selectable.
The copy and check icons are decorative.