Skip to main content

Hyperlink

minimal usage

<Hyperlink destination="https://www.edx.org">
edX.org
</Hyperlink>

with blank target

<Hyperlink destination="https://www.edx.org" target="_blank">
edX.org
</Hyperlink>

blank target without Icon

<Hyperlink destination="https://www.edx.org" target="_blank" showLaunchIcon={false}>
edX.org
</Hyperlink>

with onClick

<Hyperlink
destination="https://www.edx.org"
target="_blank"
onClick={e => {
e.preventDefault();
console.log('click');
}}
>
edX.org
</Hyperlink>

with icon

<Hyperlink destination="https://www.edx.org">
<Icon
id="SampleIcon"
src={Add}
className="fa fa-book"
screenReaderText="Visit edX Home"
/>
</Hyperlink>

color variants

<div className="d-flex flex-column">
<Hyperlink destination="https://www.edx.org">
Default
</Hyperlink>

<Hyperlink variant="muted" destination="https://www.edx.org">
Muted
</Hyperlink>

<Hyperlink variant="brand" destination="https://www.edx.org">
Brand
</Hyperlink>
</div>
<div className="row">
<div className="col-2">
<Hyperlink destination="https://www.edx.org">
Standalone
</Hyperlink>
</div>

<div className="col-2">
<Hyperlink isInline destination="https://www.edx.org">
Inline
</Hyperlink>
</div>
</div>