idleLabel | LocalizedMessage | — | Label at rest. |
onAction | () => unknown | — | Runs on click while the button is idle or showing success. The button is pending until the returned promise
settles: a resolved promise shows the success state, a rejected one (or a synchronous throw) returns to idle and
calls {@link ActionButtonOwnProps.onActionError}. A synchronous return counts as resolved.
@returns A promise to wait for, or nothing |
pendingLabel | LocalizedMessage | — | Label while onAction is pending. Announced to assistive technology when it appears. |
successLabel | LocalizedMessage | — | Label while the success state shows. Announced to assistive technology when it appears. |
active | boolean | — | Non-toggle pressed or transient current marker; hosts write the pressed state key through stateAttributes (data-pressed).
A toggle host (Button toggle variant) uses aria-pressed and styles with [aria-pressed="true"] without also writing data-pressed for that toggle state (ADR 0001 rule 1).
Link "current" within a set uses aria-current, not active. |
aria-controls | string | — | Id of the element controlled by this control. |
aria-current | boolean | "time" | "false" | "true" | "page" | "step" | "location" | "date" | — | Whether this item is current within a set. |
aria-describedby | string | — | Id of the element that describes this control. |
aria-description | LocalizedMessage | — | Accessible description when it cannot be referenced by id. |
aria-expanded | boolean | — | Whether the controlled region is expanded. |
aria-haspopup | boolean | "dialog" | "menu" | "false" | "true" | "listbox" | "tree" | "grid" | — | Type of popup triggered by this control, if any. |
aria-label | LocalizedMessage | — | Accessible name when the visible label is insufficient. |
aria-labelledby | string | — | Id of the element that names this control. |
disabled | boolean | — | Inert state per host: native disabled on a button; on Link, ADR 0006 link host (no href, aria-disabled="true", tabIndex={0}).
Never tabIndex={-1}. |
fullSpan | boolean | false | When true, the control fills the available inline size of its parent (inline-size: 100%). Only the inline axis fills; block size stays at the control token in every host. |
id | string | — | Element id for ARIA relationships. |
intent | ButtonIntent | — | Visual intent. Defaults to {@link ButtonIntent.Neutral}. |
leading | ReactNode | — | Content before the label. |
marquee | boolean | false | With truncate, fades a clipped label out at its end and slides it into view while the pointer is over the button
or keyboard focus is on it, so the whole name can be read. It is the same label as a Sidebar item's, and it shows
its full text in its own tooltip. There is no fade or slide when the label fits, and no slide when motion is
reduced or off. A tooltip set on the button replaces the label's tooltip. |
onActionError | ((error: unknown) => void) | — | Called with whatever onAction rejected or threw. The button has already returned to idle. The button shows no
error state of its own, so report the failure here (a toast, a field error).
@param error - The rejection reason |
preventFocusOnPress | boolean | false | When true, mousedown does not move focus to the button (field adornments). |
ref | Ref<HTMLButtonElement> | — | Ref to the rendered button. |
shape | ButtonShape | — | Corner shape. Defaults to {@link ButtonShape.Control}. |
size | ButtonSize | — | Control size. Defaults to {@link ButtonSize.Large}. |
softFill | ButtonSoftFill | ButtonSoftFill.Outline | Fill for {@link ButtonVariant.Soft}. {@link ButtonSoftFill.Outline} is the default secondary (Neutral, bordered,
transparent). {@link ButtonSoftFill.Filled} keeps the tinted Neutral Soft fill for segmented selections and other
cases that need a filled surface. |
tooltip | LocalizedMessage | DisplayValue | — | Short text shown in a Tooltip while the pointer hovers the button or a navigation key focuses it. Button
composes Tooltip's trigger, content and root, so it behaves like Tooltip > TooltipTrigger > Button and also works
while disabled (pointer only) and on toggle buttons. A labelled button points aria-describedby at the tooltip.
An icon-only button does not: label already names it, so the tooltip is visual only and never read twice.
Adding or removing the prop after mount remounts the button. |
truncate | boolean | false | When true, a label wider than the button's available inline size is cut with an ellipsis instead of widening or
wrapping the button. The leading and trailing content keep their size; only the label gives up room. Pair it with a
parent or a width that limits the button, because a button with nothing to limit it never overflows. |
type | "button" | "submit" | "reset" | — | Native button type. Defaults to button. |
variant | ButtonVariant | — | Surface variant. Defaults to {@link ButtonVariant.Soft}. |