Home

Copy Markdown

Usage

The copy markdown button is an inline utility. Start with:

  • --copy-markdown-font-size and --copy-markdown-icon-size for scale

  • --copy-markdown-color and --copy-markdown-color-hover for interaction

  • --copy-markdown-color-success and --copy-markdown-color-error for state feedback

Tokens

TokenDescriptionDefault Value
--copy-markdown-font-familyFont familyvar(--layout-font-family)
--copy-markdown-icon-sizeIcon size1em
--copy-markdown-font-sizeText font sizevar(--font-size-2xs)
--copy-markdown-gapGap between icon and textvar(--space-2)
--copy-markdown-colorButton text colorvar(--text-color-secondary)
--copy-markdown-color-hoverButton hover colorvar(--text-color-primary)
--copy-markdown-color-successSuccess state colorvar(--color-success, #22c55e)
--copy-markdown-color-errorError state colorvar(--color-error, #ef4444)

Examples

Subtle Utility Button

:root {
  --copy-markdown-font-size: var(--font-size-3xs);
  --copy-markdown-color: var(--text-color-muted);
}

Brighter State Feedback

:root {
  --copy-markdown-color-success: var(--color-green-600);
  --copy-markdown-color-error: var(--color-red-600);
}

Tips

Consistency: Align copy-markdown typography with edit links for a cohesive utility row.

Status clarity: Keep success and error colors distinct from normal text colors.

© 2026 Stencila