BRAID
 

ButtonLink

Renders a semantic link that looks like a Button.
This component renders a native `a` element by default, but this can be customised via the `linkComponent` prop on BraidProvider.
Extends both the Button and Link component APIs.
If you want a button that looks like a TextLink, check out TextLinkButton.

Default Button Link

Open in Playroom

Strong Button Link

Open in Playroom

Weak Button Link

Open in Playroom

Loading Button Link

Open in Playroom

Required props

href
string

Optional props

children
ReactNode
weight
"regular" | "strong" | "weak"
loading
boolean
color
string
type
string
id
string
aria-describedby
string
download
any
hrefLang
string
media
string
placeholder
string
rel
string
target
string
defaultChecked
boolean
defaultValue
string | number | readonly string[]
suppressContentEditableWarning
boolean
suppressHydrationWarning
boolean
accessKey
string
contentEditable
false | true | "inherit" | "true" | "false"
contextMenu
string
dir
string
draggable
false | true | "true" | "false"
hidden
boolean
lang
string
slot
string
spellCheck
false | true | "true" | "false"
tabIndex
number
title
string
translate
"yes" | "no"
radioGroup
string
role
string
about
string
datatype
string
inlist
any
prefix
string
property
string
resource
string
typeof
string
vocab
string
autoCapitalize
string
autoCorrect
string
autoSave
string
itemProp
string
itemScope
boolean
itemType
string
itemID
string
itemRef
string
results
number
security
string
unselectable
"on" | "off"
inputMode
"text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
is
string
aria-activedescendant
string
aria-atomic
false | true | "true" | "false"
aria-autocomplete
"list" | "none" | "inline" | "both"
aria-busy
false | true | "true" | "false"
aria-checked
false | true | "true" | "false" | "mixed"
aria-colcount
number
aria-colindex
number
aria-colspan
number
aria-controls
string
aria-current
false | true | "step" | "time" | "true" | "false" | "page" | "location" | "date"
aria-details
string
aria-disabled
false | true | "true" | "false"
aria-dropeffect
"link" | "none" | "copy" | "move" | "execute" | "popup"
aria-errormessage
string
aria-expanded
false | true | "true" | "false"
aria-flowto
string
aria-grabbed
false | true | "true" | "false"
aria-haspopup
false | true | "grid" | "dialog" | "menu" | "listbox" | "true" | "false" | "tree"
aria-hidden
false | true | "true" | "false"
aria-invalid
false | true | "true" | "false" | "grammar" | "spelling"
aria-keyshortcuts
string
aria-label
string
aria-labelledby
string
aria-level
number
aria-live
"off" | "assertive" | "polite"
aria-modal
false | true | "true" | "false"
aria-multiline
false | true | "true" | "false"
aria-multiselectable
false | true | "true" | "false"
aria-orientation
"horizontal" | "vertical"
aria-owns
string
aria-placeholder
string
aria-posinset
number
aria-pressed
false | true | "true" | "false" | "mixed"
aria-readonly
false | true | "true" | "false"
aria-relevant
"text" | "all" | "additions" | "additions text" | "removals"
aria-required
false | true | "true" | "false"
aria-roledescription
string
aria-rowcount
number
aria-rowindex
number
aria-rowspan
number
aria-selected
false | true | "true" | "false"
aria-setsize
number
aria-sort
"none" | "ascending" | "descending" | "other"
aria-valuemax
number
aria-valuemin
number
aria-valuenow
number
aria-valuetext
string
dangerouslySetInnerHTML
{ __html: string; }
onCopy
(event: ClipboardEvent<HTMLAnchorElement>) => void
onCopyCapture
(event: ClipboardEvent<HTMLAnchorElement>) => void
onCut
(event: ClipboardEvent<HTMLAnchorElement>) => void
onCutCapture
(event: ClipboardEvent<HTMLAnchorElement>) => void
onPaste
(event: ClipboardEvent<HTMLAnchorElement>) => void
onPasteCapture
(event: ClipboardEvent<HTMLAnchorElement>) => void
onCompositionEnd
(event: CompositionEvent<HTMLAnchorElement>) => void
onCompositionEndCapture
(event: CompositionEvent<HTMLAnchorElement>) => void
onCompositionStart
(event: CompositionEvent<HTMLAnchorElement>) => void
onCompositionStartCapture
(event: CompositionEvent<HTMLAnchorElement>) => void
onCompositionUpdate
(event: CompositionEvent<HTMLAnchorElement>) => void
onCompositionUpdateCapture
(event: CompositionEvent<HTMLAnchorElement>) => void
onFocus
(event: FocusEvent<HTMLAnchorElement>) => void
onFocusCapture
(event: FocusEvent<HTMLAnchorElement>) => void
onBlur
(event: FocusEvent<HTMLAnchorElement>) => void
onBlurCapture
(event: FocusEvent<HTMLAnchorElement>) => void
onChange
(event: FormEvent<HTMLAnchorElement>) => void
onChangeCapture
(event: FormEvent<HTMLAnchorElement>) => void
onBeforeInput
(event: FormEvent<HTMLAnchorElement>) => void
onBeforeInputCapture
(event: FormEvent<HTMLAnchorElement>) => void
onInput
(event: FormEvent<HTMLAnchorElement>) => void
onInputCapture
(event: FormEvent<HTMLAnchorElement>) => void
onReset
(event: FormEvent<HTMLAnchorElement>) => void
onResetCapture
(event: FormEvent<HTMLAnchorElement>) => void
onSubmit
(event: FormEvent<HTMLAnchorElement>) => void
onSubmitCapture
(event: FormEvent<HTMLAnchorElement>) => void
onInvalid
(event: FormEvent<HTMLAnchorElement>) => void
onInvalidCapture
(event: FormEvent<HTMLAnchorElement>) => void
onLoad
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onError
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onErrorCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onKeyDown
(event: KeyboardEvent<HTMLAnchorElement>) => void
onKeyDownCapture
(event: KeyboardEvent<HTMLAnchorElement>) => void
onKeyPress
(event: KeyboardEvent<HTMLAnchorElement>) => void
onKeyPressCapture
(event: KeyboardEvent<HTMLAnchorElement>) => void
onKeyUp
(event: KeyboardEvent<HTMLAnchorElement>) => void
onKeyUpCapture
(event: KeyboardEvent<HTMLAnchorElement>) => void
onAbort
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onAbortCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onCanPlay
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onCanPlayCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onCanPlayThrough
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onCanPlayThroughCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onDurationChange
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onDurationChangeCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onEmptied
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onEmptiedCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onEncrypted
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onEncryptedCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onEnded
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onEndedCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadedData
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadedDataCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadedMetadata
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadedMetadataCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadStart
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onLoadStartCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onPause
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onPauseCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onPlay
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onPlayCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onPlaying
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onPlayingCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onProgress
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onProgressCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onRateChange
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onRateChangeCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSeeked
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSeekedCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSeeking
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSeekingCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onStalled
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onStalledCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSuspend
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSuspendCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onTimeUpdate
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onTimeUpdateCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onVolumeChange
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onVolumeChangeCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onWaiting
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onWaitingCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onAuxClick
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onAuxClickCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onClick
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onClickCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onContextMenu
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onContextMenuCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onDoubleClick
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onDoubleClickCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onDrag
(event: DragEvent<HTMLAnchorElement>) => void
onDragCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDragEnd
(event: DragEvent<HTMLAnchorElement>) => void
onDragEndCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDragEnter
(event: DragEvent<HTMLAnchorElement>) => void
onDragEnterCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDragExit
(event: DragEvent<HTMLAnchorElement>) => void
onDragExitCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDragLeave
(event: DragEvent<HTMLAnchorElement>) => void
onDragLeaveCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDragOver
(event: DragEvent<HTMLAnchorElement>) => void
onDragOverCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDragStart
(event: DragEvent<HTMLAnchorElement>) => void
onDragStartCapture
(event: DragEvent<HTMLAnchorElement>) => void
onDrop
(event: DragEvent<HTMLAnchorElement>) => void
onDropCapture
(event: DragEvent<HTMLAnchorElement>) => void
onMouseDown
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseDownCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseEnter
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseLeave
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseMove
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseMoveCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseOut
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseOutCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseOver
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseOverCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseUp
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onMouseUpCapture
(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
onSelect
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onSelectCapture
(event: SyntheticEvent<HTMLAnchorElement, Event>) => void
onTouchCancel
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchCancelCapture
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchEnd
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchEndCapture
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchMove
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchMoveCapture
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchStart
(event: TouchEvent<HTMLAnchorElement>) => void
onTouchStartCapture
(event: TouchEvent<HTMLAnchorElement>) => void
onPointerDown
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerDownCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerMove
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerMoveCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerUp
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerUpCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerCancel
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerCancelCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerEnter
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerEnterCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerLeave
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerLeaveCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerOver
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerOverCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerOut
(event: PointerEvent<HTMLAnchorElement>) => void
onPointerOutCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onGotPointerCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onGotPointerCaptureCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onLostPointerCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onLostPointerCaptureCapture
(event: PointerEvent<HTMLAnchorElement>) => void
onScroll
(event: UIEvent<HTMLAnchorElement, UIEvent>) => void
onScrollCapture
(event: UIEvent<HTMLAnchorElement, UIEvent>) => void
onWheel
(event: WheelEvent<HTMLAnchorElement>) => void
onWheelCapture
(event: WheelEvent<HTMLAnchorElement>) => void
onAnimationStart
(event: AnimationEvent<HTMLAnchorElement>) => void
onAnimationStartCapture
(event: AnimationEvent<HTMLAnchorElement>) => void
onAnimationEnd
(event: AnimationEvent<HTMLAnchorElement>) => void
onAnimationEndCapture
(event: AnimationEvent<HTMLAnchorElement>) => void
onAnimationIteration
(event: AnimationEvent<HTMLAnchorElement>) => void
onAnimationIterationCapture
(event: AnimationEvent<HTMLAnchorElement>) => void
onTransitionEnd
(event: TransitionEvent<HTMLAnchorElement>) => void
onTransitionEndCapture
(event: TransitionEvent<HTMLAnchorElement>) => void
ping
string
referrerPolicy
string

Further References

View Source
Migration Guide