import { css } from "@emotion/react" import styled from "@emotion/styled/macro" import { Icon } from "react-feather" import { VisuallyHidden } from "." const Button = styled.button` ${({ theme: { color, space } }) => css` width: calc(${space.medium} * 2); height: calc(${space.medium} * 2); display: inline-flex; align-items: center; justify-content: center; background-color: transparent; border: none; outline: none; :enabled { cursor: pointer; color: ${color.primary.fg}; :focus-visible, :hover { color: ${color.primary.base}; } } :focus-visible { background: ${color.bg.highlight}; outline: ${space.smallest} solid ${color.fg.shade}; } :disabled { color: ${color.fg.shade}; } > svg { width: 1.2rem; height: 1.2rem; } `} ` type IconButtonProps = { label?: string onClick?: () => void icon: Icon disabled?: boolean } export const IconButton = ({ label, onClick, icon: Icon, disabled, }: IconButtonProps) => ( <Button onClick={click => { onClick?.() click.stopPropagation() }} onKeyDown={key => key.stopPropagation()} title={label} disabled={disabled} > <Icon aria-hidden /> {label ? <VisuallyHidden>{label}</VisuallyHidden> : null} </Button> )