Design system · Component review 26

Demo copy button

Copy controls should state the value they copy and report whether the browser accepted the action. The adopted control keeps the native button and makes the action and status easier to scan.

Adopted direction: shared text copy controls now have a clear icon, refined button and readable result. The Guide palette remains unchanged.

Copy one color reference

Activate the current and candidate buttons with mouse or keyboard. A status line below each button reports the value or explains clipboard denial.

01

Original Guide

Clickable color swatch

60

Click the swatch to copy its color.

The Guide uses its original palette control to copy a fixed color value; it remains unchanged.

02

Previous

Earlier shared text button

The current control uses a native button and announces the actual clipboard result below it.

03

Adopted

Tool-like copy control

The same behavior gains an explicit copy icon, tighter type, a precise border and a more readable result line.

Actual Guide palette

The colors guide retains its original interactive grid and native color values.

Open /guide/colors
0
5
10
20
30
40
50
60
70
80
90
95
100
blue
0
5
10
20
30
40
50
60
70
80
90
95
100

The Design System palette can copy variable references; the Guide palette continues to copy literal palette values.