2023-03-09 17:01:40 +00:00
|
|
|
import * as React from "react";
|
|
|
|
|
2023-03-12 19:06:21 +00:00
|
|
|
import styles from "./button.module.scss";
|
2023-03-09 17:01:40 +00:00
|
|
|
|
2023-06-28 17:09:51 +00:00
|
|
|
export type ButtonType = "primary" | "danger" | null;
|
|
|
|
|
2023-03-09 17:01:40 +00:00
|
|
|
export function IconButton(props: {
|
|
|
|
onClick?: () => void;
|
2023-04-24 16:49:27 +00:00
|
|
|
icon?: JSX.Element;
|
2023-06-28 17:09:51 +00:00
|
|
|
type?: ButtonType;
|
2023-03-09 17:01:40 +00:00
|
|
|
text?: string;
|
|
|
|
bordered?: boolean;
|
2023-04-02 17:48:43 +00:00
|
|
|
shadow?: boolean;
|
2023-03-09 17:01:40 +00:00
|
|
|
className?: string;
|
2023-03-12 19:06:21 +00:00
|
|
|
title?: string;
|
2023-04-06 13:02:48 +00:00
|
|
|
disabled?: boolean;
|
2023-06-28 16:09:56 +00:00
|
|
|
tabIndex?: number;
|
|
|
|
autoFocus?: boolean;
|
2023-03-09 17:01:40 +00:00
|
|
|
}) {
|
|
|
|
return (
|
2023-04-06 13:02:48 +00:00
|
|
|
<button
|
2023-03-09 17:01:40 +00:00
|
|
|
className={
|
|
|
|
styles["icon-button"] +
|
2023-04-02 17:48:43 +00:00
|
|
|
` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
|
|
|
|
props.className ?? ""
|
2023-04-27 16:34:37 +00:00
|
|
|
} clickable ${styles[props.type ?? ""]}`
|
2023-03-09 17:01:40 +00:00
|
|
|
}
|
2023-03-10 18:25:33 +00:00
|
|
|
onClick={props.onClick}
|
2023-03-12 19:06:21 +00:00
|
|
|
title={props.title}
|
2023-04-06 13:02:48 +00:00
|
|
|
disabled={props.disabled}
|
2023-04-02 17:48:43 +00:00
|
|
|
role="button"
|
2023-06-28 16:09:56 +00:00
|
|
|
tabIndex={props.tabIndex}
|
|
|
|
autoFocus={props.autoFocus}
|
2023-03-09 17:01:40 +00:00
|
|
|
>
|
2023-04-24 16:49:27 +00:00
|
|
|
{props.icon && (
|
|
|
|
<div
|
|
|
|
className={
|
2023-04-27 16:34:37 +00:00
|
|
|
styles["icon-button-icon"] +
|
|
|
|
` ${props.type === "primary" && "no-dark"}`
|
2023-04-24 16:49:27 +00:00
|
|
|
}
|
|
|
|
>
|
|
|
|
{props.icon}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
2023-03-09 17:01:40 +00:00
|
|
|
{props.text && (
|
|
|
|
<div className={styles["icon-button-text"]}>{props.text}</div>
|
|
|
|
)}
|
2023-04-06 13:02:48 +00:00
|
|
|
</button>
|
2023-03-09 17:01:40 +00:00
|
|
|
);
|
|
|
|
}
|