Button
@stellaria/nebula-webButtonPropsPreview
Props
13| Prop | Type | Default |
|---|---|---|
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. | boolean | false |
fullWidth Stretches the button to its container instead of hugging the label. | boolean | false |
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. | boolean | false |
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
3Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
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.