ArrowLink

ArrowLink renders Falcon’s legacy directional arrow affordance.

Code

import { ArrowLink } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return <ArrowLink />;
}

Directions

Code

import { ArrowLink } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:gap-5">
      <ArrowLink direction="back" />
      <ArrowLink direction="down" />
      <ArrowLink direction="up" />
      <ArrowLink direction="forward" />
    </div>
  );
}

With Parent Style Color

Code

import { ArrowLink } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="link-color">
      <ArrowLink />
    </div>
  );
}

Mobile Header Example

Code

import { ArrowLink } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:w-fit">
      <div className="tw:bg-primary tw:p-5">
        <div className="tw:text-white">
          <ArrowLink />
        </div>
      </div>
    </div>
  );
}

API

ArrowLink

Props

className

className?: string

direction

direction?: "back" | "down" | "up" | "forward" = "forward"