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>
link variants
<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>