Skip to content
Buttons & Actions

ActionIcon

client42 kB
@stellaria/nebula-webActionIconProps

Preview

Props

10
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

—

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

pressed

Makes the button a toggle and says whether it is on (ADR-194). It announces `aria-pressed`, and while on it swaps the recipe for `pressedVariant`: the state reads in the FILL, not in the stroke colour — a tinted glyph over glass says "brand", a filled square says "already saved". Leave it out for a button that only fires.

boolean

—

pressedVariant

The recipe drawn while `pressed`. Only read with `pressed` defined.

Variant"filled"

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

—

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