import React from 'react';
import { IconDefinition } from '../../index';
import { AvatarProps } from '../Avatar/Avatar';
declare type Props = {
    label?: React.ReactNode;
    /**
     * Props to render an avatar in the item.
     * See Avatar.tsx
     */
    avatar?: Omit<AvatarProps, 'onClick' | 'href' | 'tabIndex'>;
    /**
     * Icon to display in front of item
     */
    icon?: IconDefinition;
    /**
     * Whether the item is currently active.
     * Eg. we are on a page corresponding to an entry from the menu
     */
    active?: boolean;
    /**
     * Renders the item as an anchor tag.
     */
    href?: string;
    /**
     * Action to execute on click item
     */
    onClick: (e: React.SyntheticEvent) => void;
    /**
     * Whether to render the item as an li or div.
     * The outermost tag should always be an <li>.
     *
     * If you need custom logic and markup causing the SideMenuItem
     * to be rendered deeper in the SideMenu, set the  tag='div' on SideMenuItem
     * and set your custom wrapper to an <li>.
     */
    tag?: 'div' | 'li';
    className?: string;
    color?: 'purple' | 'grey';
    /**
     * @default 'squared'
     */
    kind?: 'rounded' | 'squared';
    hasNotification?: boolean;
    numberOfNotifications?: number;
    /**
     * If the item should collapse to only show icons
     * @default true
     */
    collapse?: boolean;
    tabIndex?: number;
    disabled?: boolean;
    dataTrackingId?: string;
    children?: React.ReactNode;
};
export declare const SideMenuItem: React.FC<Props>;
export {};