Skip to content
Buttons & Actions

Button

client42.25 kB
@stellaria/nebula-webButtonProps

Preview

Props

13
PropTypeDefault

children

The label. It is wrapped in a `Text` that inherits, so it takes the button's own type instead of imposing paragraph type on it.

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"

component

The element it renders. With anything other than `button` — an `a` for a CTA that navigates, a router `Link` — React Aria adds the `role`, the `tabIndex` and the Space and Enter handling, so the keyboard contract does not degrade. The `type` is only written when the element is a button.

ElementType

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

fullWidth

Stretches the button to its container instead of hugging the label.

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; }

href

Only has an effect with `component`: these are the attributes of the element you chose.

string

leftSection

An adornment before the label. It is `aria-hidden`, so it can only ever repeat what the label already says — an icon that carries meaning of its own belongs in the label.

ReactNode

loading

Lays a spinner over the button, marks it `aria-busy` and disables it. Label and sections dim in place instead of being removed, so the button holds its width while the work runs.

booleanfalse

rightSection

The same after the label, and `aria-hidden` for the same reason.

ReactNode

size

The control's height and padding. The label does not carry its own type scale — it inherits the button's — so this is the one step that resizes the whole thing.

Size"md"

variant

The recipe the theme resolves background, border, glow and glass from, all at once. It is the variant and not `color` that decides how loudly the button reads, so a secondary action stays secondary whatever scale you tint it with.

Variant"filled"

Slot props

3

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

PropTypeDefault

labelProps

The label, which wraps `children`. With `loading` it dims alongside the sections, which is how the button makes room for the spinner without changing size.

TextSlotProps

leftSectionProps

Envoltorio de `leftSection`.

BoxSlotProps

rightSectionProps

Envoltorio de `rightSection`.

BoxSlotProps

Also accepts

On top of its own props, this component forwards these groups.

HTML attributes · 275Permissions · 2Press handlers · 6Style props · 127