react-awesome-button

Theme selection

Basic Button Types

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>
  );
}

Basic Button Types with Custom Icons

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>
  );
}

Progress Button Types

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>
  );
}

Social Button Types with Sharer

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>
  );
}

Social Button Types with a normal Link

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>
  );
}