Component <MainLink />

Props

Props	Type	Meaning	Possible values
color	string	Change link background color	primary / blue / dark / white
shape	string	Change link border shape	rounded / squared
size	string	Change link size	xs / sm / md / lg
weight	string	Change link font weight	light / normal / semibold / bold
layout	string	Change link general styles	filled / outlined
fontType	string	Change link font family	main / heading / banner
iconBefore	node	Add icont before the text	component
iconAfter	node	Add icont after the text	component

---

Colors

Examples:

  <MainLink color="primary">Primary</MainLink>
  <MainLink color="blue">Blue</MainLink>
  <MainLink color="white">White</MainLink>
  <MainLink color="dark">Dark</MainLink>

PrimaryBlueWhiteDark

---

Shapes

Examples:

  <MainLink shape="rounded">Rounded</MainLink>
  <MainLink shape="squared">Squared</MainLink>

RoundedSquared

---

Sizes

Examples:

  <MainLink size="xs">Tiny</MainLink>
  <MainLink size="sm">Small</MainLink>
  <MainLink size="md">Medium</MainLink>
  <MainLink size="lg">Large</MainLink>

TinySmallMediumLarge

---

Weight

Examples:

  <MainLink weight="light">Light</MainLink>
  <MainLink weight="normal">Normal</MainLink>
  <MainLink weight="semibold">Semibold</MainLink>
  <MainLink weight="bold">Bold</MainLink>

LightNormalSemiboldBold

---

Layouts

Examples:

  <MainLink layout="filled">Filled</MainLink>
  <MainLink layout="outlined">Outlined</MainLink>

FilledOutlined

---

Fonts

Examples:

  <MainLink fontType="main">Main</MainLink>
  <MainLink fontType="heading">Heading</MainLink>
  <MainLink fontType="banner">Banner</MainLink>

MainHeadingBanner

---

With icons

Examples:

  <MainLink iconBefore={<i className="icon-plus" />}>Button</MainLink>
  <MainLink iconAfter={<i className="icon-x-mark" />}>Button</MainLink>
  <MainLink iconBefore={<i className="icon-check-mark" />} iconAfter={<i className="icon-share" />}>Button</MainLink>

ButtonButtonButton