Action@axonyx/react
Button
Buttons trigger actions, submit forms, open dialogs, and move users through product workflows. Axonyx buttons support emphasis, forged surfaces, and reinforced borders without leaving the shared CSS contract.
Server-safe
Button is exported from
@axonyx/react and can be used in Next.js Server Components.Overview
Semantic by default
Renders a native button and accepts regular React button props.
Design-system contract
Props map to data-variant, data-surface, and data-border.
Color
Sizes
Loading
Badge
File upload
Surfaces
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "ghost" | "accent" | "outline" | "default" | Controls visual emphasis. |
| surface | "default" | "forged" | "brushed" | "inset" | "default" | Applies Foundry surface treatment. |
| border | "forged" | undefined | Applies reinforced/riveted border styling. |
| size | "sm" | "md" | "lg" | "md" | Controls button sizing for compact or prominent actions. |
| loading | boolean | false | Shows a built-in spinner and disables interaction while busy. |
| startIcon | ReactNode | undefined | Renders a leading icon with built-in spacing. |
| endIcon | ReactNode | undefined | Renders a trailing icon with built-in spacing. |
| disabled | boolean | false | Uses native disabled button behavior. |
API
See the full API reference for imports, props, CSS contracts, and Foundry data attributes.
- ButtonNative button primitive with variant, surface, border, and standard button props.
- LinkButtonAnchor-shaped action primitive that follows the Button visual contract.
- IconButtonCompact icon action for toolbars, nav controls, and command surfaces with size and loading support.
- Button familySee all visual combinations for color, size, loading, badge, and upload patterns.