ButtonCopy
@stellaria/nebula-webButtonCopyPropsPreview
Props
13| Prop | Type | Default |
|---|---|---|
color The scale the variant draws from. Name the scale and let the variant pick the steps out of it; pinning a step here is what breaks the hover and active states, which are derived from it. | ColorExtended | "gray" |
copiedIcon The glyph while the copied state lasts. The button also swaps to the success scale for that window, so a glyph with a colour baked in will fight the confirmation instead of carrying it. | ReactNode | <Check /> |
copiedLabel The name it takes while copied. Swapping it is what announces the copy to a screen reader — nothing else about the change is spoken. | string | "Copied" |
copyIcon The glyph at rest. | ReactNode | <Clipboard /> |
copyLabel The button's accessible name at rest. There is no visible text, so this is the only name it has. It is English by default (ADR-120); translate it at the call site. | string | "Copy" |
disabled Blocks the press and drops the hover and press animation with it. No need to pair it with `loading`, which already disables on its own. | boolean | — |
glass Overrides the glass step the variant's recipe asks for. It is ignored in three cases that are not errors: a variant whose recipe has no glass, a theme with `effects.glass.enabled` off, and a `color` that is not one of the theme's scales — a hex or a role path never takes glass. | GlassLevel | — |
gradient Read only by `variant="gradient"`, where it replaces the theme's pair. `deg` is 135 if you do not say otherwise, and `animate` needs this override to exist at all — it does nothing over the theme's own gradient. | { from: ColorExtended; to: ColorExtended; deg?: number; animate?: boolean; } | — |
loading Lays a spinner over the button, marks it `aria-busy` and disables it. The icon dims in place rather than being swapped out, so the button holds its square while the work runs. | boolean | — |
size The button's square, in both axes at once. It is the tap target, so anything below `md` on a touch surface has to be given room by its container instead. | Size | — |
timeout How long the copied state lasts, in milliseconds. Pressing again restarts it rather than stacking, so a run of presses still leaves exactly one window open. | number | 1500 |
value requiredWhat goes to the clipboard, read at press time. It needs a secure context — over plain HTTP the clipboard API is not there, the copy fails and the button never reaches its copied state. | string | — |
variant The recipe the theme resolves background, border, glow and glass from, all at once. A row of icon buttons reads as one control strip only if they share it. | Variant | "light" |
Slot props
1Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
iconProps Wrapper for the icon. With `loading` it dims, which is how the button makes room for the spinner without changing size; the spinner itself has no slot, because it is the mechanism of the animation. | BoxSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.