The link component meant for hyper and simple links. Links can be styled via several properties to change their look-and-feel.
All links support the colors "red" and "white" if declared within the variant attribute. See the explanation below.
| Attribute | Details |
|---|---|
variant="icon" |
Link with an icon displayed |
variant="arrowright" |
Link with arrow icon to the right |
variant="arrowleft" |
Link with arrow icon to the left |
variant="arrowleft-animated" |
Link with animated arrow icon |
variant="arrowright-animated" |
Link with animated arrow icon |
| Attribute | Details |
|---|---|
variant="icon-red" |
Link with an icon displayed |
variant="arrowright-red" |
Link with arrow icon to the right |
variant="arrowleft-red" |
Link with arrow icon to the left |
variant="arrowleft-animated-red" |
Link with animated arrow icon |
variant="arrowright-animated-red" |
Link with animated arrow icon |
| Attribute | Details |
|---|---|
variant="white" |
Link white |
variant="hyperlink-white" |
Link white in lowercase |
variant="hyperlink-white-underline" |
Link white in lowercase and underlined |
variant="icon-white" |
Link with an icon displayed |
variant="arrowright-white" |
Link with arrow icon to the right |
variant="arrowleft-white" |
Link with arrow icon to the left |
variant="arrowleft-animated-white" |
Link with animated arrow icon |
variant="arrowright-animated-white" |
Link with animated arrow icon |
The string-valued attribute href is used like in a native <a> hyperlink.
The Boolean attribute external adds the target="_blank" functionality.
If the variant is icon, using the attribute icon's string value as icon name, an icon will be rendered. The attributes variant=icon and icon=xyz both need to exist in order for an icon to be displayed. To see the full list of possible icons and custom icon usage, see the axa-icon readme. The dimensions of the icons depends on icon component. Because of this its possible that some icons are bigger than the link text.
If you set an icon, the component will be displayed as a block element and loses its inline behavior.
On a React-ified component this function-valued attribute can be used as a callback function. Using it will prevent default link navigation. Click event object is passed as argument. This allows the consumer to stopPropagation() of the event.