Component · Messaging

Code block

a monospaced block with a language label and a one-click copy button.

Anatomy

1 host · .lucent-code-block
2 .lucent-code-block__header · language label + copy button
3 .lucent-code-block__body · <pre><code> the code

Variants

Where available

✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens

Using it

the same component, named idiomatically per target. one CSS contract underneath, so they render identically.

TargetReferencePackage
React <CodeBlock> @design-foundry/lucent-react
Angular <lucent-code-block> @design-foundry/lucent
Web Components <lucent-code-block> @design-foundry/lucent-wc
Blazor <LucentCodeBlock> DesignFoundry.Lucent

API

PropTypeDefaultDescription
language string — language label in the header.
code string — the code (set as a property for multi-line).