ArrowLink

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

ArrowLink renders Falcon’s legacy directional arrow affordance.

Primary

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <ArrowLink />
</div>

Directions

Code

<FlexWrapper gap={20}>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <ArrowLink direction="back" />
      back
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <ArrowLink direction="down" />
      down
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <ArrowLink direction="up" />
      up
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <ArrowLink direction="forward" />
      forward
    </FlexWrapper>
  </div>
</FlexWrapper>

With Parent Style Color

Code

<div className="link-color" style={{ margin: "0 auto", width: "fit-content" }}>
  <ArrowLink />
</div>

Mobile Header Example

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <div style={{ padding: "20px", backgroundColor: "#331" }}>
    <div style={{ color: "#ffffff" }}>
      <ArrowLink />
    </div>
  </div>
</div>

API

ArrowLink

Name	Type/Description
className	string | undefined
direction = "forward"	"back" | "down" | "up" | "forward" | undefined