Тимур Городецкий
fa6fe8dbe1
Набор B перекраски форм: брендовые адаптивные примитивы + иконки arrow-up/arrow-down/swap/refresh + токен $amber-50. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import styles from './IconButton.module.scss';
|
|
import { Icon } from '../Icon/Icon';
|
|
import { IconName } from '../Icon/iconNames';
|
|
|
|
export interface IIconButtonProps {
|
|
icon: IconName;
|
|
/** Подсказка (tooltip) и a11y-подпись — обязательна: кнопка без текста. */
|
|
title: string;
|
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
disabled?: boolean;
|
|
/** Акцент удаления (красный ховер). */
|
|
danger?: boolean;
|
|
size?: 'sm' | 'md';
|
|
className?: string;
|
|
}
|
|
|
|
/** Кнопка-иконка (удалить/переместить/заменить). Иконка — из общего спрайта. */
|
|
export const IconButton: React.FC<IIconButtonProps> = ({
|
|
icon,
|
|
title,
|
|
onClick,
|
|
disabled,
|
|
danger,
|
|
size = 'md',
|
|
className
|
|
}) => {
|
|
const classes = [styles.btn, size === 'sm' ? styles.sm : '', danger ? styles.danger : '', className]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
return (
|
|
<button type="button" className={classes} title={title} aria-label={title} disabled={disabled} onClick={onClick}>
|
|
<Icon name={icon} size={size === 'sm' ? 'sm' : 'md'} />
|
|
</button>
|
|
);
|
|
};
|