Code Block With Copy
Style
Token references resolve from the active theme. The component never hardcodes a colour, font, or spacing value.
Token Mapping
| Element | Token |
|---|---|
| Block background / text | {semantic.surface-code} / {semantic.ink-code} |
| Copy button hover state | {semantic.interactive-ghost-hover} |
Structure
The copy button (.ps-code-block__copy) is positioned inset within the
block and fades in on hover/focus rather than persisting at full opacity —
this keeps dense pages of stacked code blocks from feeling button-heavy
while still surfacing the affordance the moment a reader's attention (mouse
or keyboard focus) lands on a given block.
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.