Skip to content
Buttons & Actions

ButtonCopy

client42 kB
@stellaria/nebula-webButtonCopyProps

Preview

Props

13
PropTypeDefault

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.

number1500

value

required

What 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

1

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

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.

HTML attributes · 273Permissions · 2Press handlers · 5Style props · 127