Variable IconButtonConst

Type Declaration

• • (props: IconButtonPropsExtend): any

  • Creates a Material-UI IconButton component with optional tooltip support.

    Wraps Material-UI's IconButton to provide accessible icon-based button control with built-in tooltip support. Requires aria-label for accessibility compliance. Tooltip can either use the aria-label or be customized via tooltip prop. All Material-UI IconButton props are supported and passed through directly.

    IMPORTANT: This component expects pre-translated strings for aria-label and tooltip. Always call t() before passing values to this component.

    Note on NavBar/AppBar configs: When configuring buttons for NavBar/AppBar components, those configs accept translation keys (e.g., 'mapnav.zoomIn'), which the bar components translate internally before passing to IconButton. This is a config-level pattern — the IconButton component itself still receives pre-translated strings.

    Parameters

    • props: IconButtonPropsExtend

      IconButton configuration (see IconButtonPropsExtend interface)

    Returns any

    The icon button component

    Example

    // Direct usage with translation (standard pattern)
    const { t } = useTranslation();
    <IconButton aria-label={t('general.delete')}>
      <DeleteIcon />
    </IconButton>
    
    // With implicit tooltip (uses aria-label)
    <IconButton
      aria-label={t('general.delete')}
      tooltipPlacement="top"
    >
      <DeleteIcon />
    </IconButton>
    
    // With explicit tooltip
    <IconButton
      aria-label={t('general.delete')}
      tooltip={t('general.deleteItemPermanently')}
      tooltipPlacement="top"
    >
      <DeleteIcon />
    </IconButton>
    
    // Tooltip disabled (no tooltip on hover)
    <IconButton
      aria-label={t('general.close')}
      tooltip={null}
    >
      <CloseIcon />
    </IconButton>
    Copy

    See

    https://mui.com/material-ui/react-button/#icon-button