Skip to content
Buttons & Actions

ButtonClose

client41.75 kB
@stellaria/nebula-webButtonCloseProps

Preview

Props

8
PropTypeDefault

aria-label

string

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"

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

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

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