Link

Shows clickable text for user navigation. The Link component works exactly like the native a element, except for a few additional props for customization.

Usage

Use by importing the Link component from @avocado-ui/react.

New Link

import { Link } from "@avocado-ui/react";
render(<Link href="/">New Link</Link>);

import { Link } from "@avocado-ui/react";
render(<Link href="/">New Link</Link>);

Types

The Link component comes in 4 basic types - default, solid, outline, and ghost. You can use any one of them by passing their values into the type prop.

New Link New Link New Link New Link

import { Link, Flex } from "@avocado-ui/react";

render(
  <Flex gap={12} alignItems="center">
    <Link href="/" type="default">
      New Link
    </Link>
    <Link href="/" type="solid">
      New Link
    </Link>
    <Link href="/" type="outline">
      New Link
    </Link>
    <Link href="/" type="ghost">
      New Link
    </Link>
  </Flex>
);

import { Link, Flex } from "@avocado-ui/react";

render(
  <Flex gap={12} alignItems="center">
    <Link href="/" type="default">
      New Link
    </Link>
    <Link href="/" type="solid">
      New Link
    </Link>
    <Link href="/" type="outline">
      New Link
    </Link>
    <Link href="/" type="ghost">
      New Link
    </Link>
  </Flex>
);

Shape

The shape prop in Link works like that of the Button component and can take in 3 basic shape types - square, curve and round.

New Link New Link New Link

import { Link, Flex } from "@avocado-ui/react";
render(
  <Flex gap={12}>
    <Link shape="curve" href="/" type="outline">
      New Link
    </Link>
    <Link shape="round" href="/" type="outline">
      New Link
    </Link>
    <Link shape="square" href="/" type="outline">
      New Link
    </Link>
  </Flex>
);

import { Link, Flex } from "@avocado-ui/react";
render(
  <Flex gap={12}>
    <Link shape="curve" href="/" type="outline">
      New Link
    </Link>
    <Link shape="round" href="/" type="outline">
      New Link
    </Link>
    <Link shape="square" href="/" type="outline">
      New Link
    </Link>
  </Flex>
);

Size

The Link component comes in 3 basic sizes - sm, md and lg. You can pass any of these to the size prop and the Link component will adjust accordingly.

New Link New Link New Link

import { Link, Flex } from "@avocado-ui/react";
render(
  <Flex gap={12} alignItems="center">
    <Link size="sm" href="/" type="outline">
      New Link
    </Link>
    <Link size="md" href="/" type="outline">
      New Link
    </Link>
    <Link size="lg" href="/" type="outline">
      New Link
    </Link>
  </Flex>
);

import { Link, Flex } from "@avocado-ui/react";
render(
  <Flex gap={12} alignItems="center">
    <Link size="sm" href="/" type="outline">
      New Link
    </Link>
    <Link size="md" href="/" type="outline">
      New Link
    </Link>
    <Link size="lg" href="/" type="outline">
      New Link
    </Link>
  </Flex>
);

Link With Icon

It's very common to pair the Link component with icons. You can do this with the prefixIcon and suffixIcon prop. You'll have to set this to a React.ReactNode component, but it's more advisable to use an icon. Here's it working with feather icons.

New Link New Link New Link

import { Link, Flex } from "@avocado-ui/react";
import { Activity, Save, Heart, User } from "react-feather";

render(
  <Flex gap={12} alignItems="center">
    <Link prefixIcon={<Activity />} href="/" type="solid">
      New Link
    </Link>
    <Link prefixIcon={<Activity />} suffixIcon={<Save />} href="/" type="solid">
      New Link
    </Link>
    <Link prefixIcon={<User />} suffixIcon={<Heart />} href="/" type="solid">
      New Link
    </Link>
  </Flex>
);

import { Link, Flex } from "@avocado-ui/react";
import { Activity, Save, Heart, User } from "react-feather";

render(
  <Flex gap={12} alignItems="center">
    <Link prefixIcon={<Activity />} href="/" type="solid">
      New Link
    </Link>
    <Link prefixIcon={<Activity />} suffixIcon={<Save />} href="/" type="solid">
      New Link
    </Link>
    <Link prefixIcon={<User />} suffixIcon={<Heart />} href="/" type="solid">
      New Link
    </Link>
  </Flex>
);

Props Table

property	description	type	default
size	size of `Link`	`sm`, `md`, `lg`	`md`
shape	shape of `Link`	`square`, `round`, `curve`	`default`
type	type of `Link` component	`default`, `ghost`, `outline`, `solid`	`curve`
prefixIcon	icon to the left of `Link` component	`ReactNode`	-
suffixIcon	icon to the right of `Link` component	`ReactNode`	-