@grafana/ui/dist/types/components/ToolbarButton/ToolbarButton.d.ts

Grafana Components Library

import { type ButtonHTMLAttributes, type ReactNode } from 'react';
import * as React from 'react';
import { type IconName } from '@grafana/data';
import { type IconSize } from '../../types/icon';
interface BaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    /** 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<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
export {};