Hyperlink
Leave feedbackminimal 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
stringRequiredspecifies the URL
- children
nodeRequiredContent of the hyperlink
- className
stringCustom class names for the hyperlink
- target
stringDefault'_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
funcDefault() => {}specifies the callback function when the link is clicked
- externalLinkAlternativeText
isRequiredIf( PropTypes.string, props => props.target === '_blank', )Default'in a new tab'specifies the text for links with a
_blanktarget (which loads the URL in a new browsing context). - externalLinkTitle
isRequiredIf( PropTypes.string, props => props.target === '_blank', )Default'Opens in a new tab'specifies the title for links with a
_blanktarget (which loads the URL in a new browsing context). - variant
enum'default' | 'muted' | 'brand'Default'default'type of hyperlink
- isInline
boolDefaultfalsespecify the link style. By default it will be underlined.
- showLaunchIcon
boolDefaulttruespecify 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 | 20.44.0 | 12 | |
| frontend-app-admin-portal | 20.39.2 | 20 | |
| frontend-app-authn | 20.45.5 | 23 | |
| frontend-app-communications | 20.45.0 | 1 | |
| frontend-app-course-authoring | 20.35.1 | 23 | |
| frontend-app-discussions | 20.44.0 | 3 | |
| frontend-app-ecommerce | 20.35.0 | 3 | |
| frontend-app-enterprise-public-catalog | 20.29.0 | 2 | |
| frontend-app-gradebook | 20.45.0 | 2 | |
| frontend-app-learner-dashboard | 20.32.0 | 9 | |
| frontend-app-learner-portal-enterprise | 20.45.1 | 23 | |
| frontend-app-learner-record | 20.45.0 | 9 | |
| frontend-app-learning | 20.28.4 | 25 | |
| frontend-app-library-authoring | 20.45.5 | 1 | |
| frontend-app-ora-grading | 20.45.1 | 5 | |
| frontend-app-payment | 20.45.0 | 8 | |
| frontend-app-profile | 20.45.5 | 2 | |
| frontend-app-publisher | 20.28.5 | 6 | |
| frontend-app-support-tools | 20.45.0 | 10 | |
| frontend-component-header-edx | 20.45.5 | 1 | |
| frontend-lib-content-components | 20.45.0 | 16 | |
| frontend-lib-special-exams | 20.29.0 | 4 | |
| prospectus | 20.45.2 | 3 | |
| studio-frontend | 3.4.8 | 4 |