1# Hyperlink
2
3The **Hyperlink** component implements a link from a location in the component to another location.
4
5>  **NOTE**
6>
7>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8>  - This component must be used with the system browser.
9
10## Required Permissions
11
12If Internet access is required, you need to apply for the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../../security/AccessToken/declare-permissions.md).
13
14## Child Components
15
16This component can contain the [Image](ts-basic-components-image.md) child component.
17
18## APIs
19
20Hyperlink(address: string | Resource, content?: string | Resource)
21
22**Atomic service API**: This API can be used in atomic services since API version 11.
23
24**System capability**: SystemCapability.ArkUI.ArkUI.Full
25
26**Parameters**
27
28| Name| Type| Mandatory| Description|
29| -------- | -------- | -------- | -------- |
30| address | string \| [Resource](ts-types.md#resource) | Yes| Web page to which the hyperlink is redirected.|
31| content | string \| [Resource](ts-types.md#resource) | No| Text displayed in the hyperlink.<br>**NOTE**<br>If this component has child components, the hyperlink text is not displayed.|
32
33## Attributes
34
35In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
36
37### color
38
39color(value: Color | number | string | Resource)
40
41Sets the color of the hyperlink text.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters**
48
49| Name| Type                                                        | Mandatory| Description              |
50| ------ | ------------------------------------------------------------ | ---- | ------------------ |
51| value  | [Color](ts-appendix-enums.md#color) \| number \| string \| [Resource](ts-types.md#resource) | Yes  | Color of the hyperlink text<br>Default value: **'#ff0a59f7'**|
52
53## Example
54
55```ts
56@Entry
57@Component
58struct HyperlinkExample {
59  build() {
60    Column() {
61      Column() {
62        Hyperlink('https://example.com/') {
63          Image($r('app.media.bg'))
64            .width(200)
65            .height(100)
66        }
67      }
68
69      Column() {
70        Hyperlink('https://example.com/', 'Go to the developer website') {
71        }
72        .color(Color.Blue)
73      }
74    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
75  }
76}
77```
78
79![hyperlink](figures/hyperlink.PNG)
80