diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
new file mode 100644
index 0000000..612f25d
--- /dev/null
+++ b/lib/components/Button/Button.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import { Button as Btn, ButtonProps, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+
+export const Button: FC<{ rounded?: boolean } & ButtonProps> = ({
+ children,
+ className,
+ rounded = false,
+ ...rest
+}) => {
+ const { custom } = useTheme();
+ const useStyles = makeStyles({
+ rounded: {
+ // using a high value for large buttons, for most cases a 28px should be enough
+ borderRadius: "250px",
+ },
+ });
+ const classes = useStyles();
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/lib/components/Button/index.ts b/lib/components/Button/index.ts
new file mode 100644
index 0000000..0064dee
--- /dev/null
+++ b/lib/components/Button/index.ts
@@ -0,0 +1 @@
+export { Button } from "./Button";
diff --git a/lib/components/ButtonBase/ButtonBase.tsx b/lib/components/ButtonBase/ButtonBase.tsx
new file mode 100644
index 0000000..dd12e30
--- /dev/null
+++ b/lib/components/ButtonBase/ButtonBase.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import { ButtonBase as Btn, ButtonBaseProps, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+
+export const ButtonBase: FC<{ rounded?: boolean } & ButtonBaseProps> = ({
+ children,
+ className,
+ rounded = false,
+ ...rest
+}) => {
+ const { custom } = useTheme();
+ const useStyles = makeStyles({
+ rounded: {
+ // using a high value for large buttons, for most cases a 28px should be enough
+ borderRadius: "250px",
+ },
+ });
+ const classes = useStyles();
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/lib/components/ButtonBase/index.ts b/lib/components/ButtonBase/index.ts
new file mode 100644
index 0000000..9206098
--- /dev/null
+++ b/lib/components/ButtonBase/index.ts
@@ -0,0 +1 @@
+export { ButtonBase } from "./ButtonBase";
diff --git a/lib/index.ts b/lib/index.ts
index 88325eb..066350d 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -8,6 +8,9 @@ export { default as i18n, changeLocale, registerTranslations } from "./i18n";
// re-exports all mui-ui core package so this is the source of truth across implementations
export * from "@material-ui/core";
+// this Button will overwrite material-ui/core/Button export
+export { Button } from "./components/Button";
+export { ButtonBase } from "./components/ButtonBase";
// types
export * from "./types";
diff --git a/lib/types.ts b/lib/types.ts
index 7166c5c..49548f2 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -165,3 +165,49 @@ declare module "@material-ui/core/styles/createTypography" {
url: string;
}
}
+
+declare module "@material-ui/core/styles/createMuiTheme" {
+ interface Theme {
+ custom: {
+ images: {
+ headerBackground: string,
+ homeSlider: {
+ background: string,
+ slide1: string,
+ slide2: string,
+ slide3: string,
+ },
+ auth: string,
+ marketplace: {
+ hero: string,
+ background: string,
+ },
+ },
+ button: {
+ rounded: boolean,
+ },
+ },
+ }
+
+ interface ThemeOptions {
+ custom?: {
+ images?: {
+ headerBackground?: string,
+ homeSlider?: {
+ background?: string,
+ slide1?: string,
+ slide2?: string,
+ slide3?: string,
+ },
+ auth?: string,
+ marketplace?: {
+ hero?: string,
+ background?: string,
+ },
+ },
+ button?: {
+ rounded?: boolean,
+ },
+ },
+ }
+}