Hyperlink
minimal usage
Any Paragon component or export may be added to the code example.
with blank target
Any Paragon component or export may be added to the code example.
blank target without Icon
Any Paragon component or export may be added to the code example.
with onClick
Any Paragon component or export may be added to the code example.
with icon
Any Paragon component or export may be added to the code example.
color variants
Any Paragon component or export may be added to the code example.
link variants
Any Paragon component or export may be added to the code example.
Props API#
- destination
string
Requiredspecifies the URL
- children
node
RequiredContent of the hyperlink
- className
string
Custom class names for the hyperlink
- target
enum
'_blank' | '_self'Default'_self'specifies where the link should open. The default behavior is
_self
, which means that the URL will be loaded into the same browsing context as the current one. If the target is_blank
(opening a new window)rel='noopener'
will be added to the anchor tag to prevent any potential reverse tabnabbing attack. - onClick
func
Default() => {}specifies the callback function when the link is clicked
- externalLinkAlternativeText
string
Default'in a new tab'Alt text for the icon indicating that this link opens in a new tab, if target="blank". e.g. ("in a new tab")
- externalLinkTitle
string
Default'Opens in a new tab'Tooltip text for the "opens in new tab" icon, if target="blank". e.g. ("Opens in a new tab").
- variant
enum
'default' | 'muted' | 'brand'Default'default'type of hyperlink
- isInline
bool
DefaultfalseDisplay the link with an underline. By default, it is only underlined on hover.
- showLaunchIcon
bool
Defaulttruespecify if we need to show launch Icon. By default, it will be visible.
Usage Insights#
Hyperlink
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
edx-platform | 2.6.4 | 2 | |
frontend-app-account | 22.0.0 | 10 | |
frontend-app-admin-portal | 21.13.1 | 48 | |
frontend-app-authn | 22.8.1 | 23 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 59 | |
learning_assistant | 22.8.1 | 2 | |
live | 22.8.1 | 2 | |
ora_settings | 22.8.1 | 1 | |
proctoring | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 2 | |
frontend-app-discussions | 22.7.0 | 3 | |
frontend-app-ecommerce | 20.46.3 | 3 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 2 | |
frontend-app-gradebook | 22.8.1 | 2 | |
frontend-app-learner-dashboard | 22.8.1 | 6 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 27 | |
frontend-app-learner-record | 22.8.1 | 9 | |
frontend-app-learning | 22.8.1 | 26 | |
frontend-app-ora-grading | 21.11.3 | 6 | |
frontend-app-payment | 22.8.1 | 8 | |
frontend-app-profile | 22.8.1 | 2 | |
frontend-app-publisher | 21.13.1 | 6 | |
frontend-app-support-tools | 21.13.1 | 17 | |
frontend-component-header-edx | 21.11.4 | 1 | |
frontend-lib-special-exams | 22.7.0 | 5 | |
prospectus | 20.46.2 | 5 | |
studio-frontend | 3.4.8 | 4 |