import { Badge } from 'terra-hyperlink/package.json?dev-site-package';

import DefaultHyperlink from './example/DefaultHyperlink?dev-site-example';
import DefaultHyperlinkButton from './example/DefaultHyperlinkButton?dev-site-example';
import Audio from './example/AudioHyperlink?dev-site-example';
import Document from './example/DocumentHyperlink?dev-site-example';
import External from './example/ExternalHyperlink?dev-site-example';
import Image from './example/ImageHyperlink?dev-site-example';
import Video from './example/VideoHyperlink?dev-site-example';

import HyperlinkPropsTable from 'terra-hyperlink/lib/Hyperlink?dev-site-props-table';

<Badge />

# Terra Hyperlink

The terra hyperlink component allows linking to other web pages, files, locations within the same page, email addresses, or any other URL.


## Terra Hyperlink Button

Similar to the standard hyperlinks, there are times when applications may need to use a button element and add a onClick function to navigate the user, instead of a traditional anchor `<a>` element with an `href` attribute for URL routing.

Terra Hyperlink Button can be created by providing callback / handler to `onClick` prop. Hyperlink Button is intended to communicate both visually to sighted users and to accessible users relying on assistive technology, that the interactive element is still a link, with the intention of navigating a user somewhere (contrasted with standard buttons which communicate that user can take an action).

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-hyperlink`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage
```jsx
import Hyperlink from 'terra-hyperlink';
```

## Component Features

 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
 * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<DefaultHyperlink />
<DefaultHyperlinkButton />
<External description="An external variant adds a custom icon to indicate the destination is external to the source." />
<Audio description="An audio variant adds a custom icon to indicate the content linked is audio." />
<Video description="A video variant adds a custom icon to indicate the content linked is a video." />
<Image description="An image variant adds a custom icon to indicate the content linked is an image." />
<Document description="A document variant adds a custom icon to indicate the content linked is document (.pdf, .doc, .xls, etc.)." />

## Hyperlink Props
<HyperlinkPropsTable />