diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 7d722f42..a5e20b8b 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -611,6 +611,7 @@ import { CodeSnippet } from "carbon-components-svelte";
| code | string | -- |
| expanded | boolean | false |
| hideCopyButton | boolean | false |
+| wrapText | boolean | false |
| light | boolean | false |
| skeleton | boolean | false |
| copyButtonDescription | string | -- |
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 59eb202b..7b6c8252 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -19,6 +19,12 @@ export function add(a: number, b: number) {
export function subtract(a: number, b: number) {
return a - b;
}`;
+
+let comment = `
+> \`carbon-components-svelte\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
+
+> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
+`
@@ -39,6 +45,12 @@ export function subtract(a: number, b: number) {
+### Wrap text
+
+Note that `wrapText` only applies to the `"multi"` type.
+
+
+
### Skeleton
\ No newline at end of file
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 3bf611ff..0061cb84 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -24,6 +24,13 @@
*/
export let hideCopyButton = false;
+ /**
+ * Set to `true` to wrap the text
+ * Note that `type` must be "multi"
+ * @type {boolean} [wrapText=false]
+ */
+ export let wrapText = false;
+
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
@@ -121,7 +128,8 @@
{type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}
- {hideCopyButton && 'bx--snippet--no-copy'}"
+ {hideCopyButton && 'bx--snippet--no-copy'}
+ {wrapText && 'bx--snippet--wraptext'}"
{...$$restProps}
>
@@ -138,7 +146,8 @@
{type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}
- {hideCopyButton && 'bx--snippet--no-copy'}"
+ {hideCopyButton && 'bx--snippet--no-copy'}
+ {wrapText && 'bx--snippet--wraptext'}"
{...$$restProps}
on:click
on:mouseover
@@ -157,6 +166,7 @@
class:bx--snippet--expand="{expanded}"
class:bx--snippet--light="{light}"
class:bx--snippet--no-copy="{hideCopyButton}"
+ class:bx--snippet--wraptext="{wrapText}"
{...$$restProps}
class="{type && `bx--snippet--${type}`} {$$restProps.class}"
on:mouseover
diff --git a/types/index.d.ts b/types/index.d.ts
index 5b2e8b1c..38423c34 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -387,6 +387,13 @@ export class CodeSnippet extends CarbonSvelteComponent {
*/
hideCopyButton?: boolean;
+ /**
+ * Set to `true` to wrap the text
+ * Note that `type` must be "multi"
+ * @default false
+ */
+ wrapText?: boolean;
+
/**
* Set to `true` to enable the light variant
* @default false