Components

Link

Link is a control for navigating to a URL. Links provide a way to navigate to external websites or internal routes.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<Link destination="https://example.com">Visit Example</Link>

With Text

Preview unavailable for this example in the static docs build.

Show code

<Link destination="https://apple.com">Visit Apple</Link>

Open in New Tab

Preview unavailable for this example in the static docs build.

Show code

<Link destination="https://example.com" target="_blank">Open in New Tab</Link>

In HStack

Preview unavailable for this example in the static docs build.

Show code

<HStack spacing={10}>
      <Text>Check out</Text>
      <Link destination="https://example.com">this link</Link>
      <Text>for more info</Text>
    </HStack>

In VStack

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={10}>
      <Link destination="https://example.com">First Link</Link>
      <Link destination="https://apple.com">Second Link</Link>
      <Link destination="https://github.com">Third Link</Link>
    </VStack>

Custom Styling

Preview unavailable for this example in the static docs build.

Show code

<Link destination="https://example.com" style={{
      color: '#007AFF',
      textDecoration: 'underline',
      fontSize: '18px'
    }}>Styled Link</Link>

Multiple Links

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={15}>
      <Link destination="https://example.com">Example.com</Link>
      <Link destination="https://apple.com" target="_blank">Apple.com (new tab)</Link>
      <Link destination="https://github.com">GitHub</Link>
    </VStack>

API

Prop	Type	Required	Description
`destination`	`string \| URL`	Yes	The destination URL for the link.
`target`	`string`	No	The target window or frame for the link. Common values: '_blank', '_self', '_parent', '_top' Default: `undefined (uses browser default)`

Inherits additional props from IBaseComponent.

Overview

Link is a control for navigating to a URL. Links provide a way to navigate to external websites or internal routes.

SwiftUI Correspondence: Similar to SwiftUI's Link.

Open in New Tab

Open links in a new tab:

Custom Styling

Apply custom styles to links:

Notes

Links require a destination prop with a valid URL
Use target="_blank" to open links in a new tab
Links support all standard anchor tag attributes
Custom styles can be applied via the style prop
Links can contain any React node as children

Best Practices

Clear destinations: Use descriptive text that indicates where the link goes
External links: Use target="_blank" for external links with appropriate security considerations
Accessibility: Ensure links have proper labels and are keyboard accessible
Styling: Maintain consistent link styling throughout your application
Security: Be cautious with user-generated links and validate URLs

LinearGradient

LinearGradient fills a view using color stops distributed along a line.

List

List is a container that presents rows of data arranged in a single column. Lists are commonly used to display collections of items, often with dividers between items.

Link

Examples

API

Overview

Open in New Tab

Custom Styling

Notes

Best Practices

On this page