Component <MainButton />

Props

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

---

Colors

Examples:

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

---

Shapes

Examples:

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

---

Sizes

Examples:

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

---

Weight

Examples:

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

---

Layouts

Examples:

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

---

Fonts

Examples:

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

---

With icons

Examples:

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