Link

Links are used to navigate between pages.

Examples

Contents

UsageAPIs

Usage

Render links with the right color and focus styling. Use custom targets, download files, or just redirect the browser by default.

APIs

IAnchorProps

href
string
Optional href; if you don't provide one your link won't point anywhere
rel
string
When a link opens in a new tab/window
target
string
Optional target, eg. _blank
focus
(): void

ILinkProps

ariaDescribedBy
string
Optional aria described by for detailed information about the link
ariaExpanded
boolean
Optional expanded flag for accessibility
ariaHasPopup
boolean
Optional hasPopup for accessibility
ariaLabel
string
Optional aria label
ariaLabelledBy
string
Optional aria-labelledby
ariaSelected
boolean
Optional selected for accessibility
className
string
Optional class name to render
dataIsFocusable
boolean
Optional standin for data-is-focusable @@OFFICE_FABRIC remove when we are done.
disabled
boolean
Optional disabled boolean for the
download
string
Optional point to a download location
draggable
boolean
Sets the draggable attribute on the element.
excludeFocusZone
boolean
Set to true if you don't want the link's focus managed by a FocusZone.
excludeTabStop
boolean
Set to true if you don't want the link's to be tabbable.
hrefInherited From: IAnchorProps
string
Optional href; if you don't provide one your link won't point anywhere
id
string
Optional ID to emit
onBlur
(event: React.FocusEvent<HTMLAnchorElement>) => void
Optional onBlur handler
onClick
(event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => void
Optional onClick handler
onFocus
(event: React.FocusEvent<HTMLAnchorElement>) => void
Optional onFocus handler
onMouseEnter
(event: React.MouseEvent<HTMLAnchorElement>) => void
Optional hoverStart handler
onMouseLeave
(event: React.MouseEvent<HTMLAnchorElement>) => void
Optional hoverEnd handler
onMouseOver
(event: React.MouseEvent<HTMLAnchorElement>) => void
Optional mouseOver handler
onTouchEnd
(event: React.TouchEvent<HTMLAnchorElement>) => void
Optional onTouchEnd handler
onTouchMove
(event: React.TouchEvent<HTMLAnchorElement>) => void
Optional onTouchMove handler
onTouchStart
(event: React.TouchEvent<HTMLAnchorElement>) => void
Optional onTouchStart handler
relInherited From: IAnchorProps
string
When a link opens in a new tab/window
removeUnderlinefalse
boolean
Set to true to remove underline from link text.
role
string
Optional role
subtle
boolean
Whether or not to apply subtle styling to the link
tabIndex
number
Optional tabIndex
targetInherited From: IAnchorProps
string
Optional target, eg. _blank
title
string
Optional link title
tooltipProps
Optional tooltip to show when the link is hovered.
underlinedeprecated
boolean
Set to true to underline the link text.

Loaded Link page