Button

Buttons allow users to perform an action.

text
```
string
```
The text to display in the button.
value
```
string
```
about
```
string
```
accept
```
string
```
acceptCharset
```
string
```
accessKey
```
string
```

action

string | ((formData: FormData) => void | Promise<void>)

allowFullScreen
```
boolean
```
allowTransparency
```
boolean
```
alt
```
string
```
aria-activedescendant
```
string
```
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic
```
Booleanish
```
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete
```
"both" | "inline" | "list" | "none"
```
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-braillelabel
```
string
```
Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.
aria-brailleroledescription
```
string
```
Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.
aria-busy
```
Booleanish
```
aria-checked
```
boolean | "true" | "false" | "mixed"
```
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
aria-colcount
```
number
```
Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
aria-colindex
```
number
```
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
aria-colindextext
```
string
```
Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.
aria-colspan
```
number
```
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
aria-controls
```
string
```
Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
aria-current
```
boolean | "step" | "true" | "false" | "page" | "location" | "date" | "time"
```
Indicates the element that represents the current item within a container or set of related elements.
aria-describedby
```
string
```
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-description
```
string
```
Defines a string value that describes or annotates the current element. @see related aria-describedby.
aria-details
```
string
```
Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
aria-disabled
```
Booleanish
```
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
aria-dropeffect
```
"copy" | "execute" | "link" | "move" | "none" | "popup"
```
Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
aria-errormessage
```
string
```
Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
aria-expanded
```
Booleanish
```
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto
```
string
```
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed
```
Booleanish
```
Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
aria-haspopup
```
boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false"
```
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden
```
Booleanish
```
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-invalid
```
boolean | "true" | "false" | "grammar" | "spelling"
```
Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
aria-keyshortcuts
```
string
```
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label
```
string
```
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
```
string
```
Identifies the element (or elements) that labels the current element. @see aria-describedby.
aria-level
```
number
```
Defines the hierarchical level of an element within a structure.
aria-live
```
"assertive" | "off" | "polite"
```
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal
```
Booleanish
```
Indicates whether an element is modal when displayed.
aria-multiline
```
Booleanish
```
Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable
```
Booleanish
```
Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation
```
"horizontal" | "vertical"
```
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns
```
string
```
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
aria-placeholder
```
string
```
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset
```
number
```
Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
aria-pressed
```
boolean | "true" | "false" | "mixed"
```
Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
aria-readonly
```
Booleanish
```
Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.

aria-relevant

"additions removals" | "additions text" | "additions" | "all" | "removals additions" | "removals text" | "removals" | "text additions" | "text removals" | "text"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.

aria-required
```
Booleanish
```
Indicates that user input is required on the element before a form may be submitted.
aria-roledescription
```
string
```
Defines a human-readable, author-localized description for the role of an element.
aria-rowcount
```
number
```
Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
aria-rowindex
```
number
```
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
aria-rowindextext
```
string
```
Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.
aria-rowspan
```
number
```
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
aria-selected
```
Booleanish
```
Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
aria-setsize
```
number
```
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
aria-sort
```
"ascending" | "descending" | "none" | "other"
```
Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax
```
number
```
Defines the maximum allowed value for a range widget.
aria-valuemin
```
number
```
Defines the minimum allowed value for a range widget.
aria-valuenow
```
number
```
Defines the current value for a range widget. @see aria-valuetext.
aria-valuetext
```
string
```
Defines the human readable text alternative of aria-valuenow for a range widget.
as
```
string
```
async
```
boolean
```

autoCapitalize

"none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters"

autoComplete
```
string
```
autoCorrect
```
string
```
autoFocus
```
boolean
```
autoPlay
```
boolean
```
autoSave
```
string
```
capture
```
boolean | "user" | "environment"
```
cellPadding
```
string | number
```
cellSpacing
```
string | number
```
challenge
```
string
```
charSet
```
string
```
checked
```
boolean
```
cite
```
string
```
classID
```
string
```
className
```
string
```
className for the element
color
```
string
```
cols
```
number
```
colSpan
```
number
```
component
```
"a" | "button"
```
The HTML element element used to render the button
content
```
string
```

contentEditable

Booleanish | "inherit" | "plaintext-only"

contextMenu
```
string
```
controls
```
boolean
```
coords
```
string
```
crossOrigin
```
"" | "anonymous" | "use-credentials"
```
dangerouslySetInnerHTML
```
{ __html: string | TrustedHTML; }
```
data
```
string
```
datatype
```
string
```
dateTime
```
string
```
default
```
boolean
```
defaultChecked
```
boolean
```
defaultValue
```
string | number | readonly string[]
```
defer
```
boolean
```
dir
```
string
```
disabled
```
boolean
```
download
```
any
```
draggable
```
Booleanish
```
encType
```
string
```

enterKeyHint

"done" | "enter" | "go" | "next" | "previous" | "search" | "send"

exportparts
```
string
```
@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}
fit
```
"content" | "parent"
```
Specifies the width of the element
Default: content
form
```
string
```

formAction

string | ((formData: FormData) => void | Promise<void>)

formEncType
```
string
```
formMethod
```
string
```
formNoValidate
```
boolean
```
formTarget
```
string
```
frameBorder
```
string | number
```
hasNegativeMargins
```
boolean
```
Whether the button should have negative margins. Has effect only on ghost variant
Default: false
hasNoHorizontalPadding
```
boolean
```
Whether the button should have no horizontal padding. Has effect only on tertiary variant
Default: false
headers
```
string
```
height
```
string | number
```
hidden
```
boolean
```
high
```
number
```
href
```
string
```
A URL to link to
hrefLang
```
string
```
htmlFor
```
string
```
httpEquiv
```
string
```

iconName

"adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-path" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | "arrow-uturn-left-down" | "arrow-uturn-right-top" | ... 140 more ...

The icon to display in the button

iconPosition
```
"left" | "right"
```
Specifies where the icon is positioned
Default: left
id
```
string
```
inert
```
boolean
```
@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
inlist
```
any
```
inputMode
```
"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"
```
Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}
integrity
```
string
```
is
```
string
```
Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}
isDisabled
```
boolean
```
Whether the button should be disabled
Default: false
isDropdown
```
boolean
```
Whether the button is being used as a dropdown button. It adds the chevron-down icon.
Default: false
isLoading
```
boolean
```
Whether the button should be is loading state
Default: false
itemID
```
string
```
itemProp
```
string
```
itemRef
```
string
```
itemScope
```
boolean
```
itemType
```
string
```
key
```
Key
```
keyParams
```
string
```
keyType
```
string
```
kind
```
string
```
label
```
string
```
lang
```
string
```
list
```
string
```
loop
```
boolean
```
low
```
number
```
manifest
```
string
```
marginHeight
```
number
```
marginWidth
```
number
```
max
```
string | number
```
maxLength
```
number
```
media
```
string
```
mediaGroup
```
string
```
method
```
string
```
min
```
string | number
```
minLength
```
number
```
multiple
```
boolean
```
muted
```
boolean
```
name
```
string
```
nonce
```
string
```
noValidate
```
boolean
```

onAbort

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onAbortCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onAnimationEnd

AnimationEventHandler<HTMLButtonElement> | AnimationEventHandler<HTMLAnchorElement>

onAnimationEndCapture

AnimationEventHandler<HTMLButtonElement> | AnimationEventHandler<HTMLAnchorElement>

onAnimationIteration

AnimationEventHandler<HTMLButtonElement> | AnimationEventHandler<HTMLAnchorElement>

onAnimationIterationCapture

AnimationEventHandler<HTMLButtonElement> | AnimationEventHandler<HTMLAnchorElement>

onAnimationStart

AnimationEventHandler<HTMLButtonElement> | AnimationEventHandler<HTMLAnchorElement>

onAnimationStartCapture

AnimationEventHandler<HTMLButtonElement> | AnimationEventHandler<HTMLAnchorElement>

onAuxClick

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onAuxClickCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onBeforeInput

InputEventHandler<HTMLButtonElement> | InputEventHandler<HTMLAnchorElement>

onBeforeInputCapture

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onBeforeToggle

ToggleEventHandler<HTMLButtonElement> | ToggleEventHandler<HTMLAnchorElement>

onBlur

FocusEventHandler<HTMLButtonElement> | FocusEventHandler<HTMLAnchorElement>

onBlurCapture

FocusEventHandler<HTMLButtonElement> | FocusEventHandler<HTMLAnchorElement>

onCanPlay

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onCanPlayCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onCanPlayThrough

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onCanPlayThroughCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onChange

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onChangeCapture

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onClick

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onClickCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onCompositionEnd

CompositionEventHandler<HTMLButtonElement> | CompositionEventHandler<HTMLAnchorElement>

onCompositionEndCapture

CompositionEventHandler<HTMLButtonElement> | CompositionEventHandler<HTMLAnchorElement>

onCompositionStart

CompositionEventHandler<HTMLButtonElement> | CompositionEventHandler<HTMLAnchorElement>

onCompositionStartCapture

CompositionEventHandler<HTMLButtonElement> | CompositionEventHandler<HTMLAnchorElement>

onCompositionUpdate

CompositionEventHandler<HTMLButtonElement> | CompositionEventHandler<HTMLAnchorElement>

onCompositionUpdateCapture

CompositionEventHandler<HTMLButtonElement> | CompositionEventHandler<HTMLAnchorElement>

onContextMenu

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onContextMenuCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onCopy

ClipboardEventHandler<HTMLButtonElement> | ClipboardEventHandler<HTMLAnchorElement>

onCopyCapture

ClipboardEventHandler<HTMLButtonElement> | ClipboardEventHandler<HTMLAnchorElement>

onCut

ClipboardEventHandler<HTMLButtonElement> | ClipboardEventHandler<HTMLAnchorElement>

onCutCapture

ClipboardEventHandler<HTMLButtonElement> | ClipboardEventHandler<HTMLAnchorElement>

onDoubleClick

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onDoubleClickCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onDrag

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragEnd

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragEndCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragEnter

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragEnterCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragExit

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragExitCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragLeave

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragLeaveCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragOver

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragOverCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragStart

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDragStartCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDrop

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDropCapture

DragEventHandler<HTMLButtonElement> | DragEventHandler<HTMLAnchorElement>

onDurationChange

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onDurationChangeCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onEmptied

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onEmptiedCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onEncrypted

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onEncryptedCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onEnded

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onEndedCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onError

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onErrorCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onFocus

FocusEventHandler<HTMLButtonElement> | FocusEventHandler<HTMLAnchorElement>

onFocusCapture

FocusEventHandler<HTMLButtonElement> | FocusEventHandler<HTMLAnchorElement>

onGotPointerCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onGotPointerCaptureCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onInput

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onInputCapture

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onInvalid

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onInvalidCapture

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onKeyDown

KeyboardEventHandler<HTMLButtonElement> | KeyboardEventHandler<HTMLAnchorElement>

onKeyDownCapture

KeyboardEventHandler<HTMLButtonElement> | KeyboardEventHandler<HTMLAnchorElement>

onKeyPress

KeyboardEventHandler<HTMLButtonElement> | KeyboardEventHandler<HTMLAnchorElement>

@deprecated Use `onKeyUp` or `onKeyDown` instead

onKeyPressCapture

KeyboardEventHandler<HTMLButtonElement> | KeyboardEventHandler<HTMLAnchorElement>

@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead

onKeyUp

KeyboardEventHandler<HTMLButtonElement> | KeyboardEventHandler<HTMLAnchorElement>

onKeyUpCapture

KeyboardEventHandler<HTMLButtonElement> | KeyboardEventHandler<HTMLAnchorElement>

onLoad

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadedData

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadedDataCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadedMetadata

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadedMetadataCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadStart

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLoadStartCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onLostPointerCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onLostPointerCaptureCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onMouseDown

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseDownCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseEnter

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseLeave

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseMove

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseMoveCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseOut

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseOutCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseOver

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseOverCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseUp

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onMouseUpCapture

MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>

onPaste

ClipboardEventHandler<HTMLButtonElement> | ClipboardEventHandler<HTMLAnchorElement>

onPasteCapture

ClipboardEventHandler<HTMLButtonElement> | ClipboardEventHandler<HTMLAnchorElement>

onPause

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onPauseCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onPlay

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onPlayCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onPlaying

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onPlayingCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onPointerCancel

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerCancelCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerDown

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerDownCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerEnter

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerLeave

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerMove

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerMoveCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerOut

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerOutCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerOver

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerOverCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerUp

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onPointerUpCapture

PointerEventHandler<HTMLButtonElement> | PointerEventHandler<HTMLAnchorElement>

onProgress

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onProgressCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onRateChange

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onRateChangeCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onReset

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onResetCapture

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onScroll

UIEventHandler<HTMLButtonElement> | UIEventHandler<HTMLAnchorElement>

onScrollCapture

UIEventHandler<HTMLButtonElement> | UIEventHandler<HTMLAnchorElement>

onScrollEnd

UIEventHandler<HTMLButtonElement> | UIEventHandler<HTMLAnchorElement>

onScrollEndCapture

UIEventHandler<HTMLButtonElement> | UIEventHandler<HTMLAnchorElement>

onSeeked

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSeekedCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSeeking

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSeekingCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSelect

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSelectCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onStalled

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onStalledCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSubmit

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onSubmitCapture

FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>

onSuspend

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onSuspendCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onTimeUpdate

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onTimeUpdateCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onToggle

ToggleEventHandler<HTMLButtonElement> | ToggleEventHandler<HTMLAnchorElement>

onTouchCancel

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchCancelCapture

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchEnd

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchEndCapture

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchMove

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchMoveCapture

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchStart

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTouchStartCapture

TouchEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLAnchorElement>

onTransitionCancel

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionCancelCapture

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionEnd

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionEndCapture

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionRun

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionRunCapture

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionStart

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onTransitionStartCapture

TransitionEventHandler<HTMLButtonElement> | TransitionEventHandler<HTMLAnchorElement>

onVolumeChange

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onVolumeChangeCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onWaiting

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onWaitingCapture

ReactEventHandler<HTMLButtonElement> | ReactEventHandler<HTMLAnchorElement>

onWheel

WheelEventHandler<HTMLButtonElement> | WheelEventHandler<HTMLAnchorElement>

onWheelCapture

WheelEventHandler<HTMLButtonElement> | WheelEventHandler<HTMLAnchorElement>

open
```
boolean
```
optimum
```
number
```
part
```
string
```
@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}
pattern
```
string
```
placeholder
```
string
```
playsInline
```
boolean
```
popover
```
"" | "auto" | "manual"
```
popoverTarget
```
string
```
popoverTargetAction
```
"hide" | "show" | "toggle"
```
poster
```
string
```
prefix
```
string
```
preload
```
string
```
property
```
string
```
radioGroup
```
string
```
readOnly
```
boolean
```
ref
```
Ref<HTMLButtonElement>
```
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
rel
```
string
```
required
```
boolean
```
resource
```
string
```
results
```
number
```
rev
```
string
```
reversed
```
boolean
```
role
```
AriaRole
```
rows
```
number
```
rowSpan
```
number
```
sandbox
```
string
```
scope
```
string
```
scoped
```
boolean
```
scrolling
```
string
```
seamless
```
boolean
```
security
```
string
```
selected
```
boolean
```
shape
```
string
```
size
```
number
```
sizes
```
string
```
slot
```
string
```
span
```
number
```
spellCheck
```
Booleanish
```
src
```
string
```
srcDoc
```
string
```
srcLang
```
string
```
srcSet
```
string
```
start
```
number
```
step
```
string | number
```
style
```
CSSProperties
```
summary
```
string
```
suppressContentEditableWarning
```
boolean
```
suppressHydrationWarning
```
boolean
```
tabIndex
```
number
```
target
```
string
```
title
```
string
```
translate
```
"no" | "yes"
```
type
```
string
```
typeof
```
string
```
unselectable
```
"off" | "on"
```
useMap
```
string
```

variant

"primaryAlert" | "primaryBrand" | "primaryInfo" | "primarySuccess" | "primaryWarning" | "secondaryAlert" | "secondaryBrand" | "secondaryInfo" | "secondaryNeutral" | "secondarySuccess" | "secondaryWarning" | "tertiaryAlert" | "tertiaryBrand" | "tertiaryComplementary" | "tertiaryInfo" | "tertiaryNeutral" | ... 2 more ...

The visual style of the button

Default: primaryBrand

vocab
```
string
```
width
```
string | number
```
wmode
```
string
```
wrap
```
string
```