REACTAWESOME BUTTON

• DefaultDefaultRickC-137CartmanBojackBruce

import { AwesomeButton } from "react-awesome-button";

const Buttons = () => {
  return (
    <AwesomeButton type="primary">Primary</AwesomeButton>
    <AwesomeButton type="secondary">Secondary</AwesomeButton>
    <AwesomeButton type="anchor">Anchor</AwesomeButton>
    <AwesomeButton type="danger">Danger</AwesomeButton>
  );
}

• Primary
• Secondary
• Anchor
• Danger
• Disabled

import { AwesomeButton } from "react-awesome-button";
import { BeakerIcon, TrashIcon } from "@primer/octicons-react"; // custom icons

const Buttons = () => {
  return (
    <AwesomeButton type="primary" before={<ZapIcon />}>Primary</AwesomeButton>
    <AwesomeButton type="secondary" after={<ZapIcon />}>Secondary</AwesomeButton>
    <AwesomeButton type="anchor" size="icon"><TrashIcon /></AwesomeButton>
  );
}

• Primary
• Secondary
• Trash It

import { AwesomeButtonProgress } from "react-awesome-button";
import { BeakerIcon, TrashIcon } from "@primer/octicons-react"; // custom icons

const Buttons = () => {
  return (
    <AwesomeButtonProgress type="primary" onPress={async (element, next)=>{
      // await for something then call
      next();
    }}>Primary Progress</AwesomeButton>
    <AwesomeButtonProgress type="anchor" size="icon"><TrashIcon /></AwesomeButton>
  );
}

• Progress Primary
• Progress Secondary
• Trash it

import { AwesomeButtonShare } from "react-awesome-button";

const Buttons = () => {
  return (
    <AwesomeButtonShare type="facebook">Facebook</AwesomeButtonShare>
    <AwesomeButtonShare type="twitter">Twitter</AwesomeButtonShare>
    <AwesomeButtonShare type="linkedin">LinkedIn</AwesomeButtonShare>
    <AwesomeButtonShare type="messenger" sharer={{user: '@username'}}>Messenger</AwesomeButtonShare>
    <AwesomeButtonShare type="whatsapp" sharer={{phone: '+00 000-00000'}}>Whatsapp</AwesomeButtonShare>
  );
}

• Facebook
• Messenger
• WhatsApp
• Twitter
LinkedIn

import { AwesomeButtonShare } from "react-awesome-button";

const Buttons = () => {
  return (
    <AwesomeButtonShare type="github" href="https://github.com/username">GitHub</AwesomeButtonShare>
    <AwesomeButtonShare type="linkedin" href="https://linkedin.com/username">LinkedIn</AwesomeButtonShare>
    <AwesomeButtonShare type="instagram" href="https://linkedin.com/username">Instagram</AwesomeButtonShare>
  );
}

• GitHub
• Instagram
• LinkedIn