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

Grafana Components Library

import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import * as React from 'react';
import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
import { IconName, IconSize, IconType } from '../../types/icon';
import { ComponentSize } from '../../types/size';
import { PopoverContent, TooltipPlacement } from '../Tooltip/types';
export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success';
export declare const allButtonVariants: ButtonVariant[];
export type ButtonFill = 'solid' | 'outline' | 'text';
export declare const allButtonFills: ButtonFill[];
type BaseProps = {
    size?: ComponentSize;
    variant?: ButtonVariant;
    fill?: ButtonFill;
    icon?: IconName | React.ReactElement;
    className?: string;
    fullWidth?: boolean;
    type?: string;
    tooltip?: PopoverContent;
    tooltipPlacement?: TooltipPlacement;
    /** Position of the icon */
    iconPlacement?: 'left' | 'right';
};
type NoChildrenAriaLabel = BaseProps & {
    children?: never;
    'aria-label': string;
};
type NoChildrenTooltip = BaseProps & {
    children?: never;
    tooltip: PopoverContent;
    tooltipPlacement?: TooltipPlacement;
};
type BasePropsWithChildren = BaseProps & {
    children: React.ReactNode;
};
type CommonProps = BasePropsWithChildren | NoChildrenTooltip | NoChildrenAriaLabel;
export type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
/**
 * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-button--docs
 */
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
export type ButtonLinkProps = ButtonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label'>;
export declare const LinkButton: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement>>;
interface IconRendererProps {
    icon?: IconName | React.ReactElement<{
        className?: string;
        size?: IconSize;
    }>;
    size?: IconSize;
    className?: string;
    iconType?: IconType;
}
export declare const IconRenderer: ({ icon, size, className, iconType }: IconRendererProps) => import("react/jsx-runtime").JSX.Element | null;
export interface StyleProps {
    size: ComponentSize;
    variant: ButtonVariant;
    fill?: ButtonFill;
    iconOnly?: boolean;
    theme: GrafanaTheme2;
    fullWidth?: boolean;
    narrow?: boolean;
}
export declare const getButtonStyles: (props: StyleProps) => {
    button: string;
    disabled: string;
    img: string;
    icon: string | undefined;
    content: string;
};
export declare function getActiveButtonStyles(color: ThemeRichColor, fill: ButtonFill): {
    background: string;
};
export declare function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill): {
    background: string;
    color: string;
    border: string;
    '&:hover, &:focus': {
        background: string;
        borderColor: string;
        color: string;
        textDecoration?: undefined;
        outline?: undefined;
    };
    '&:active': {
        background: string;
    };
    '&:hover'?: undefined;
    '&:focus'?: undefined;
} | {
    background: string;
    color: string;
    border: string;
    '&:hover, &:focus': {
        background: string;
        textDecoration: string;
        outline: string;
        borderColor?: undefined;
        color?: undefined;
    };
    '&:active': {
        background: string;
    };
    '&:hover'?: undefined;
    '&:focus'?: undefined;
} | {
    background: string;
    color: string;
    border: string;
    '&:hover': {
        background: string;
        color: string;
        boxShadow: string;
        borderColor: string;
    };
    '&:focus': {
        background: string;
        color: string;
    };
    '&:active': {
        background: string;
    };
    '&:hover, &:focus'?: undefined;
};
export declare function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill): {
    background: string;
    color: string;
    border: string;
    '&:hover, &:focus': {
        background: string;
        borderColor: string;
        color: string;
        textDecoration?: undefined;
        outline?: undefined;
    };
    '&:active': {
        background: string;
    };
    '&:hover'?: undefined;
    '&:focus'?: undefined;
} | {
    background: string;
    color: string;
    border: string;
    '&:hover, &:focus': {
        background: string;
        textDecoration: string;
        outline: string;
        borderColor?: undefined;
        color?: undefined;
    };
    '&:active': {
        background: string;
    };
    '&:hover'?: undefined;
    '&:focus'?: undefined;
} | {
    background: string;
    color: string;
    border: string;
    '&:hover': {
        background: string;
        color: string;
        boxShadow: string;
        borderColor: string;
    };
    '&:focus': {
        background: string;
        color: string;
    };
    '&:active': {
        background: string;
    };
    '&:hover, &:focus'?: undefined;
};
export declare const clearButtonStyles: (theme: GrafanaTheme2) => string;
export declare const clearLinkButtonStyles: (theme: GrafanaTheme2) => string;
export {};