docs

Styling contract

The wrapper ships with a minimum button shell. Customize the surrounding layout, projected icons, and state treatments by targeting the rendered button’s stable attributes.

Wrapper slot hooks

.tng-copy-button__icon wraps the active copy or copied icon slot.
.tng-copy-button__label holds the visible button label.
.tng-copy-live-region is a visually hidden announcement node for assistive feedback.

Wrapper state attributes

Attribute	Values	Usage
`data-appearance`	`outline \| solid \| ghost`	Switches the default wrapper treatment.
`data-size`	`sm \| md`	Adjusts minimum height and padding.
`data-state`	`idle \| copying \| copied \| error`	Drives copied and error emphasis after a copy attempt.

Owner guidance

Target the rendered button inside tng-copy-button when you need custom stateful styling. Keep the live region hidden, and prefer wrapper-level containers for layout and spacing rather than overriding the component’s internal flex alignment.

tng-copy-button > .tng-copy-button[data-appearance="solid"] {
  background: var(--tng-semantic-accent-brand);
  color: var(--tng-color-white);
}

tng-copy-button > .tng-copy-button[data-state="copied"] {
  background: var(--tng-semantic-accent-success);
  border-color: transparent;
}

tng-copy-button > .tng-copy-button[data-state="error"] {
  background: var(--tng-semantic-accent-danger);
  border-color: transparent;
}