Farmblocks-Links

A React component to create links. See Storybook

Installation

npm install @crave/farmblocks-link

Usage

A Link renders a stylized <a> tag, which has to have a href value or a function to handle onClick, as well as a children element.

import React from "react";
import ReactDOM from "react-dom";
import Link from "@crave/farmblocks-link";
import { linkTypes } from "@crave/farmblocks-link";

const root = document.createElement("div");

ReactDOM.render(
  <Link href="#" type={linkTypes.NEUTRAL} size="14" lineHeight="1.14">
    This is a link!
  </Link>,
  root,
);

document.body.appendChild(root);

API

| Property | Description | Type | | ---------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | children | the contents of the card | React.Node | | href | an URI to a desired destination | string | | type | the type of link (reflects on color and text-decoration) | string. One of FEATURED, NEUTRAL, NORMAL or WHITE constants from linkTypes.js or any valid CSS color | | disabled | indicates a disabled link | boolean | | onClick | a function to handle an onClick event | function | | leftIcon | an icon to be placed on the left side of the link | node | | rightIcon | an icon to be placed on the right side of the link | node | | external | an indication of an external link (an icon will be placed on the right side of the link) | boolean | | size | a font-size css value for children | number | | lineHeight | a line-height css value for children | number or string | | fontWeight | a font-weight css value for children | number or string |

License

MIT