Skip to main content
cngx-src documentation

CngxCopyBlock

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/common/interactive/copy/copy-block.ts

GitHub

Import#

import { CngxCopyBlock } from '@cngx/common/interactive'

Description#

Molecule: code/text block with a built-in copy button.

Renders content in a container with a "Copy" button that uses CngxCopyText internally. Shows "Copied!" feedback automatically. The copy button includes an aria-live region for screen reader announcements.

Copy a code snippet

<cngx-copy-block [value]="'npm install @cngx/common'">
  <code>npm install &#64;cngx/common</code>
</cngx-copy-block>

Copy an API key

<cngx-copy-block [value]="apiKey()" buttonLabel="Copy Key">
  {{ apiKey() }}
</cngx-copy-block>

https://cngxjs.github.io/cngx/examples/#/common/interactive/copy/block/api-key https://cngxjs.github.io/cngx/examples/#/common/interactive/copy/block/code-snippet

Related#

Metadata#

Selector
cngx-copy-block
Export as
cngxCopyBlock
Change detection
ChangeDetectionStrategy.OnPush
Encapsulation
ViewEncapsulation.None
Style URLs
./copy-block.css
Imports
CngxCopyText

Relationships

Depends on1

CngxCopyTextAttribute directive

Index#

Inputs

buttonLabelcopiedLabelsrAnnouncementvalue

Inputs#

buttonLabel#string
input()

Label for the copy button.

default 'Copy'
copiedLabel#string
input()

Label shown after successful copy.

default 'Copied!'
srAnnouncement#string
input()

Screen reader announcement on copy.

default 'Copied to clipboard'
value#string
input()Required

The text value to copy to clipboard.

Default visuals for CngxCopyBlock. The host carries .cngx-copy-block and lays the projected content into .cngx-copy-block__content next to a .cngx-copy-block__button that toggles to a success-tinted confirmation state on click. The copied colors fall back to --cngx-color-success so a brand override in @layer cngx.theme propagates without forking tokens.

State modifiers

  • __button--copied - swaps background / border / text to the success-tinted palette for the confirmation pulse

Slots

  • .cngx-copy-block__content - the projected payload (flex: 1, overflow: hidden, min-width: 0)
  • .cngx-copy-block__button - the copy trigger
  • .cngx-sr-only - visually-hidden status copy for AT

Inheritance

Layout, typography, and surface tokens cascade through the foundation; the copied-state palette delegates to the semantic success token:

  • --cngx-copy-block-gap -> --cngx-space-sm
  • --cngx-copy-block-btn-radius -> --cngx-radius-sm
  • --cngx-copy-block-btn-font-size -> --cngx-font-size-sm
  • --cngx-copy-block-btn-copied-border -> --cngx-color-success
  • --cngx-copy-block-btn-copied-color -> --cngx-color-success

Dark mode

Three hooks flip the copied-state surface from a light-green tint to a dark-green tint, and the matching text color from a mid-green hue to a light-green hue. The border stays at mid-green since it reads on either surface:

  • prefers-color-scheme: dark
  • [data-color-scheme="dark"]
  • .dark class

A matching [data-color-scheme="light"] / .light block pins the light values so explicit-light overrides win over the media query.

Index#

Layout

--cngx-copy-block-gap--cngx-copy-block-btn-radius--cngx-copy-block-btn-padding

Surface

--cngx-copy-block-btn-border--cngx-copy-block-btn-bg--cngx-copy-block-btn-color

Typography

--cngx-copy-block-btn-font-size

State / Copied

--cngx-copy-block-btn-copied-bg--cngx-copy-block-btn-copied-border--cngx-copy-block-btn-copied-color

Layout

--cngx-copy-block-gap#<length>
Default value 8px

Gap between the content block and the copy button. Falls back to --cngx-space-sm.

--cngx-copy-block-btn-radius#<length>
Default value 4px

Corner radius of the copy button. Defaults to --cngx-radius-sm.

--cngx-copy-block-btn-padding#*
Default value 4px 8px

Padding shorthand of the copy button.

Surface

--cngx-copy-block-btn-border#*
Default value currentColor

Border color of the idle copy button.

--cngx-copy-block-btn-bg#<color>
Default value transparent

Background of the idle copy button.

--cngx-copy-block-btn-color#*
Default value currentColor

Text color of the idle copy button.

Typography

--cngx-copy-block-btn-font-size#*
Default value 0.75rem

Font-size of the copy-button label. Falls back to --cngx-font-size-sm.

State / Copied

--cngx-copy-block-btn-copied-bg#<color>
Default value oklch(0.96 0.025 145)

Background of the copied-state button - soft success tint. inherits: true so the :root dark-mode override reaches the button inside the copy-block host.

See: [[--cngx-color-success]]

--cngx-copy-block-btn-copied-border#<color>
Default value oklch(0.5 0.12 145)

Border color of the copied-state button. Falls back to --cngx-color-success.

--cngx-copy-block-btn-copied-color#<color>
Default value oklch(0.5 0.12 145)

Text color of the copied-state button. Falls back to --cngx-color-success. inherits: true so the :root dark-mode override reaches the button.

Enter to selectArrow Down Arrow Up to navigateEsc to close