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.
with custom link element (e.g., using a router)
Hyperlink
typically relies on the standard HTML anchor tag (i.e., a
); however, this behavior may be overriden when the destination link is to an internal route where it should be using routing instead (e.g., Link
from React Router).
Any Paragon component or export may be added to the code example.
Props API#
- as
elementType
Default'a'specifies the component element type to render for the hyperlink
- destination
customPropTypeRequirement( PropTypes.string, ({ as }: { as: React.ElementType }) => as && as === 'a', // "[`destination` is required when]..." 'the `as` prop is a standard anchor element (i.e., "a")', )
specifies the URL; required iff
as
prop is a standard anchor tag - 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
specifies the callback function when the link is clicked
- externalLinkAlternativeText
string
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
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.10.0 | 10 | |
frontend-app-admin-portal | 21.13.1 | 51 | |
frontend-app-authn | 22.11.2 | 23 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 54 | |
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.9.0 | 6 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 27 | |
frontend-app-learner-record | 22.10.0 | 9 | |
frontend-app-learning | 22.10.0 | 27 | |
frontend-app-ora-grading | 21.11.3 | 5 | |
frontend-app-payment | 22.9.0 | 8 | |
frontend-app-profile | 22.10.0 | 2 | |
frontend-app-publisher | 21.13.1 | 6 | |
frontend-app-support-tools | 21.13.1 | 17 | |
frontend-component-header-edx | 21.13.1 | 2 | |
frontend-lib-special-exams | 22.7.0 | 5 | |
prospectus | 20.46.2 | 5 | |
studio-frontend | 3.4.8 | 4 |