Skip to content
Buttons & Actions

ActionIcon

client41.5 kB
@stellaria/nebula-webActionIconProps

Preview

Props

8
PropTypeDefault

children

The glyph, and the whole of the button's content. It is `aria-hidden`, so the control has no accessible name until you give it one — an `aria-label` here is not optional.

ReactNode

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"primary"

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.

booleanfalse

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"veil"

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.

booleanfalse

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"md"

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"filled"

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 · 275Permissions · 2Press handlers · 6Style props · 127