Example sms link.
Example telephone link.
Example email link.
See code
```html
Example sms link.
Example telephone link.
Example email link.
```
### External Links
Hyperlinks when used with the `target="_blank"` attribute are domain aware and return either an internal domain "new-window" icon, or an icon that communicates users will be taken to a new domain.
For link security purposes, when using the `target="_blank"` attribute, this implicitly provides the same `rel` behavior as setting `rel="noopener"`. For additional security, Auro applies `noreferrer` to the `rel` attribute by default.
Example link with
external target
but same domain
Example link with
external target
with external domain
Example link with
external target
but same domain
Example link with
external target
with external domain
See code
```html
Example link with
external target
but same domain
Example link with
external target
with external domain
```
```html
Example link with
external target
but same domain
Example link with
external target
with external domain
```
### External Links with Referrerpolicy
When using the `target="_blank"` attribute, use the `referrerpolicy` attribute to override the default use of `rel="noreferrer"`.
Using this attribute will use the `strict-origin-when-cross-origin` policy type. This sends a full URL when performing a same-origin request, only sends the origin when the protocol security level stays the same (HTTPS→HTTPS), and sends no header to a less secure destination (HTTPS→HTTP).
This will also set the `rel` attribute to `external`.
Example link with
external target
, external domain with referrerpolicy attribute
Example link with
external target
, external domain with referrerpolicy attribute
See code
```html
Example link with
external target
, external domain with referrerpolicy attribute
```
```html
Example link with
external target
, external domain with referrerpolicy attribute
```
### Navigation Links
When using `auro-hyperlink` as a navigation style, use `type="nav"` for an alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
Navigation style link
Navigation style link
See code
```html
Navigation style link
```
```html
Navigation style link
```
### Call to Action Buttons
Call to action (CTA) buttons combine hyperlink functionality with button styling. While semantically these are hyperlinks, they visually appear as buttons. Use the `variant` attribute with values `primary`, `secondary`, `tertiary`, `ghost`, or `flat` to modify their appearance as shown below. The `ondark` attribute can be combined with any `type="cta"` option.
PrimarySecondaryTertiaryGhostFlat
PrimarySecondaryTertiaryGhostFlat
See code
```html
PrimarySecondaryTertiaryGhostFlat
```
```html
PrimarySecondaryTertiaryGhostFlat
```
#### CTA External links
(CTA) buttons can also be used in combinaton with external links. In the following example, see how the `target="_blank"` attribute acts like external links.
CTA buttons share the same icon support as the standard hyperlink for targets that open new browser tabs.
PrimarySecondaryTertiaryGhostFlat
PrimarySecondaryTertiaryGhostFlat
See code
```html
PrimarySecondaryTertiaryGhostFlat
```
```html
PrimarySecondaryTertiaryGhostFlat
```
#### Fluid CTA links
In the following example, see how the `fluid` attribute alters the shape of the button to take up the full width of its parent container.
CTA ButtonCTA ButtonCTA Button
See code
```html
CTA ButtonCTA ButtonCTA Button
```
#### CTA sizes
In the following example, see how the `size` attribute alters the size of the cta link. Available sizes are `xs`, `sm`, `md`, `lg`, `xl`.
Extra SmallSmallMediumLargeExtra Large
See code
```html
Extra SmallSmallMediumLargeExtra Large
```
#### CTA shape
The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
RoundedPill
Back to Top
See code
```html
RoundedPill
Back to Top
```
## Common Usage Patterns & Functional Examples
### Using role="button"
Aside from the standard hyperlink use-case, the `auro-hyperlink` element is intended to be used for button situations as illustrated below.
**Note:** Any `href` will be ignored when using `role="button"`. A click-event must be passed to the element as illustrated in the example below.
**Accessibility:** Review the code examples, the user of this element are responsible for keyboard support when using `role="button"`.
Cancel button
Cancel button
See code
```html
Cancel button
```
```html
Cancel button
```
```js
export function roleButtonExample() {
const roleButton = document.getElementById("roleButton");
const roleButtonOndark = document.getElementById("roleButton-ondark");
roleButton.addEventListener("click", () => {
alert("You clicked the role button!");
});
roleButtonOndark.addEventListener("click", () => {
alert("You clicked the role button!");
});
}
```
### Unsupported types
Not all URL types are supported for security reasons. Two common types that are worth mentioning are `javaScript:` and `data:`.
The following examples illustrate the use of `` with either no `href`, `javaScript:` or `data:` protocols being used. Note that `javascript` returns a shadowDOM as simple text. Using an unsupported protocol like `data:`, the protocol is removed from the provided `href` value.
No href supplied
JavaScript not supported
Data type not supported
See code
```html
No href supplied
JavaScript not supported
Data type not supported
```
### Typography
The `auro-hyperlink` component is designed to work with the typography classes provided by the Auro Design System.
The component will automatically inherit the typography styles from the parent element, allowing for consistent text styling across your application. Classes can also be applied directly onto the `auro-hyperlink` component.