import { ButtonHTMLAttributes, ReactNode } from 'react';
import * as React from 'react';
import { IconName } from '@grafana/data';
import { IconSize } from '../../types/icon';
interface BaseProps extends ButtonHTMLAttributes {
/** Icon name */
icon?: IconName | React.ReactNode;
/** Icon size */
iconSize?: IconSize;
/** Tooltip */
tooltip?: string;
/** For image icons */
imgSrc?: string;
/** Alt text for imgSrc */
imgAlt?: string;
/** if true or false will show angle-down/up */
isOpen?: boolean;
/** Controls flex-grow: 1 */
fullWidth?: boolean;
/** reduces padding to xs */
narrow?: boolean;
/** variant */
variant?: ToolbarButtonVariant;
/** Hide any children and only show icon */
iconOnly?: boolean;
/** Show highlight dot */
isHighlighted?: boolean;
}
interface BasePropsWithChildren extends BaseProps {
children: ReactNode;
}
interface BasePropsWithTooltip extends BaseProps {
tooltip: string;
}
interface BasePropsWithAriaLabel extends BaseProps {
['aria-label']: string;
}
export type ToolbarButtonProps = BasePropsWithChildren | BasePropsWithTooltip | BasePropsWithAriaLabel;
export type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active' | 'canvas';
/**
* Multiple buttons that form a toolbar. Each button can contain an icon, image and text. There are three variants of the ToolbarButton: default, primary and destructive.
*
* https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-toolbarbutton--docs
*/
export declare const ToolbarButton: React.ForwardRefExoticComponent>;
export {};