67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
|
|
import clsx from 'clsx';
|
|
import * as React from 'react';
|
|
import styles from './button.module.scss';
|
|
|
|
export type ButtonType = 'primary' | 'danger' | null;
|
|
|
|
export 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;
|
|
style?: CSSProperties;
|
|
aria?: string;
|
|
}) {
|
|
return (
|
|
<button
|
|
className={clsx(
|
|
'clickable',
|
|
styles['icon-button'],
|
|
{
|
|
[styles.border]: props.bordered,
|
|
[styles.shadow]: props.shadow,
|
|
},
|
|
styles[props.type ?? ''],
|
|
props.className,
|
|
)}
|
|
onClick={props.onClick}
|
|
title={props.title}
|
|
disabled={props.disabled}
|
|
role="button"
|
|
tabIndex={props.tabIndex}
|
|
autoFocus={props.autoFocus}
|
|
style={props.style}
|
|
aria-label={props.aria}
|
|
>
|
|
{props.icon && (
|
|
<div
|
|
aria-label={props.text || props.title}
|
|
className={clsx(styles['icon-button-icon'], {
|
|
'no-dark': props.type === 'primary',
|
|
})}
|
|
>
|
|
{props.icon}
|
|
</div>
|
|
)}
|
|
|
|
{props.text && (
|
|
<div
|
|
aria-label={props.text || props.title}
|
|
className={styles['icon-button-text']}
|
|
>
|
|
{props.text}
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|