UxCode
components/ux/Code.vue
Inline code span — mono, grey chip background, sized at 0.9em so it tracks surrounding text.
Inline code like useTrafficViz() sits inside running prose and scales with the surrounding font size.
Scenarios
Smaller prose with UxButton and extends references — the 0.9em sizing tracks the paragraph.
Caution notes use the warn tone: always wrap in <ClientOnly> in SSR apps.
Overflow: document.getElementById('page-scroll-window').addEventListener('scroll', handler) wraps within the line.
block display via class passthrough — a standalone code chip linecomponents/ux/Code.vue
Usage
<UxCode
tone = "grey"
>
Content here
</UxCode>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | String | 'grey' | grey or warn (amber) for caution notes |
Slots
| Slot | Description |
|---|---|
| default | The code text |