Actions
A pressable element with variants, colors, sizes, loading state, and ripple feedback.
17 props across 5 groups
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Button label/content. |
startContent | ReactNode | — | Content rendered before the label. |
endContent | ReactNode | — | Content rendered after the label. |
spinner | ReactNode | built-in spinner | Overrides the default loading spinner. |
spinnerPlacement | "start" | "end" | start | Where the loading spinner renders relative to the label. |
children
ReactNode
Default: —
Button label/content.
startContent
ReactNode
Default: —
Content rendered before the label.
endContent
ReactNode
Default: —
Content rendered after the label.
spinner
ReactNode
Default: built-in spinner
Overrides the default loading spinner.
spinnerPlacement
"start" | "end"
Default: start
Where the loading spinner renders relative to the label.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "soft" | "bordered" | "ghost" | "link" | solid | Visual style variant. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | default | Semantic color. |
colorDepth | 50 | 100 | ... | 950 | 500 | Shade depth for the selected color. |
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | md | Button size. |
radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | md | Border radius. |
shadow | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | none | Box-shadow depth. |
variant
"solid" | "soft" | "bordered" | "ghost" | "link"
Default: solid
Visual style variant.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: default
Semantic color.
colorDepth
50 | 100 | ... | 950
Default: 500
Shade depth for the selected color.
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: md
Button size.
radius
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Default: md
Border radius.
shadow
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"
Default: none
Box-shadow depth.
| Prop | Type | Default | Description |
|---|---|---|---|
fullWidth | boolean | false | Expands to fill available horizontal space. |
isIconOnly | boolean | false | Renders a square icon button. Requires aria-label. |
fullWidth
boolean
Default: false
Expands to fill available horizontal space.
isIconOnly
boolean
Default: false
Renders a square icon button. Requires aria-label.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | href ? "a" : "button" | Render as a different element or component. |
href | string | — | Renders as an anchor when set. |
target | string | — | Anchor target. |
rel | string | "noopener noreferrer" when target="_blank" | Anchor rel attribute. |
download | string | boolean | — | Anchor download attribute. |
tooltip | ReactNode | boolean | (Omit<TooltipProps, "children"|"content"> & { content?: ReactNode }) | — | Wraps the button in the built-in Tooltip component when set. A plain value is shorthand content; bare true derives content from aria-label; an object accepts any Tooltip prop plus an optional content override. Omitted entirely by default. |
isDisabled | boolean | false | Disables the button; sets aria-disabled + tabIndex=-1 when rendered as an anchor. |
isLoading | boolean | false | Shows a spinner and sets aria-busy; stays focusable by design. |
as
ElementType
Default: href ? "a" : "button"
Render as a different element or component.
href
string
Default: —
Renders as an anchor when set.
target
string
Default: —
Anchor target.
rel
string
Default: "noopener noreferrer" when target="_blank"
Anchor rel attribute.
download
string | boolean
Default: —
Anchor download attribute.
tooltip
ReactNode | boolean | (Omit<TooltipProps, "children"|"content"> & { content?: ReactNode })
Default: —
Wraps the button in the built-in Tooltip component when set. A plain value is shorthand content; bare true derives content from aria-label; an object accepts any Tooltip prop plus an optional content override. Omitted entirely by default.
isDisabled
boolean
Default: false
Disables the button; sets aria-disabled + tabIndex=-1 when rendered as an anchor.
isLoading
boolean
Default: false
Shows a spinner and sets aria-busy; stays focusable by design.
| Prop | Type | Default | Description |
|---|---|---|---|
disableRipple | boolean | false | Disables the click ripple effect. |
disableAnimation | boolean | false | Disables all transitions/animations, including the ripple. |
disableRipple
boolean
Default: false
Disables the click ripple effect.
disableAnimation
boolean
Default: false
Disables all transitions/animations, including the ripple.
| Prop | Type | Default | Description |
|---|---|---|---|
onPress / onPressStart / onPressEnd / onPressUp / onPressChange | (e) => void | — | Press-style callbacks alongside native onClick. |
onPress / onPressStart / onPressEnd / onPressUp / onPressChange
(e) => void
Default: —
Press-style callbacks alongside native onClick.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Class applied to the root element. |
style | CSSProperties | — | Inline styles for the root element. |
className
string
Default: —
Class applied to the root element.
style
CSSProperties
Default: —
Inline styles for the root element.
