25 lines
1.0 KiB
TypeScript
25 lines
1.0 KiB
TypeScript
import type { ButtonHTMLAttributes } from 'react';
|
|
import { Tooltip } from './Tooltip';
|
|
|
|
export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
active?: boolean;
|
|
tooltip?: string;
|
|
}
|
|
export function IconButton({
|
|
active = false,
|
|
tooltip,
|
|
className = '',
|
|
type = 'button',
|
|
...props
|
|
}: IconButtonProps) {
|
|
const button = (
|
|
<button
|
|
type={type}
|
|
aria-pressed={active || undefined}
|
|
className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border transition-[color,background-color,border-color,transform,box-shadow] duration-150 ease-out enabled:active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/30 disabled:cursor-not-allowed disabled:opacity-40 ${active ? 'tool-active-glow border-accent/40 bg-accent-soft text-accent' : 'border-transparent bg-transparent text-text-tertiary hover:bg-element-hover hover:text-text-primary'} ${className}`.trim()}
|
|
{...props}
|
|
/>
|
|
);
|
|
return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button;
|
|
}
|