Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    Button

    Buttons allow users to perform an action.

    View source code
    • Usage
    • Props
    • Accessibility
    • 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 | "true" | "false" | "page" | "step" | "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 | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

      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
      "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {})

    • 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-merge" | "arrow-path" | "arrow-pointing-out" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | ... 143 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" | "hint" | "manual"

    • popoverTarget
      string

    • popoverTargetAction
      "hide" | "show" | "toggle"

    • poster
      string

    • prefix
      string

    • preload
      string

    • property
      string

    • radioGroup
      string

    • readOnly
      boolean

    • ref
      Ref<HTMLButtonElement> | (Ref<HTMLButtonElement> & Ref<HTMLAnchorElement>)

      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