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