Component contract
code-block
Code block with a language label and a built-in copy button.
- Version
- v1.0.0
Props
| Name | Type | Values | Default |
|---|---|---|---|
| code | string | — | — |
| language | string | — | bash |
Tokens
- font
- family
Accessibility
- native_element
- div (container) with an inner button for copy-to-clipboard
- keyboard
- ["Enter/Space activates the copy button (native)"]
- notes
- code content is text-only, no ARIA needed. The copy button uses a native <button> so screen readers announce it correctly. There is no live region — the 'copied' visual state (1.4s timeout) is not announced. Add an aria-live region if that becomes a real user need.
Raw validated JSON
{
"name": "code-block",
"version": "1.0.0",
"props": {
"code": {
"type": "string"
},
"language": {
"type": "string",
"default": "bash"
}
},
"tokens_used": {
"font": [
"family"
]
},
"a11y": {
"native_element": "div (container) with an inner button for copy-to-clipboard",
"keyboard": [
"Enter/Space activates the copy button (native)"
],
"notes": "code content is text-only, no ARIA needed. The copy button uses a native <button> so screen readers announce it correctly. There is no live region — the 'copied' visual state (1.4s timeout) is not announced. Add an aria-live region if that becomes a real user need."
}
}