Link

The Link component is used for navigating between different routes or pages in your application. It provides a customizable way to handle navigation with additional styling options, icons, and text.

Import

Phaselis exports one main component for Link.

import { Link } from "phaselis";

• Link: Main Component import for Link

Usage

Basic Link

import { Link } from "phaselis";

const Example = () => {
  return (
    <Link
      text="Proto Yazılım"
      href={"https://www.protoyazilim.com"}
      leftIcon="Link"
      rightIcon="ExternalLink"
    />
  );
};

export default Example;

Props

tip

Other than listed props below, you can pass any prop that a Pressable component accepts.

The properties available for this component include options for styling, navigation settings, as well as optional icons and slot configurations.

href

string

The target route or URL for navigation.

<Link text="Proto" href={"https://www.protoyazilim.com/"} />

text

string

The text to display within the link.

<Link text="Proto" href={"https://www.protoyazilim.com/"} />

variation

default | primary | secondary | tertiary

Determines the style of the link.

• default: Applies the default link style.
• primary: Applies the primary link style.
• secondary: Applies the secondary link style.
• tertiary: Applies the tertiary link style.

<Link text="Proto" href="https://www.protoyazilim.com/" variation="primary" />

canOpenURL

boolean

Validates whether the provided URL can be opened before attempting to navigate.

<Link text="Check and Open URL" href="https://example.com" canOpenURL />

LeftSlot

ReactNode

You can pass any component to the left slot of the link.

import { LucideIcon } from "phaselis";

<Link
  text="Proto"
  href={"https://www.protoyazilim.com/"}
  LeftSlot={() => <LucideIcon name={"ArrowLeft"} />}
/>

RightSlot

ReactNode

You can pass any component to the right slot of the link.

import { LucideIcon } from "phaselis";

<Link
  text="Proto"
  href={"https://www.protoyazilim.com/"}
  RightSlot={() => <LucideIcon name={"ArrowRight"} />}
/>

leftIcon

[SlotIconName](https://lucide.dev/icons/)

You can pass any Lucide icon name to the left slot of the link.

<Link text="HyperLink" href={"https://www.google.com"} leftIcon="Link" />

rightIcon

SlotIconName

You can pass any Lucide icon name to the right slot of the link.

<Link
  text="HyperLink"
  href={"https://www.google.com"}
  rightIcon="ExternalLink"
/>

style

Name	Type	Description
container	ViewStyle	Style for the outer container view.
text	TextStyle	Style for the link text.
leftSlot	IconStyle	Style for the left slot of the link.
rightSlot	IconStyle	Style for the right slot of the link.

You can style the link with the style prop using either an object with named styles or directly provide TextStyle properties that will be applied to the text.

// Object with named styles
<Link
  text="Proto"
  href="https://www.protoyazilim.com/"
  leftIcon="Link"
  rightIcon="ExternalLink"
  style={{
    container: { padding: 10, backgroundColor: "#eef8ff" },
    text: { color: "#0c5ae9", fontSize: 16 },
    leftSlot: { marginRight: 5 },
    rightSlot: { marginLeft: 5 },
  }}
/>

// Direct text styling
<Link
  text="Proto"
  href="https://www.protoyazilim.com/"
  style={{ color: "#0066cc", fontSize: 16, fontWeight: "bold", textDecorationLine: "underline" }}
/>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<Link
  text="Proto"
  href="https://www.protoyazilim.com/"
  containerStyle={{ marginVertical: 10, paddingHorizontal: 5 }}
/>

leftSlotStyle

ViewStyle | IconStyle

Additional style applied directly to the left slot.

<Link
  text="Proto"
  href="https://www.protoyazilim.com/"
  leftIcon="Link"
  leftSlotStyle={{ color: "#0066cc", marginRight: 8 }}
/>

rightSlotStyle

ViewStyle | IconStyle

Additional style applied directly to the right slot.

<Link
  text="Proto"
  href="https://www.protoyazilim.com/"
  rightIcon="ExternalLink"
  rightSlotStyle={{ color: "#0066cc", marginLeft: 8 }}
/>