CodeButton
A standalone copy-to-clipboard button for a command or snippet referenced inline in prose.
Usage
vue-html
<SCodeButton code="npm install @sewadah/selaras" />
Unlike ProsePre (a full code block) or
CodeGroup (several of those, tabbed),
SCodeButton is meant to sit inline in a sentence - referencing a single
command without breaking the reading flow into a block. code is both what's
displayed and what actually gets copied; override just the displayed text
with the default slot when they should differ:
vue-html
<SCodeButton code="npm install @sewadah/selaras">
Copy install command
</SCodeButton>
Custom :ui
To see exactly what you'd be overriding - the current default classes for
every slot and variant - here's CodeButton's own theme file:
Theme source "code-button" not found
Props
| Prop | Type | Default |
|---|---|---|
code | string | - (required) |
ui | Partial<Record<CodeButtonSlot, string | object>> | - |
Slots
| Slot | Description |
|---|---|
| default | Overrides the displayed text - code still governs what's copied |