61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import * as React from "react";
|
|
|
|
export type ButtonType = "primary" | "danger" | null;
|
|
|
|
export default function IconButton(props: {
|
|
onClick?: () => void;
|
|
icon?: JSX.Element;
|
|
type?: ButtonType;
|
|
text?: string;
|
|
bordered?: boolean;
|
|
shadow?: boolean;
|
|
className?: string;
|
|
title?: string;
|
|
disabled?: boolean;
|
|
tabIndex?: number;
|
|
autoFocus?: boolean;
|
|
}) {
|
|
const {
|
|
onClick,
|
|
icon,
|
|
type,
|
|
text,
|
|
bordered,
|
|
shadow,
|
|
className,
|
|
title,
|
|
disabled,
|
|
tabIndex,
|
|
autoFocus,
|
|
} = props;
|
|
|
|
return (
|
|
<button
|
|
className={`
|
|
${className ?? ""}
|
|
py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn shadow-btn transition-all duration-300 select-none
|
|
${
|
|
type === "primary"
|
|
? `${disabled ? "bg-blue-300" : "bg-blue-600"}`
|
|
: `${disabled ? "bg-gray-100" : "bg-gray-300"}`
|
|
}
|
|
${disabled ? "cursor-not-allowed" : "cursor-pointer"}
|
|
${type === "primary" ? `text-white` : `text-gray-500`}
|
|
`}
|
|
onClick={onClick}
|
|
title={title}
|
|
disabled={disabled}
|
|
role="button"
|
|
tabIndex={tabIndex}
|
|
autoFocus={autoFocus}
|
|
>
|
|
{text && (
|
|
<div className={`font-common text-sm-title leading-4 line-clamp-1`}>
|
|
{text}
|
|
</div>
|
|
)}
|
|
{icon && <div className={`flex items-center justify-center`}>{icon}</div>}
|
|
</button>
|
|
);
|
|
}
|