@grafana/ui on Grafana Labs

ActionMeta

Fri, 10 Apr 2026 22:13:30 +0000

ActionMeta type

Signature

export declare type ActionMeta = SelectActionMeta<{}>;

Import

import { ActionMeta } from '@grafana/ui';

addStackingConfig

Fri, 10 Apr 2026 22:13:30 +0000

commonOptionsBuilder.addStackingConfig() function

Signature

export declare function addStackingConfig(builder: FieldConfigEditorBuilder<GraphFieldConfig>, defaultConfig?: StackingConfig, category?: string[]): void;

Import

import { commonOptionsBuilder } from '@grafana/ui';
const { addStackingConfig } = commonOptionsBuilder;

Parameters

Parameter	Type	Description
builder	`FieldConfigEditorBuilder<GraphFieldConfig>`
defaultConfig	`StackingConfig`
category	`string[]`

Returns:

void

addTextSizeOptions

Fri, 10 Apr 2026 22:13:30 +0000

commonOptionsBuilder.addTextSizeOptions() function

Adds common text control options to a visualization options

Signature

export declare function addTextSizeOptions<T extends OptionsWithTextFormatting>(builder: PanelOptionsEditorBuilder<T>, withTitle?: boolean): void;

Import

import { commonOptionsBuilder } from '@grafana/ui';
const { addTextSizeOptions } = commonOptionsBuilder;

Parameters

Parameter	Type	Description
builder	`PanelOptionsEditorBuilder<T>`
withTitle	`boolean`

Returns:

void

addTooltipOptions

Fri, 10 Apr 2026 22:13:30 +0000

commonOptionsBuilder.addTooltipOptions() function

Signature

export declare function addTooltipOptions<T extends OptionsWithTooltip>(builder: PanelOptionsEditorBuilder<T>, singleOnly?: boolean): void;

Import

import { commonOptionsBuilder } from '@grafana/ui';
const { addTooltipOptions } = commonOptionsBuilder;

Parameters

Parameter	Type	Description
builder	`PanelOptionsEditorBuilder<T>`
singleOnly	`boolean`

Returns:

void

Alert

Fri, 10 Apr 2026 22:13:30 +0000

Alert variable

Signature

Alert: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>

Import

import { Alert } from '@grafana/ui';

AlertingSettings

Fri, 10 Apr 2026 22:13:30 +0000

AlertingSettings() function

Signature

export declare function AlertingSettings<T extends AlertingConfig>({ alertmanagerDataSources, options, onOptionsChange, }: Props<T>): JSX.Element;

Import

import { AlertingSettings } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ alertmanagerDataSources, options, onOptionsChange, }	`Props<T>`

Returns:

JSX.Element

AlertVariant

Fri, 10 Apr 2026 22:13:30 +0000

AlertVariant type

Signature

export declare type AlertVariant = 'success' | 'warning' | 'error' | 'info';

Import

import { AlertVariant } from '@grafana/ui';

AsyncMultiSelect

Fri, 10 Apr 2026 22:13:30 +0000

AsyncMultiSelect() function

Signature

export declare function AsyncMultiSelect<T>(props: AsyncMultiSelectProps<T>): JSX.Element;

Import

import { AsyncMultiSelect } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`AsyncMultiSelectProps<T>`

Returns:

JSX.Element

AsyncSelect

Fri, 10 Apr 2026 22:13:30 +0000

AsyncSelect() function

Signature

export declare function AsyncSelect<T>(props: AsyncSelectProps<T>): JSX.Element;

Import

import { AsyncSelect } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`AsyncSelectProps<T>`

Returns:

JSX.Element

Badge

Fri, 10 Apr 2026 22:13:30 +0000

Badge variable

Signature

Badge: React.NamedExoticComponent<BadgeProps>

Import

import { Badge } from '@grafana/ui';

BadgeColor

Fri, 10 Apr 2026 22:13:30 +0000

BadgeColor type

Signature

export declare type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple';

Import

import { BadgeColor } from '@grafana/ui';

BadgeProps

Fri, 10 Apr 2026 22:13:30 +0000

BadgeProps interface

Signature

export interface BadgeProps extends HTMLAttributes<HTMLDivElement>

Import

import { BadgeProps } from '@grafana/ui';

Properties

Property	Type	Description
color	`BadgeColor`
icon	`IconName`
text	`React.ReactNode`
tooltip	`string`

color property

Signature

color: BadgeColor;

icon property

Signature

icon?: IconName;

text property

Signature

text: React.ReactNode;

tooltip property

Signature

tooltip?: string;

BarGauge

Fri, 10 Apr 2026 22:13:30 +0000

BarGauge class

Signature

export declare class BarGauge extends PureComponent<Props>

Import

import { BarGauge } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
defaultProps	`static`	`Partial<Props>`

Methods

Method	Modifiers	Description
render()
renderBarAndValue()
renderBasicAndGradientBars()
renderRetroBars()

defaultProps property

Signature

static defaultProps: Partial<Props>;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

renderBarAndValue method

Signature

renderBarAndValue(): React.ReactNode;

Returns:

React.ReactNode

renderBasicAndGradientBars method

Signature

renderBasicAndGradientBars(): ReactNode;

Returns:

ReactNode

renderRetroBars method

Signature

renderRetroBars(): ReactNode;

Returns:

ReactNode

BarGaugeDisplayMode

Fri, 10 Apr 2026 22:13:30 +0000

BarGaugeDisplayMode enum

Signature

export declare enum BarGaugeDisplayMode

Import

import { BarGaugeDisplayMode } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Basic	`"basic"`
Gradient	`"gradient"`
Lcd	`"lcd"`

BigValue

Fri, 10 Apr 2026 22:13:30 +0000

BigValue class

Signature

export declare class BigValue extends PureComponent<Props>

Import

import { BigValue } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
defaultProps	`static`	`Partial<Props>`

Methods

Method	Modifiers	Description
render()

defaultProps property

Signature

static defaultProps: Partial<Props>;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

BigValueColorMode

Fri, 10 Apr 2026 22:13:30 +0000

BigValueColorMode enum

Signature

export declare enum BigValueColorMode

Import

import { BigValueColorMode } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Background	`"background"`
None	`"none"`
Value	`"value"`

BigValueGraphMode

Fri, 10 Apr 2026 22:13:30 +0000

BigValueGraphMode enum

Signature

export declare enum BigValueGraphMode

Import

import { BigValueGraphMode } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Area	`"area"`
Line	`"line"`
None	`"none"`

BigValueJustifyMode

Fri, 10 Apr 2026 22:13:30 +0000

BigValueJustifyMode enum

Signature

export declare enum BigValueJustifyMode

Import

import { BigValueJustifyMode } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Auto	`"auto"`
Center	`"center"`

BigValueTextMode

Fri, 10 Apr 2026 22:13:30 +0000

BigValueTextMode enum

Options for how the value & title are to be displayed

Signature

export declare enum BigValueTextMode

Import

import { BigValueTextMode } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Auto	`"auto"`
Name	`"name"`
None	`"none"`
Value	`"value"`
ValueAndName	`"value_and_name"`

BracesPlugin

Fri, 10 Apr 2026 22:13:30 +0000

BracesPlugin() function

Signature

export declare function BracesPlugin(): Plugin;

Import

import { BracesPlugin } from '@grafana/ui';

Returns:

Plugin

buildScaleKey

Fri, 10 Apr 2026 22:13:30 +0000

buildScaleKey() function

Signature

export declare function buildScaleKey(config: FieldConfig<GraphFieldConfig>): string;

Import

import { buildScaleKey } from '@grafana/ui';

Parameters

Parameter	Type	Description
config	`FieldConfig<GraphFieldConfig>`

Returns:

string

Button

Fri, 10 Apr 2026 22:13:30 +0000

Button variable

Signature

Button: React.ForwardRefExoticComponent<CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>

Import

import { Button } from '@grafana/ui';

ButtonCascader

Fri, 10 Apr 2026 22:13:30 +0000

ButtonCascader variable

Signature

ButtonCascader: React.FC<ButtonCascaderProps>

Import

import { ButtonCascader } from '@grafana/ui';

ButtonGroup

Fri, 10 Apr 2026 22:13:30 +0000

ButtonGroup variable

Signature

ButtonGroup: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>

Import

import { ButtonGroup } from '@grafana/ui';

ButtonProps

Fri, 10 Apr 2026 22:13:30 +0000

ButtonProps type

Signature

export declare type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;

Import

import { ButtonProps } from '@grafana/ui';

ButtonRow

Fri, 10 Apr 2026 22:13:30 +0000

Modal.ButtonRow variable

Signature

ButtonRow: typeof ModalButtonRow

Import

import { Modal } from '@grafana/ui';
const { ButtonRow } = Modal;

ButtonSelect

Fri, 10 Apr 2026 22:13:30 +0000

ButtonSelect variable

Signature

ButtonSelect: {
    <T>(props: Props<T>): JSX.Element;
    displayName: string;
}

Import

import { ButtonSelect } from '@grafana/ui';

ButtonVariant

Fri, 10 Apr 2026 22:13:30 +0000

ButtonVariant type

Signature

export declare type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';

Import

import { ButtonVariant } from '@grafana/ui';

calculateFontSize

Fri, 10 Apr 2026 22:13:30 +0000

calculateFontSize() function

calculateFontSize() function

Signature

export declare function calculateFontSize(text: string, width: number, height: number, lineHeight: number, maxSize?: number): number;

Import

import { calculateFontSize } from '@grafana/ui';

Parameters

Parameter	Type	Description
text	`string`
width	`number`
height	`number`
lineHeight	`number`
maxSize	`number`

Returns:

number

CallToActionCard

Fri, 10 Apr 2026 22:13:30 +0000

CallToActionCard variable

Signature

CallToActionCard: React.FunctionComponent<CallToActionCardProps>

Import

import { CallToActionCard } from '@grafana/ui';

Card

Fri, 10 Apr 2026 22:13:30 +0000

Card variable

Generic card component

Signature

Card: CardInterface

Import

import { Card } from '@grafana/ui';

cardChrome

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.cardChrome() function

Signature

export declare function cardChrome(theme: GrafanaTheme2): string;

Import

import { styleMixins } from '@grafana/ui';
const { cardChrome } = styleMixins;

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

string

CardContainer

Fri, 10 Apr 2026 22:13:30 +0000

CardContainer variable

Signature

CardContainer: ({ href, children, disableEvents, disableHover, className, ...props }: CardContainerProps) => JSX.Element

Import

import { CardContainer } from '@grafana/ui';

CardContainerProps

Fri, 10 Apr 2026 22:13:30 +0000

CardContainerProps interface

Signature

export interface CardContainerProps extends HTMLAttributes<HTMLOrSVGElement>, CardInnerProps

Import

import { CardContainerProps } from '@grafana/ui';

Properties

Property	Type	Description
className	`string`	Custom container styles
disableEvents	`boolean`	Disable pointer events for the Card, e.g. click events
disableHover	`boolean`	No style change on hover

className property

Custom container styles

Signature

className?: string;

disableEvents property

Disable pointer events for the Card, e.g. click events

Signature

disableEvents?: boolean;

disableHover property

No style change on hover

Signature

disableHover?: boolean;

CardProps

Fri, 10 Apr 2026 22:13:30 +0000

CardProps interface

Signature

export interface Props extends Omit<CardContainerProps, 'disableEvents' | 'disableHover'>

Import

import { CardProps } from '@grafana/ui';

Properties

Property	Type	Description
description	`string`	Card description text
disabled	`boolean`	Indicates if the card and all its actions can be interacted with
heading	`ReactNode`	Main heading for the Card *
href	`string`	Link to redirect to on card click. If provided, the Card inner content will be rendered inside `a`
onClick	`() => void`	On click handler for the Card

description property

Card description text

Signature

description?: string;

disabled property

Indicates if the card and all its actions can be interacted with

Signature

disabled?: boolean;

heading property

Main heading for the Card *

Signature

heading: ReactNode;

href property

Link to redirect to on card click. If provided, the Card inner content will be rendered inside a

Signature

href?: string;

onClick property

On click handler for the Card

Signature

onClick?: () => void;

Cascader

Fri, 10 Apr 2026 22:13:30 +0000

Cascader class

Signature

export declare class Cascader extends React.PureComponent<CascaderProps, CascaderState>

Import

import { Cascader } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `Cascader` class

Properties

Property	Modifiers	Type
defaultProps	`static`	`{` `changeOnSelect: boolean;` `}`
flattenOptions		`(options: CascaderOption[], optionPath?: CascaderOption[]) => SelectableValue<string[]>[]`
getSearchableOptions		`import("memoize-one").MemoizedFn<(options: CascaderOption[]) => SelectableValue<string[]>[]>`
onBlur		`() => void`
onBlurCascade		`() => void`
onChange		`(value: string[], selectedOptions: CascaderOption[]) => void`
onCreateOption		`(value: string) => void`
onInputKeyDown		`(e: React.KeyboardEvent<HTMLInputElement>) => void`
onSelect		`(obj: SelectableValue<string[]>) => void`

Methods

Method	Modifiers	Description
render()
setInitialValue(searchableOptions, initValue)

constructor(props)

Constructs a new instance of the Cascader class

Signature

constructor(props: CascaderProps);

Parameters

Parameter	Type	Description
props	`CascaderProps`

defaultProps property

Signature

static defaultProps: {
        changeOnSelect: boolean;
    };

flattenOptions property

Signature

flattenOptions: (options: CascaderOption[], optionPath?: CascaderOption[]) => SelectableValue<string[]>[];

getSearchableOptions property

Signature

getSearchableOptions: import("memoize-one").MemoizedFn<(options: CascaderOption[]) => SelectableValue<string[]>[]>;

onBlur property

Signature

onBlur: () => void;

onBlurCascade property

Signature

onBlurCascade: () => void;

onChange property

Signature

onChange: (value: string[], selectedOptions: CascaderOption[]) => void;

onCreateOption property

Signature

onCreateOption: (value: string) => void;

onInputKeyDown property

Signature

onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;

onSelect property

Signature

onSelect: (obj: SelectableValue<string[]>) => void;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

setInitialValue method

Signature

setInitialValue(searchableOptions: Array<SelectableValue<string[]>>, initValue?: string): {
        rcValue: string[];
        activeLabel: any;
    };

Parameters

Parameter	Type	Description
searchableOptions	`Array<SelectableValue<string[]>>`
initValue	`string`

Returns:

{ rcValue: string[]; activeLabel: any; }

CascaderOption

Fri, 10 Apr 2026 22:13:30 +0000

CascaderOption interface

Signature

export interface CascaderOption

Import

import { CascaderOption } from '@grafana/ui';

Properties

Property	Type	Description
children	`CascaderOption[]`	Children will be shown in a submenu. Use ‘items’ instead, as ‘children’ exist to ensure backwards compatibility.
disabled	`boolean`
items	`CascaderOption[]`	Items will be just flattened into the main list of items recursively.
label	`string`	The label to display in the UI
title	`string`	Avoid using
value	`any`	The value used under the hood

children property

Children will be shown in a submenu. Use ‘items’ instead, as ‘children’ exist to ensure backwards compatibility.

Signature

children?: CascaderOption[];

disabled property

Signature

disabled?: boolean;

items property

Items will be just flattened into the main list of items recursively.

Signature

items?: CascaderOption[];

label property

The label to display in the UI

Signature

label: string;

title property

Avoid using

Signature

title?: string;

value property

The value used under the hood

Signature

value: any;

CertificationKey

Fri, 10 Apr 2026 22:13:30 +0000

CertificationKey variable

Signature

CertificationKey: FC<Props>

Import

import { CertificationKey } from '@grafana/ui';

Checkbox

Fri, 10 Apr 2026 22:13:30 +0000

Checkbox variable

Signature

Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "name" | "min" | "value" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "action" | "disabled" | "selected" | "shape" | "description" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

import { Checkbox } from '@grafana/ui';

ClearPlugin

Fri, 10 Apr 2026 22:13:30 +0000

ClearPlugin() function

Signature

export declare function ClearPlugin(): Plugin;

Import

import { ClearPlugin } from '@grafana/ui';

Returns:

Plugin

ClickOutsideWrapper

Fri, 10 Apr 2026 22:13:30 +0000

ClickOutsideWrapper class

Signature

export declare class ClickOutsideWrapper extends PureComponent<Props, State>

Import

import { ClickOutsideWrapper } from '@grafana/ui';

Properties

Property	Modifiers	Type
defaultProps	`static`	`{` `includeButtonPress: boolean;` `parent: Window & typeof globalThis;` `useCapture: boolean;` `}`
myRef		`React.RefObject<HTMLDivElement>`
onOutsideClick		`(event: any) => void`
state		`{` `hasEventListener: boolean;` `}`

Methods

Method	Modifiers	Description
componentDidMount()
componentWillUnmount()
render()

defaultProps property

Signature

static defaultProps: {
        includeButtonPress: boolean;
        parent: Window & typeof globalThis;
        useCapture: boolean;
    };

myRef property

Signature

myRef: React.RefObject<HTMLDivElement>;

onOutsideClick property

Signature

onOutsideClick: (event: any) => void;

state property

Signature

state: {
        hasEventListener: boolean;
    };

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ClipboardButton

Fri, 10 Apr 2026 22:13:30 +0000

ClipboardButton class

Signature

export declare class ClipboardButton extends PureComponent<Props>

Import

import { ClipboardButton } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
setRef		`(elem: HTMLButtonElement) => void`

Methods

Method	Modifiers	Description
componentDidMount()
componentWillUnmount()
render()

setRef property

Signature

setRef: (elem: HTMLButtonElement) => void;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ClipboardPlugin

Fri, 10 Apr 2026 22:13:30 +0000

ClipboardPlugin() function

Signature

export declare function ClipboardPlugin(): Plugin;

Import

import { ClipboardPlugin } from '@grafana/ui';

Returns:

Plugin

CodeEditor

Fri, 10 Apr 2026 22:13:30 +0000

CodeEditor variable

Signature

CodeEditor: React.FunctionComponent<{
    value: string;
    onBlur?: import("./types").CodeEditorChangeHandler | undefined;
    readOnly?: boolean | undefined;
    height?: string | number | undefined;
    width?: string | number | undefined;
    language: string;
    showMiniMap?: boolean | undefined;
    showLineNumbers?: boolean | undefined;
    monacoOptions?: import("./types").MonacoOptionsWithGrafanaDefaults | undefined;
    onBeforeEditorMount?: ((monaco: typeof monacoType) => void) | undefined;
    onEditorDidMount?: ((editor: monacoType.editor.IStandaloneCodeEditor, monaco: typeof monacoType) => void) | undefined;
    onSave?: import("./types").CodeEditorChangeHandler | undefined;
    getSuggestions?: import("./types").CodeEditorSuggestionProvider | undefined;
}>

Import

import { CodeEditor } from '@grafana/ui';

CodeEditorMonacoOptions

Fri, 10 Apr 2026 22:13:30 +0000

CodeEditorMonacoOptions type

Signature

export declare type MonacoOptions = MonacoOptionsWithGrafanaDefaults;

Import

import { CodeEditorMonacoOptions } from '@grafana/ui';

CollapsableSection

Fri, 10 Apr 2026 22:13:30 +0000

CollapsableSection variable

Signature

CollapsableSection: FC<Props>

Import

import { CollapsableSection } from '@grafana/ui';

Collapse

Fri, 10 Apr 2026 22:13:30 +0000

Collapse variable

Signature

Collapse: FunctionComponent<Props>

Import

import { Collapse } from '@grafana/ui';

ColorPicker

Fri, 10 Apr 2026 22:13:30 +0000

ColorPicker variable

Signature

ColorPicker: React.FunctionComponent<{
    color: string;
    onChange: ColorPickerChangeHandler;
    children?: ColorPickerTriggerRenderer | undefined;
    onColorChange?: ColorPickerChangeHandler | undefined;
    enableNamedColors?: boolean | undefined;
}>

Import

import { ColorPicker } from '@grafana/ui';

colors

Fri, 10 Apr 2026 22:13:30 +0000

colors variable

Signature

colors: string[]

Import

import { colors } from '@grafana/ui';

commonOptionsBuilder

Fri, 10 Apr 2026 22:13:30 +0000

commonOptionsBuilder namespace

commonOptionsBuilder namespace

Import

import { commonOptionsBuilder } from '@grafana/ui';

Functions

Function	Description
addStackingConfig(builder, defaultConfig, category)
addTextSizeOptions(builder, withTitle)	Adds common text control options to a visualization options
addTooltipOptions(builder, singleOnly)

Variables

Variable	Description
StackingEditor

CompletionItem

Fri, 10 Apr 2026 22:13:30 +0000

CompletionItem interface

Signature

export interface CompletionItem

Import

import { CompletionItem } from '@grafana/ui';

Properties

Property	Type	Description
deleteBackwards	`number`	Delete number of characters before the caret position, by default the letters from the beginning of the word.
detail	`string`	A human-readable string with additional information about this item, like type or symbol information.
documentation	`string`	A human-readable string, can be Markdown, that represents a doc-comment.
filterText	`string`	A string that should be used when filtering a set of completion items. When `falsy` the `label` is used.
insertText	`string`	A string or snippet that should be inserted in a document when selecting this completion. When `falsy` the `label` is used.
kind	`CompletionItemKind \| string`	The kind of this completion item. An icon is chosen by the editor based on the kind.
label	`string`	The label of this completion item. By default this is also the text that is inserted when selecting this completion.
move	`number`	Number of steps to move after the insertion, can be negative.
sortText	`string`	A string that should be used when comparing this item with other items. When `falsy` the `label` is used.

deleteBackwards property

Delete number of characters before the caret position, by default the letters from the beginning of the word.

Signature

deleteBackwards?: number;

detail property

A human-readable string with additional information about this item, like type or symbol information.

Signature

detail?: string;

documentation property

A human-readable string, can be Markdown, that represents a doc-comment.

Signature

documentation?: string;

filterText property

A string that should be used when filtering a set of completion items. When falsy the label is used.

Signature

filterText?: string;

insertText property

A string or snippet that should be inserted in a document when selecting this completion. When falsy the label is used.

Signature

insertText?: string;

kind property

The kind of this completion item. An icon is chosen by the editor based on the kind.

Signature

kind?: CompletionItemKind | string;

label property

The label of this completion item. By default this is also the text that is inserted when selecting this completion.

Signature

label: string;

move property

Number of steps to move after the insertion, can be negative.

Signature

move?: number;

sortText property

A string that should be used when comparing this item with other items. When falsy the label is used.

Signature

sortText?: string;

CompletionItemGroup

Fri, 10 Apr 2026 22:13:30 +0000

CompletionItemGroup interface

Signature

export interface CompletionItemGroup

Import

import { CompletionItemGroup } from '@grafana/ui';

Properties

Property	Type	Description
items	`CompletionItem[]`	List of suggestions of this group.
label	`string`	Label that will be displayed for all entries of this group.
prefixMatch	`boolean`	If true, match only by prefix (and not mid-word).
skipFilter	`boolean`	If true, do not filter items in this group based on the search.
skipSort	`boolean`	If true, do not sort items.

items property

List of suggestions of this group.

Signature

items: CompletionItem[];

label property

Label that will be displayed for all entries of this group.

Signature

label: string;

prefixMatch property

If true, match only by prefix (and not mid-word).

Signature

prefixMatch?: boolean;

skipFilter property

If true, do not filter items in this group based on the search.

Signature

skipFilter?: boolean;

skipSort property

If true, do not sort items.

Signature

skipSort?: boolean;

CompletionItemKind

Fri, 10 Apr 2026 22:13:30 +0000

CompletionItemKind enum

Signature

export declare enum CompletionItemKind

Import

import { CompletionItemKind } from '@grafana/ui';

Enumeration Members

Member	Value	Description
GroupTitle	`"GroupTitle"`

ConfirmButton

Fri, 10 Apr 2026 22:13:30 +0000

ConfirmButton variable

Signature

ConfirmButton: React.FunctionComponent<{
    disabled?: boolean | undefined;
    size?: ComponentSize | undefined;
    className?: string | undefined;
    onClick?: (() => void) | undefined;
    autoFocus?: boolean | undefined;
    onConfirm: () => void;
    confirmText?: string | undefined;
    confirmVariant?: ButtonVariant | undefined;
    closeOnConfirm?: boolean | undefined;
    onCancel?: (() => void) | undefined;
}>

Import

import { ConfirmButton } from '@grafana/ui';

ConfirmModal

Fri, 10 Apr 2026 22:13:30 +0000

ConfirmModal variable

Signature

ConfirmModal: ({ isOpen, title, body, description, confirmText, confirmationText, dismissText, alternativeText, icon, onConfirm, onDismiss, onAlternative, }: ConfirmModalProps) => JSX.Element

Import

import { ConfirmModal } from '@grafana/ui';

ConfirmModalProps

Fri, 10 Apr 2026 22:13:30 +0000

ConfirmModalProps interface

Signature

export interface ConfirmModalProps

Import

import { ConfirmModalProps } from '@grafana/ui';

Properties

Property	Type	Description
alternativeText	`string`	Text for alternative button
body	`React.ReactNode`	Modal content
confirmationText	`string`	Text user needs to fill in before confirming
confirmText	`string`	Text for confirm button
description	`React.ReactNode`	Modal description
dismissText	`string`	Text for dismiss button
icon	`IconName`	Icon for the modal header
isOpen	`boolean`	Toggle modal’s open/closed state
title	`string`	Title for the modal header

Methods

Method	Description
onAlternative()	Alternative action callback
onConfirm()	Confirm action callback
onDismiss()	Dismiss action callback

alternativeText property

Text for alternative button

Signature

alternativeText?: string;

body property

Modal content

Signature

body: React.ReactNode;

confirmationText property

Text user needs to fill in before confirming

Signature

confirmationText?: string;

confirmText property

Text for confirm button

Signature

confirmText: string;

description property

Modal description

Signature

description?: React.ReactNode;

dismissText property

Text for dismiss button

Signature

dismissText?: string;

icon property

Icon for the modal header

Signature

icon?: IconName;

isOpen property

Toggle modal’s open/closed state

Signature

isOpen: boolean;

title property

Title for the modal header

Signature

title: string;

onAlternative method

Alternative action callback

Signature

onAlternative?(): void;

Returns:

void

onConfirm method

Confirm action callback

Signature

onConfirm(): void;

Returns:

void

onDismiss method

Dismiss action callback

Signature

onDismiss(): void;

Returns:

void

Container

Fri, 10 Apr 2026 22:13:30 +0000

Container variable

Signature

Container: React.FC<ContainerProps>

Import

import { Container } from '@grafana/ui';

ContextMenu

Fri, 10 Apr 2026 22:13:30 +0000

ContextMenu variable

Signature

ContextMenu: React.FC<ContextMenuProps>

Import

import { ContextMenu } from '@grafana/ui';

ContextMenuProps

Fri, 10 Apr 2026 22:13:30 +0000

ContextMenuProps interface

Signature

export interface ContextMenuProps

Import

import { ContextMenuProps } from '@grafana/ui';

Properties

Property	Type	Description
onClose	`() => void`	Callback for closing the menu
renderHeader	`() => React.ReactNode`	A function that returns header element
renderMenuItems	`() => React.ReactNode`	RenderProp function that returns menu items to display
x	`number`	Starting horizontal position for the menu
y	`number`	Starting vertical position for the menu

onClose property

Callback for closing the menu

Signature

onClose?: () => void;

renderHeader property

A function that returns header element

Signature

renderHeader?: () => React.ReactNode;

renderMenuItems property

RenderProp function that returns menu items to display

Signature

renderMenuItems?: () => React.ReactNode;

x property

Starting horizontal position for the menu

Signature

x: number;

y property

Starting vertical position for the menu

Signature

y: number;

ControlComponent

Fri, 10 Apr 2026 22:13:30 +0000

ControlComponent type

Signature

export declare type ControlComponent<T> = React.ComponentType<CustomControlProps<T>>;

Import

import { ControlComponent } from '@grafana/ui';

ControlledCollapse

Fri, 10 Apr 2026 22:13:30 +0000

ControlledCollapse variable

Signature

ControlledCollapse: FunctionComponent<Props>

Import

import { ControlledCollapse } from '@grafana/ui';

convertOldAngularValueMapping

Fri, 10 Apr 2026 22:13:30 +0000

convertOldAngularValueMapping() function

Signature

export declare function convertOldAngularValueMapping(panel: any): ValueMapping[];

Import

import { convertOldAngularValueMapping } from '@grafana/ui';

Parameters

Parameter	Type	Description
panel	`any`

Returns:

ValueMapping[]

Counter

Fri, 10 Apr 2026 22:13:30 +0000

Counter variable

Signature

Counter: FC<CounterProps>

Import

import { Counter } from '@grafana/ui';

CustomControlProps

Fri, 10 Apr 2026 22:13:30 +0000

CustomControlProps interface

Signature

export interface CustomControlProps<T>

Import

import { CustomControlProps } from '@grafana/ui';

Properties

Property	Type	Description
disabled	`boolean`
invalid	`boolean`
isOpen	`boolean`
onBlur	`() => void`	onBlur will be automatically passed to custom control closing the menu on element blur
onClick	`() => void`	onClick will be automatically passed to custom control allowing menu toggle
ref	`React.Ref<any>`
value	`SelectableValue<T>`	Currently selected value

disabled property

Signature

disabled: boolean;

invalid property

Signature

invalid: boolean;

isOpen property

Signature

isOpen: boolean;

onBlur property

onBlur will be automatically passed to custom control closing the menu on element blur

Signature

onBlur: () => void;

onClick property

onClick will be automatically passed to custom control allowing menu toggle

Signature

onClick: () => void;

ref property

Signature

ref: React.Ref<any>;

value property

Currently selected value

Signature

value?: SelectableValue<T>;

CustomScrollbar

Fri, 10 Apr 2026 22:13:30 +0000

CustomScrollbar variable

Wraps component into component from react-custom-scrollbars

Signature

CustomScrollbar: FC<Props>

Import

import { CustomScrollbar } from '@grafana/ui';

DataLinkInput

Fri, 10 Apr 2026 22:13:30 +0000

DataLinkInput variable

Signature

DataLinkInput: React.FC<DataLinkInputProps>

Import

import { DataLinkInput } from '@grafana/ui';

DataLinksContextMenu

Fri, 10 Apr 2026 22:13:30 +0000

DataLinksContextMenu variable

Signature

DataLinksContextMenu: React.FC<DataLinksContextMenuProps>

Import

import { DataLinksContextMenu } from '@grafana/ui';

DataLinksInlineEditor

Fri, 10 Apr 2026 22:13:30 +0000

DataLinksInlineEditor variable

Signature

DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps>

Import

import { DataLinksInlineEditor } from '@grafana/ui';

DataSourceHttpSettings

Fri, 10 Apr 2026 22:13:30 +0000

DataSourceHttpSettings variable

Signature

DataSourceHttpSettings: React.FC<HttpSettingsProps>

Import

import { DataSourceHttpSettings } from '@grafana/ui';

DatePicker

Fri, 10 Apr 2026 22:13:30 +0000

DatePicker variable

Signature

DatePicker: React.NamedExoticComponent<DatePickerProps>

Import

import { DatePicker } from '@grafana/ui';

DatePickerProps

Fri, 10 Apr 2026 22:13:30 +0000

DatePickerProps interface

Signature

export interface DatePickerProps

Import

import { DatePickerProps } from '@grafana/ui';

Properties

Property	Type	Description
isOpen	`boolean`
onChange	`(value: Date) => void`
onClose	`() => void`
value	`Date`

isOpen property

Signature

isOpen?: boolean;

onChange property

Signature

onChange: (value: Date) => void;

onClose property

Signature

onClose: () => void;

value property

Signature

value?: Date;

DatePickerWithInput

Fri, 10 Apr 2026 22:13:30 +0000

DatePickerWithInput variable

Signature

DatePickerWithInput: ({ value, onChange, closeOnSelect, placeholder, ...rest }: DatePickerWithInputProps) => JSX.Element

Import

import { DatePickerWithInput } from '@grafana/ui';

DatePickerWithInputProps

Fri, 10 Apr 2026 22:13:30 +0000

DatePickerWithInputProps interface

Signature

export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'value' | 'onChange'>

Import

import { DatePickerWithInputProps } from '@grafana/ui';

Properties

Property	Type	Description
closeOnSelect	`boolean`	Hide the calendar when date is selected
onChange	`(value: Date \| string) => void`
placeholder	`string`
value	`Date \| string`

closeOnSelect property

Hide the calendar when date is selected

Signature

closeOnSelect?: boolean;

onChange property

Signature

onChange: (value: Date | string) => void;

placeholder property

Signature

placeholder?: string;

value property

Signature

value?: Date | string;

DateTimePicker

Fri, 10 Apr 2026 22:13:30 +0000

DateTimePicker variable

Signature

DateTimePicker: FC<Props>

Import

import { DateTimePicker } from '@grafana/ui';

defaultIntervals

Fri, 10 Apr 2026 22:13:30 +0000

defaultIntervals variable

Signature

defaultIntervals: string[]

Import

import { defaultIntervals } from '@grafana/ui';

DeleteButton

Fri, 10 Apr 2026 22:13:30 +0000

DeleteButton variable

Signature

DeleteButton: FC<Props>

Import

import { DeleteButton } from '@grafana/ui';

displayName

Fri, 10 Apr 2026 22:13:30 +0000

RadioButtonGroup.displayName variable

Signature

displayName: string

Import

import { RadioButtonGroup } from '@grafana/ui';
const { displayName } = RadioButtonGroup;

displayName

Fri, 10 Apr 2026 22:13:30 +0000

VizLegend.displayName variable

Signature

displayName: string

Import

import { VizLegend } from '@grafana/ui';
const { displayName } = VizLegend;

DOMUtil

Fri, 10 Apr 2026 22:13:30 +0000

DOMUtil namespace

DOMUtil namespace

Import

import { DOMUtil } from '@grafana/ui';

Functions

Function	Description
getNextCharacter(global)
getPreviousCousin(node, selector)

Drawer

Fri, 10 Apr 2026 22:13:30 +0000

Drawer variable

Signature

Drawer: FC<Props>

Import

import { Drawer } from '@grafana/ui';

DropdownIndicator

Fri, 10 Apr 2026 22:13:30 +0000

DropdownIndicator variable

Signature

DropdownIndicator: React.FC<DropdownIndicatorProps>

Import

import { DropdownIndicator } from '@grafana/ui';

DropzoneFile

Fri, 10 Apr 2026 22:13:30 +0000

DropzoneFile interface

Signature

export interface DropzoneFile

Import

import { DropzoneFile } from '@grafana/ui';

Properties

Property	Type	Description
abortUpload	`() => void`
error	`DOMException \| null`
file	`File`
id	`string`
progress	`number`
retryUpload	`() => void`

abortUpload property

Signature

abortUpload?: () => void;

error property

Signature

error: DOMException | null;

file property

Signature

file: File;

id property

Signature

id: string;

progress property

Signature

progress?: number;

retryUpload property

Signature

retryUpload?: () => void;

EmotionPerfTest

Fri, 10 Apr 2026 22:13:30 +0000

EmotionPerfTest() function

Signature

export declare function EmotionPerfTest(): import("@emotion/react/jsx-runtime").JSX.Element;

Import

import { EmotionPerfTest } from '@grafana/ui';

Returns:

import("@emotion/react/jsx-runtime").JSX.Element

EmptySearchResult

Fri, 10 Apr 2026 22:13:30 +0000

EmptySearchResult variable

Signature

EmptySearchResult: FC<Props>

Import

import { EmptySearchResult } from '@grafana/ui';

ErrorBoundary

Fri, 10 Apr 2026 22:13:30 +0000

ErrorBoundary class

Signature

export declare class ErrorBoundary extends PureComponent<Props, State>

Import

import { ErrorBoundary } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
state		`State`

Methods

Method	Modifiers	Description
componentDidCatch(error, errorInfo)
componentDidUpdate(prevProps)
render()

state property

Signature

readonly state: State;

componentDidCatch method

Signature

componentDidCatch(error: Error, errorInfo: ErrorInfo): void;

Parameters

Parameter	Type	Description
error	`Error`
errorInfo	`ErrorInfo`

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: Props): void;

Parameters

Parameter	Type	Description
prevProps	`Props`

Returns:

void

render method

Signature

render(): React.ReactNode;

Returns:

React.ReactNode

ErrorBoundaryAlert

Fri, 10 Apr 2026 22:13:30 +0000

ErrorBoundaryAlert class

Signature

export declare class ErrorBoundaryAlert extends PureComponent<ErrorBoundaryAlertProps>

Import

import { ErrorBoundaryAlert } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
defaultProps	`static`	`Partial<ErrorBoundaryAlertProps>`

Methods

Method	Modifiers	Description
render()

defaultProps property

Signature

static defaultProps: Partial<ErrorBoundaryAlertProps>;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ErrorBoundaryAlertProps

Fri, 10 Apr 2026 22:13:30 +0000

ErrorBoundaryAlertProps interface

Props for the ErrorBoundaryAlert component

Signature

export interface ErrorBoundaryAlertProps

Import

import { ErrorBoundaryAlertProps } from '@grafana/ui';

Properties

Property	Type	Description
children	`ReactNode`	Component to be wrapped with an error boundary
dependencies	`any[]`	Will re-render children after error if recover values changes
style	`‘page’ \| ‘alertbox’`	‘page’ will render full page error with stacktrace. ‘alertbox’ will render an . Default ‘alertbox’
title	`string`	Title for the error boundary alert

children property

Component to be wrapped with an error boundary

Signature

children: ReactNode;

dependencies property

Will re-render children after error if recover values changes

Signature

dependencies?: any[];

style property

‘page’ will render full page error with stacktrace. ‘alertbox’ will render an . Default ‘alertbox’

Signature

style?: 'page' | 'alertbox';

title property

Title for the error boundary alert

Signature

title?: string;

ErrorWithStack

Fri, 10 Apr 2026 22:13:30 +0000

ErrorWithStack variable

Signature

ErrorWithStack: FunctionComponent<Props>

Import

import { ErrorWithStack } from '@grafana/ui';

EventsCanvas

Fri, 10 Apr 2026 22:13:30 +0000

EventsCanvas() function

Signature

export declare function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config }: EventsCanvasProps): JSX.Element | null;

Import

import { EventsCanvas } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ id, events, renderEventMarker, mapEventToXYCoords, config }	`EventsCanvasProps`

Returns:

JSX.Element | null

EventsWithValidation

Fri, 10 Apr 2026 22:13:30 +0000

EventsWithValidation enum

Signature

export declare enum EventsWithValidation

Import

import { EventsWithValidation } from '@grafana/ui';

Enumeration Members

Member	Value	Description
onBlur	`"onBlur"`
onChange	`"onChange"`
onFocus	`"onFocus"`

FadeTransition

Fri, 10 Apr 2026 22:13:30 +0000

FadeTransition() function

Signature

export declare function FadeTransition(props: Props): JSX.Element;

Import

import { FadeTransition } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`Props`

Returns:

JSX.Element

FeatureBadge

Fri, 10 Apr 2026 22:13:30 +0000

FeatureBadge variable

Signature

FeatureBadge: React.FC<FeatureBadgeProps>

Import

import { FeatureBadge } from '@grafana/ui';

FeatureInfoBox

Fri, 10 Apr 2026 22:13:30 +0000

FeatureInfoBox variable

Signature

FeatureInfoBox: React.MemoExoticComponent<React.ForwardRefExoticComponent<FeatureInfoBoxProps & React.RefAttributes<HTMLDivElement>>>

Import

import { FeatureInfoBox } from '@grafana/ui';

Field

Fri, 10 Apr 2026 22:13:30 +0000

Field variable

Signature

Field: React.FC<FieldProps>

Import

import { Field } from '@grafana/ui';

FieldArray

Fri, 10 Apr 2026 22:13:30 +0000

FieldArray variable

Signature

FieldArray: FC<FieldArrayProps>

Import

import { FieldArray } from '@grafana/ui';

FieldArrayApi

Fri, 10 Apr 2026 22:13:30 +0000

FieldArrayApi interface

Signature

export interface FieldArrayApi

Import

import { FieldArrayApi } from '@grafana/ui';

Properties

Property	Type	Description
append	`(value: FieldArrayValue) => void`
fields	`Array<Record<string, any>>`
insert	`(index: number, value: FieldArrayValue) => void`
move	`(from: number, to: number) => void`
prepend	`(value: FieldArrayValue) => void`
remove	`(index?: number \| number[]) => void`
swap	`(indexA: number, indexB: number) => void`

append property

Signature

append: (value: FieldArrayValue) => void;

fields property

Signature

fields: Array<Record<string, any>>;

insert property

Signature

insert: (index: number, value: FieldArrayValue) => void;

move property

Signature

move: (from: number, to: number) => void;

prepend property

Signature

prepend: (value: FieldArrayValue) => void;

remove property

Signature

remove: (index?: number | number[]) => void;

swap property

Signature

swap: (indexA: number, indexB: number) => void;

fieldMatchersUI

Fri, 10 Apr 2026 22:13:30 +0000

fieldMatchersUI variable

Signature

fieldMatchersUI: Registry<FieldMatcherUIRegistryItem<any>>

Import

import { fieldMatchersUI } from '@grafana/ui';

FieldSet

Fri, 10 Apr 2026 22:13:30 +0000

FieldSet variable

Signature

FieldSet: FC<Props>

Import

import { FieldSet } from '@grafana/ui';

FieldValidationMessage

Fri, 10 Apr 2026 22:13:30 +0000

FieldValidationMessage variable

Signature

FieldValidationMessage: React.FC<FieldValidationMessageProps>

Import

import { FieldValidationMessage } from '@grafana/ui';

FileDropzone

Fri, 10 Apr 2026 22:13:30 +0000

FileDropzone() function

Signature

export declare function FileDropzone({ options, children, readAs, onLoad, fileListRenderer }: FileDropzoneProps): JSX.Element;

Import

import { FileDropzone } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ options, children, readAs, onLoad, fileListRenderer }	`FileDropzoneProps`

Returns:

JSX.Element

FileDropzoneDefaultChildren

Fri, 10 Apr 2026 22:13:30 +0000

FileDropzoneDefaultChildren() function

Signature

export declare function FileDropzoneDefaultChildren({ primaryText, secondaryText, }: {
    primaryText?: string | undefined;
    secondaryText?: string | undefined;
}): JSX.Element;

Import

import { FileDropzoneDefaultChildren } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ primaryText, secondaryText, }	`{` `primaryText?: string \| undefined;` `secondaryText?: string \| undefined;` `}`

Returns:

JSX.Element

FileDropzoneProps

Fri, 10 Apr 2026 22:13:30 +0000

FileDropzoneProps interface

Signature

export interface FileDropzoneProps

Import

import { FileDropzoneProps } from '@grafana/ui';

Properties

Property	Type	Description
children	`ReactNode`	Use the children property to have custom dropzone view.
fileListRenderer	`(file: DropzoneFile, removeFile: (file: DropzoneFile) => void) => ReactNode`	The fileListRenderer property can be used to overwrite the list of files. To not to show any list return null in the function.
onLoad	`(result: string \| ArrayBuffer \| null) => void`	Use the onLoad function to get the result from FileReader.
options	`DropzoneOptions`	Use this property to override the default behaviour for the react-dropzone options. { maxSize: Infinity, minSize: 0, multiple: true, maxFiles: 0, }
readAs	`‘readAsArrayBuffer’ \| ‘readAsText’ \| ‘readAsBinaryString’ \| ‘readAsDataURL’`	Use this to change the FileReader’s read.

children property

Use the children property to have custom dropzone view.

Signature

children?: ReactNode;

fileListRenderer property

The fileListRenderer property can be used to overwrite the list of files. To not to show any list return null in the function.

Signature

fileListRenderer?: (file: DropzoneFile, removeFile: (file: DropzoneFile) => void) => ReactNode;

onLoad property

Use the onLoad function to get the result from FileReader.

Signature

onLoad?: (result: string | ArrayBuffer | null) => void;

options property

Use this property to override the default behaviour for the react-dropzone options. { maxSize: Infinity, minSize: 0, multiple: true, maxFiles: 0, }

Signature

options?: DropzoneOptions;

readAs property

Use this to change the FileReader’s read.

Signature

readAs?: 'readAsArrayBuffer' | 'readAsText' | 'readAsBinaryString' | 'readAsDataURL';

FileListItem

Fri, 10 Apr 2026 22:13:30 +0000

FileListItem() function

Signature

export declare function FileListItem({ file: customFile, removeFile }: FileListItemProps): JSX.Element;

Import

import { FileListItem } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ file: customFile, removeFile }	`FileListItemProps`

Returns:

JSX.Element

FileListItemProps

Fri, 10 Apr 2026 22:13:30 +0000

FileListItemProps interface

Signature

export interface FileListItemProps

Import

import { FileListItemProps } from '@grafana/ui';

Properties

Property	Type	Description
file	`DropzoneFile`
removeFile	`(file: DropzoneFile) => void`

file property

Signature

file: DropzoneFile;

removeFile property

Signature

removeFile?: (file: DropzoneFile) => void;

FileUpload

Fri, 10 Apr 2026 22:13:30 +0000

FileUpload variable

Signature

FileUpload: FC<Props>

Import

import { FileUpload } from '@grafana/ui';

FilterInput

Fri, 10 Apr 2026 22:13:30 +0000

FilterInput variable

Signature

FilterInput: React.ForwardRefExoticComponent<Pick<Props, "name" | "min" | "value" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "action" | "disabled" | "selected" | "shape" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

import { FilterInput } from '@grafana/ui';

FilterPill

Fri, 10 Apr 2026 22:13:30 +0000

FilterPill variable

Signature

FilterPill: React.FC<FilterPillProps>

Import

import { FilterPill } from '@grafana/ui';

focusCss

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.focusCss variable

Signature

focusCss: (theme: GrafanaTheme) => string

Import

import { styleMixins } from '@grafana/ui';
const { focusCss } = styleMixins;

Form

Fri, 10 Apr 2026 22:13:30 +0000

Form() function

Signature

export declare function Form<T>({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, ...htmlProps }: FormProps<T>): JSX.Element;

Import

import { Form } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, …htmlProps }	`FormProps<T>`

Returns:

JSX.Element

FormAPI

Fri, 10 Apr 2026 22:13:30 +0000

FormAPI type

Signature

export declare type FormAPI<T> = Omit<UseFormReturn<T>, 'trigger' | 'handleSubmit'> & {
    errors: FieldErrors<T>;
};

Import

import { FormAPI } from '@grafana/ui';

FormattedValueDisplay

Fri, 10 Apr 2026 22:13:30 +0000

FormattedValueDisplay variable

Signature

FormattedValueDisplay: FC<Props>

Import

import { FormattedValueDisplay } from '@grafana/ui';

FormInputSize

Fri, 10 Apr 2026 22:13:30 +0000

FormInputSize type

Signature

export declare type FormInputSize = 'sm' | 'md' | 'lg' | 'auto';

Import

import { FormInputSize } from '@grafana/ui';

FullWidthButtonContainer

Fri, 10 Apr 2026 22:13:30 +0000

FullWidthButtonContainer variable

Signature

FullWidthButtonContainer: FC<Props>

Import

import { FullWidthButtonContainer } from '@grafana/ui';

Gauge

Fri, 10 Apr 2026 22:13:30 +0000

Gauge class

Signature

export declare class Gauge extends PureComponent<Props>

Import

import { Gauge } from '@grafana/ui';

Properties

Property	Modifiers	Type
canvasElement		`any`
defaultProps	`static`	`Partial<Props>`
renderVisualization		`() => JSX.Element`

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate()
draw()
getFormattedThresholds(decimals)
render()

canvasElement property

Signature

canvasElement: any;

defaultProps property

Signature

static defaultProps: Partial<Props>;

renderVisualization property

Signature

renderVisualization: () => JSX.Element;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(): void;

Returns:

void

draw method

Signature

draw(): void;

Returns:

void

getFormattedThresholds method

Signature

getFormattedThresholds(decimals: number): Threshold[];

Parameters

Parameter	Type	Description
decimals	`number`

Returns:

Threshold[]

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

getAvailableIcons

Fri, 10 Apr 2026 22:13:30 +0000

getAvailableIcons variable

Signature

getAvailableIcons: () => readonly ["angle-double-down", "angle-double-right", "angle-double-up", "angle-down", "angle-left", "angle-right", "angle-up", "apps", "arrow", "arrow-down", "arrow-from-right", "arrow-left", "arrow-random", "arrow-right", "arrow-up", "arrows-h", "backward", "bars", "bell", "bell-slash", "bolt", "book", "book-open", "brackets-curly", "building", "bug", "building", "calculator-alt", "calendar-alt", "camera", "capture", "channel-add", "chart-line", "check", "check-circle", "circle", "clipboard-alt", "clock-nine", "cloud", "cloud-download", "cloud-upload", "code-branch", "cog", "columns", "comment-alt", "comment-alt-share", "comments-alt", "compass", "copy", "credit-card", "cube", "dashboard", "database", "document-info", "download-alt", "draggabledots", "edit", "ellipsis-v", "envelope", "exchange-alt", "exclamation-triangle", "external-link-alt", "eye", "eye-slash", "ellipsis-h", "fa fa-spinner", "favorite", "file-alt", "file-blank", "file-copy-alt", "filter", "folder", "font", "fire", "folder-open", "folder-plus", "folder-upload", "forward", "gf-bar-alignment-after", "gf-bar-alignment-before", "gf-bar-alignment-center", "gf-grid", "gf-interpolation-linear", "gf-interpolation-smooth", "gf-interpolation-step-after", "gf-interpolation-step-before", "gf-landscape", "gf-layout-simple", "gf-logs", "gf-portrait", "grafana", "graph-bar", "heart", "heart-break", "history", "home-alt", "hourglass", "import", "info", "info-circle", "key-skeleton-alt", "keyboard", "layer-group", "library-panel", "line-alt", "link", "list-ui-alt", "list-ul", "lock", "message", "minus", "minus-circle", "mobile-android", "monitor", "palette", "panel-add", "pause", "pen", "percentage", "play", "plug", "plus", "plus-circle", "plus-square", "power", "presentation-play", "process", "question-circle", "record-audio", "repeat", "rocket", "save", "search", "search-minus", "search-plus", "share-alt", "shield", "shield-exclamation", "signal", "signin", "signout", "sitemap", "slack", "sliders-v-alt", "sort-amount-down", "sort-amount-up", "square-shape", "star", "step-backward", "sync", "table", "tag-alt", "text-fields", "times", "toggle-on", "trash-alt", "unlock", "upload", "user", "users-alt", "wrap-text", "x"]

Import

import { getAvailableIcons } from '@grafana/ui';

getCardStyles

Fri, 10 Apr 2026 22:13:30 +0000

getCardStyles variable

Signature

getCardStyles: import("memoize-one").MemoizedFn<(theme: GrafanaTheme2) => {
    inner: string;
    heading: string;
    info: string;
    metadata: string;
    description: string;
    media: string;
    actionRow: string;
    actions: string;
    secondaryActions: string;
    separator: string;
    tagList: string;
}>

Import

import { getCardStyles } from '@grafana/ui';

getChildId

Fri, 10 Apr 2026 22:13:30 +0000

ReactUtils.getChildId() function

Returns the ID value of the first, and only, child element

Signature

export declare function getChildId(children: ReactElement): string | undefined;

Import

import { ReactUtils } from '@grafana/ui';
const { getChildId } = ReactUtils;

Parameters

Parameter	Type	Description
children	`ReactElement`

Returns:

string | undefined

getFieldTypeIcon

Fri, 10 Apr 2026 22:13:30 +0000

getFieldTypeIcon() function

Get the icon for a given field type

Signature

export declare function getFieldTypeIcon(field?: Field): IconName;

Import

import { getFieldTypeIcon } from '@grafana/ui';

Parameters

Parameter	Type	Description
field	`Field`

Returns:

IconName

getFocusStyles

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.getFocusStyles() function

Signature

export declare function getFocusStyles(theme: GrafanaTheme2): CSSObject;

Import

import { styleMixins } from '@grafana/ui';
const { getFocusStyles } = styleMixins;

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

CSSObject

getFormStyles

Fri, 10 Apr 2026 22:13:30 +0000

getFormStyles variable

Signature

getFormStyles: import("memoize-one").MemoizedFn<(theme: GrafanaTheme2, options: {
    variant: ButtonVariant;
    size: ComponentSize;
    invalid: boolean;
}) => {
    label: {
        label: string;
        labelContent: string;
        description: string;
        categories: string;
        chevron: string;
    };
    legend: {
        legend: string;
    };
    fieldValidationMessage: {
        vertical: string;
        horizontal: string;
        fieldValidationMessageIcon: string;
    };
    button: {
        button: string;
        disabled: string;
        img: string;
        icon: string;
        content: string;
    };
    input: {
        wrapper: string;
        inputWrapper: string;
        input: string;
        inputDisabled: string;
        addon: string;
        prefix: string;
        suffix: string;
        loadingIndicator: string;
    };
    checkbox: {
        wrapper: string;
        input: string;
        checkmark: string;
        label: string;
        description: string;
    };
}>

Import

import { getFormStyles } from '@grafana/ui';

getInputStyles

Fri, 10 Apr 2026 22:13:30 +0000

getInputStyles variable

Signature

getInputStyles: import("memoize-one").MemoizedFn<({ theme, invalid, width }: StyleDeps) => {
    wrapper: string;
    inputWrapper: string;
    input: string;
    inputDisabled: string;
    addon: string;
    prefix: string;
    suffix: string;
    loadingIndicator: string;
}>

Import

import { getInputStyles } from '@grafana/ui';

getLogRowStyles

Fri, 10 Apr 2026 22:13:30 +0000

getLogRowStyles variable

Signature

getLogRowStyles: import("memoize-one").MemoizedFn<(theme: GrafanaTheme2, logLevel?: LogLevel | undefined) => {
    logsRowMatchHighLight: string;
    logsRowMatchHighLightPreview: string;
    logsRowsTable: string;
    context: string;
    logsRow: string;
    logsRowDuplicates: string;
    logsRowLevel: string;
    logIconError: string;
    logsRowToggleDetails: string;
    logsRowLocalTime: string;
    logsRowLabels: string;
    logsRowMessage: string;
    logDetailsContainer: string;
    logDetailsTable: string;
    logsDetailsIcon: string;
    logDetailsLabel: string;
    logDetailsHeading: string;
    logDetailsValue: string;
}>

Import

import { getLogRowStyles } from '@grafana/ui';

getMouseFocusStyles

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.getMouseFocusStyles() function

Signature

export declare function getMouseFocusStyles(theme: GrafanaTheme2): CSSObject;

Import

import { styleMixins } from '@grafana/ui';
const { getMouseFocusStyles } = styleMixins;

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

CSSObject

getNextCharacter

Fri, 10 Apr 2026 22:13:30 +0000

DOMUtil.getNextCharacter() function

Signature

export declare function getNextCharacter(global?: any): any;

Import

import { DOMUtil } from '@grafana/ui';
const { getNextCharacter } = DOMUtil;

Parameters

Parameter	Type	Description
global	`any`

Returns:

any

getPreviousCousin

Fri, 10 Apr 2026 22:13:30 +0000

DOMUtil.getPreviousCousin() function

Signature

export declare function getPreviousCousin(node: any, selector: string): any;

Import

import { DOMUtil } from '@grafana/ui';
const { getPreviousCousin } = DOMUtil;

Parameters

Parameter	Type	Description
node	`any`
selector	`string`

Returns:

any

getScrollbarWidth

Fri, 10 Apr 2026 22:13:30 +0000

getScrollbarWidth() function

Signature

export declare function getScrollbarWidth(): number;

Import

import { getScrollbarWidth } from '@grafana/ui';

Returns:

number

getSelectStyles

Fri, 10 Apr 2026 22:13:30 +0000

getSelectStyles variable

Signature

getSelectStyles: import("memoize-one").MemoizedFn<(theme: GrafanaTheme2) => {
    menu: string;
    option: string;
    optionIcon: string;
    optionImage: string;
    optionDescription: string;
    optionBody: string;
    optionFocused: string;
    optionSelected: string;
    optionDisabled: string;
    singleValue: string;
    valueContainer: string;
    valueContainerMulti: string;
    loadingMessage: string;
    multiValueContainer: string;
    multiValueRemove: string;
    singleValueRemove: string;
}>

Import

import { getSelectStyles } from '@grafana/ui';

getStandardFieldConfigs

Fri, 10 Apr 2026 22:13:30 +0000

getStandardFieldConfigs variable

Returns collection of common field config properties definitions

Signature

getStandardFieldConfigs: () => (FieldConfigPropertyItem<any, number, NumberFieldConfigSettings> | FieldConfigPropertyItem<any, FieldColor | undefined, FieldColorConfigSettings> | FieldConfigPropertyItem<any, string, StringFieldConfigSettings> | FieldConfigPropertyItem<any, ThresholdsConfig, ThresholdsFieldConfigSettings> | FieldConfigPropertyItem<any, ValueMapping[], ValueMappingFieldConfigSettings> | FieldConfigPropertyItem<any, DataLink<any>[], StringFieldConfigSettings>)[]

Import

import { getStandardFieldConfigs } from '@grafana/ui';

getTagColor

Fri, 10 Apr 2026 22:13:30 +0000

getTagColor() function

Signature

export declare function getTagColor(index: number): {
    color: string;
    borderColor: string;
};

Import

import { getTagColor } from '@grafana/ui';

Parameters

Parameter	Type	Description
index	`number`

Returns:

{ color: string; borderColor: string; }

getTagColorsFromName

Fri, 10 Apr 2026 22:13:30 +0000

getTagColorsFromName() function

Returns tag badge background and border colors based on hashed tag name.

Signature

export declare function getTagColorsFromName(name?: string): {
    color: string;
    borderColor: string;
};

Import

import { getTagColorsFromName } from '@grafana/ui';

Parameters

Parameter	Type	Description
name	`string`	tag name

Returns:

{ color: string; borderColor: string; }

getTextColorForBackground

Fri, 10 Apr 2026 22:13:30 +0000

getTextColorForBackground() function

Signature

export declare function getTextColorForBackground(color: string): "rgb(32, 34, 38)" | "rgb(247, 248, 250)";

Import

import { getTextColorForBackground } from '@grafana/ui';

Parameters

Parameter	Type	Description
color	`string`

Returns:

"rgb(32, 34, 38)" | "rgb(247, 248, 250)"

getTheme

Fri, 10 Apr 2026 22:13:30 +0000

getTheme variable

Signature

getTheme: (mode?: 'dark' | 'light') => GrafanaTheme

Import

import { getTheme } from '@grafana/ui';

getTooltipContainerStyles

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.getTooltipContainerStyles variable

Signature

getTooltipContainerStyles: (theme: GrafanaTheme2) => string

Import

import { styleMixins } from '@grafana/ui';
const { getTooltipContainerStyles } = styleMixins;

Graph

Fri, 10 Apr 2026 22:13:30 +0000

Graph class

Signature

export declare class Graph extends PureComponent<GraphProps, GraphState>

Import

import { Graph } from '@grafana/ui';

Properties

Property	Modifiers	Type
$element		`any`
defaultProps	`static`	`{` `showLines: boolean;` `showPoints: boolean;` `showBars: boolean;` `isStacked: boolean;` `lineWidth: number;` `}`
element		`HTMLElement \| null`
getBarWidth		`() => number`
onPlotClick		`(event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> \| undefined) => void`
onPlotHover		`(event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> \| undefined) => void`
onPlotSelected		`(event: JQueryEventObject, ranges: {` `xaxis: {` `from: number;` `to: number;` `};` `}) => void`
renderContextMenu		`() => JSX.Element \| null`
renderTooltip		`() => React.ReactElement<VizTooltipProps, string \| React.JSXElementConstructor<any>> \| null`
state		`GraphState`

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
draw()
getYAxes(series)
render()

$element property

Signature

$element: any;

defaultProps property

Signature

static defaultProps: {
        showLines: boolean;
        showPoints: boolean;
        showBars: boolean;
        isStacked: boolean;
        lineWidth: number;
    };

element property

Signature

element: HTMLElement | null;

getBarWidth property

Signature

getBarWidth: () => number;

onPlotClick property

Signature

onPlotClick: (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;

onPlotHover property

Signature

onPlotHover: (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;

onPlotSelected property

Signature

onPlotSelected: (event: JQueryEventObject, ranges: {
        xaxis: {
            from: number;
            to: number;
        };
    }) => void;

renderContextMenu property

Signature

renderContextMenu: () => JSX.Element | null;

renderTooltip property

Signature

renderTooltip: () => React.ReactElement<VizTooltipProps, string | React.JSXElementConstructor<any>> | null;

state property

Signature

state: GraphState;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: GraphProps, prevState: GraphState): void;

Parameters

Parameter	Type	Description
prevProps	`GraphProps`
prevState	`GraphState`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

draw method

Signature

draw(): void;

Returns:

void

getYAxes method

Signature

getYAxes(series: GraphSeriesXY[]): {
        show: boolean;
        index: number;
        position: string;
        min: number | null | undefined;
        tickDecimals: number | null | undefined;
    }[] | {
        show: boolean;
        min: number;
        max: number;
    }[];

Parameters

Parameter	Type	Description
series	`GraphSeriesXY[]`

Returns:

{ show: boolean; index: number; position: string; min: number | null | undefined; tickDecimals: number | null | undefined; }[] | { show: boolean; min: number; max: number; }[]

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

GraphNG

Fri, 10 Apr 2026 22:13:30 +0000

GraphNG class

“Time as X” core component, expects ascending x

Signature

export declare class GraphNG extends React.Component<GraphNGProps, GraphNGState>

Import

import { GraphNG } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `GraphNG` class

Properties

Property	Modifiers	Type
contextType	`static`	`React.Context<PanelContext>`
getTimeRange		`() => TimeRange`
panelContext		`PanelContext`

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(prevProps)
componentWillUnmount()
handleCursorUpdate(evt)
prepState(props, withConfig)
render()

constructor(props)

Constructs a new instance of the GraphNG class

Signature

constructor(props: GraphNGProps);

Parameters

Parameter	Type	Description
props	`GraphNGProps`

contextType property

Signature

static contextType: React.Context<PanelContext>;

getTimeRange property

Signature

getTimeRange: () => TimeRange;

panelContext property

Signature

panelContext: PanelContext;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: GraphNGProps): void;

Parameters

Parameter	Type	Description
prevProps	`GraphNGProps`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

handleCursorUpdate method

Signature

handleCursorUpdate(evt: DataHoverEvent | LegacyGraphHoverEvent): void;

Parameters

Parameter	Type	Description
evt	`DataHoverEvent \| LegacyGraphHoverEvent`

Returns:

void

prepState method

Signature

prepState(props: GraphNGProps, withConfig?: boolean): GraphNGState;

Parameters

Parameter	Type	Description
props	`GraphNGProps`
withConfig	`boolean`

Returns:

GraphNGState

render method

Signature

render(): JSX.Element | null;

Returns:

JSX.Element | null

GraphNGProps

Fri, 10 Apr 2026 22:13:30 +0000

GraphNGProps interface

Signature

export interface GraphNGProps extends Themeable2

Import

import { GraphNGProps } from '@grafana/ui';

Properties

Property	Type	Description
children	`(builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode`
fields	`XYFieldMatchers`
frames	`DataFrame[]`
height	`number`
legend	`VizLegendOptions`
onLegendClick	`(event: GraphNGLegendEvent) => void`
options	`Record<string, any>`	needed for propsToDiff to re-init the plot & config this is a generic approach to plot re-init, without having to specify which panel-level options should cause invalidation. we can drop this in favor of something like panelOptionsRev that gets passed in similar to structureRev. then we can drop propsToDiff entirely.
preparePlotFrame	`(frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame`
prepConfig	`(alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder`
propsToDiff	`Array<string \| PropDiffFn>`
renderers	`Renderers`
renderLegend	`(config: UPlotConfigBuilder) => React.ReactElement \| null`
structureRev	`number`
timeRange	`TimeRange`
timeZone	`TimeZone`
tweakAxis	`(opts: AxisProps, forField: Field) => AxisProps`
tweakScale	`(opts: ScaleProps, forField: Field) => ScaleProps`
width	`number`

children property

Signature

children?: (builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode;

fields property

Signature

fields?: XYFieldMatchers;

frames property

Signature

frames: DataFrame[];

height property

Signature

height: number;

legend property

Signature

legend: VizLegendOptions;

onLegendClick property

Signature

onLegendClick?: (event: GraphNGLegendEvent) => void;

options property

needed for propsToDiff to re-init the plot & config this is a generic approach to plot re-init, without having to specify which panel-level options should cause invalidation. we can drop this in favor of something like panelOptionsRev that gets passed in similar to structureRev. then we can drop propsToDiff entirely.

Signature

options?: Record<string, any>;

preparePlotFrame property

Signature

preparePlotFrame?: (frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame;

prepConfig property

Signature

prepConfig: (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder;

propsToDiff property

Signature

propsToDiff?: Array<string | PropDiffFn>;

renderers property

Signature

renderers?: Renderers;

renderLegend property

Signature

renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null;

structureRev property

Signature

structureRev?: number;

timeRange property

Signature

timeRange: TimeRange;

timeZone property

Signature

timeZone: TimeZone;

tweakAxis property

Signature

tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps;

tweakScale property

Signature

tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps;

width property

Signature

width: number;

GraphSeriesToggler

Fri, 10 Apr 2026 22:13:30 +0000

GraphSeriesToggler class

Signature

export declare class GraphSeriesToggler extends React.Component<GraphSeriesTogglerProps, GraphSeriesTogglerState>

Import

import { GraphSeriesToggler } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `GraphSeriesToggler` class

Methods

Method	Modifiers	Description
componentDidUpdate(prevProps)
onSeriesToggle(label, event)
render()

constructor(props)

Constructs a new instance of the GraphSeriesToggler class

Signature

constructor(props: GraphSeriesTogglerProps);

Parameters

Parameter	Type	Description
props	`GraphSeriesTogglerProps`

componentDidUpdate method

Signature

componentDidUpdate(prevProps: Readonly<GraphSeriesTogglerProps>): void;

Parameters

Parameter	Type	Description
prevProps	`Readonly<GraphSeriesTogglerProps>`

Returns:

void

onSeriesToggle method

Signature

onSeriesToggle(label: string, event: React.MouseEvent<HTMLElement>): void;

Parameters

Parameter	Type	Description
label	`string`
event	`React.MouseEvent<HTMLElement>`

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

GraphSeriesTogglerAPI

Fri, 10 Apr 2026 22:13:30 +0000

GraphSeriesTogglerAPI interface

Signature

export interface GraphSeriesTogglerAPI

Import

import { GraphSeriesTogglerAPI } from '@grafana/ui';

Properties

Property	Type	Description
onSeriesToggle	`(label: string, event: React.MouseEvent<HTMLElement>) => void`
toggledSeries	`GraphSeriesXY[]`

onSeriesToggle property

Signature

onSeriesToggle: (label: string, event: React.MouseEvent<HTMLElement>) => void;

toggledSeries property

Signature

toggledSeries: GraphSeriesXY[];

graphTickFormatter

Fri, 10 Apr 2026 22:13:30 +0000

graphTickFormatter variable

Signature

graphTickFormatter: (epoch: number, axis: any) => string

Import

import { graphTickFormatter } from '@grafana/ui';

graphTimeFormat

Fri, 10 Apr 2026 22:13:30 +0000

graphTimeFormat variable

Signature

graphTimeFormat: (ticks: number | null, min: number | null, max: number | null) => string

Import

import { graphTimeFormat } from '@grafana/ui';

GraphWithLegend

Fri, 10 Apr 2026 22:13:30 +0000

GraphWithLegend variable

Signature

GraphWithLegend: React.FunctionComponent<GraphWithLegendProps>

Import

import { GraphWithLegend } from '@grafana/ui';

hasValidationEvent

Fri, 10 Apr 2026 22:13:30 +0000

hasValidationEvent variable

Signature

hasValidationEvent: (event: EventsWithValidation, validationEvents: ValidationEvents | undefined) => ValidationRule[] | undefined

Import

import { hasValidationEvent } from '@grafana/ui';

HorizontalGroup

Fri, 10 Apr 2026 22:13:30 +0000

HorizontalGroup variable

Signature

HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>>

Import

import { HorizontalGroup } from '@grafana/ui';

hoverColor

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.hoverColor() function

Signature

export declare function hoverColor(color: string, theme: GrafanaTheme2): string;

Import

import { styleMixins } from '@grafana/ui';
const { hoverColor } = styleMixins;

Parameters

Parameter	Type	Description
color	`string`
theme	`GrafanaTheme2`

Returns:

string

Icon

Fri, 10 Apr 2026 22:13:30 +0000

Icon variable

Signature

Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>

Import

import { Icon } from '@grafana/ui';

IconButton

Fri, 10 Apr 2026 22:13:30 +0000

IconButton variable

Signature

IconButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>

Import

import { IconButton } from '@grafana/ui';

IconButtonVariant

Fri, 10 Apr 2026 22:13:30 +0000

IconButtonVariant type

Signature

export declare type IconButtonVariant = 'primary' | 'secondary' | 'destructive';

Import

import { IconButtonVariant } from '@grafana/ui';

IconName

Fri, 10 Apr 2026 22:13:30 +0000

IconName type

Signature

export declare type IconName = ReturnType<typeof getAvailableIcons>[number] | BrandIconNames;

Import

import { IconName } from '@grafana/ui';

IconSize

Fri, 10 Apr 2026 22:13:30 +0000

IconSize type

Signature

export declare type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';

Import

import { IconSize } from '@grafana/ui';

IconType

Fri, 10 Apr 2026 22:13:30 +0000

IconType type

Signature

export declare type IconType = 'mono' | 'default';

Import

import { IconType } from '@grafana/ui';

IndentationPlugin

Fri, 10 Apr 2026 22:13:30 +0000

IndentationPlugin() function

Signature

export declare function IndentationPlugin(): Plugin;

Import

import { IndentationPlugin } from '@grafana/ui';

Returns:

Plugin

InfoBox

Fri, 10 Apr 2026 22:13:30 +0000

InfoBox variable

Signature

InfoBox: React.MemoExoticComponent<React.ForwardRefExoticComponent<InfoBoxProps & React.RefAttributes<HTMLDivElement>>>

Import

import { InfoBox } from '@grafana/ui';

InlineField

Fri, 10 Apr 2026 22:13:30 +0000

InlineField variable

Signature

InlineField: FC<Props>

Import

import { InlineField } from '@grafana/ui';

InlineFieldRow

Fri, 10 Apr 2026 22:13:30 +0000

InlineFieldRow variable

Signature

InlineFieldRow: FC<Props>

Import

import { InlineFieldRow } from '@grafana/ui';

InlineFormLabel

Fri, 10 Apr 2026 22:13:30 +0000

InlineFormLabel variable

Signature

InlineFormLabel: React.FunctionComponent<Props>

Import

import { InlineFormLabel } from '@grafana/ui';

InlineLabel

Fri, 10 Apr 2026 22:13:30 +0000

InlineLabel variable

Signature

InlineLabel: FunctionComponent<Props>

Import

import { InlineLabel } from '@grafana/ui';

InlineSegmentGroup

Fri, 10 Apr 2026 22:13:30 +0000

InlineSegmentGroup variable

InlineSegmentGroup variable

Signature

InlineSegmentGroup: FC<Props>

Import

import { InlineSegmentGroup } from '@grafana/ui';

InlineSwitch

Fri, 10 Apr 2026 22:13:30 +0000

InlineSwitch variable

Signature

InlineSwitch: React.ForwardRefExoticComponent<Pick<InlineSwitchProps, "name" | "min" | "value" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "transparent" | "action" | "disabled" | "selected" | "shape" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "showLabel"> & React.RefAttributes<HTMLInputElement>>

Import

import { InlineSwitch } from '@grafana/ui';

Input

Fri, 10 Apr 2026 22:13:30 +0000

Input variable

Signature

Input: React.ForwardRefExoticComponent<Pick<Props, "name" | "min" | "value" | "suffix" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "action" | "disabled" | "selected" | "shape" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "invalid" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "loading" | "addonBefore" | "addonAfter"> & React.RefAttributes<HTMLInputElement>>

Import

import { Input } from '@grafana/ui';

InputActionMeta

Fri, 10 Apr 2026 22:13:30 +0000

InputActionMeta type

Signature

export declare type InputActionMeta = {
    action: 'set-value' | 'input-change' | 'input-blur' | 'menu-close';
};

Import

import { InputActionMeta } from '@grafana/ui';

InputControl

Fri, 10 Apr 2026 22:13:30 +0000

InputControl variable

Signature

InputControl: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>(props: import("react-hook-form").ControllerProps<TFieldValues, TName>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>

Import

import { InputControl } from '@grafana/ui';

JsonExplorer

Fri, 10 Apr 2026 22:13:30 +0000

JsonExplorer class

JsonExplorer

JsonExplorer allows you to render JSON objects in HTML with a **collapsible** navigation.

Signature

export declare class JsonExplorer

Import

import { JsonExplorer } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(json, open, config, key)		Constructs a new instance of the `JsonExplorer` class

Properties

Property	Modifiers	Type	Description
json		`any`

Methods

Method	Modifiers	Description
appendChildren(animated)		Appends all the children to children element Animated option is used when user triggers this via a click
isNumberArray()
openAtDepth(depth)		Open all children up to a certain depth. Allows actions such as expand all/collapse all
removeChildren(animated)		Removes all the children from children element Animated option is used when user triggers this via a click
render(skipRoot)		Renders an HTML element and installs event listeners
renderArray()
toggleOpen()		Toggles `isOpen` state

constructor(json, open, config, key)

Constructs a new instance of the JsonExplorer class

Signature

constructor(json: any, open?: number, config?: JsonExplorerConfig, key?: string | undefined);

Parameters

Parameter	Type	Description
json	`any`	The JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string.
open	`number`	his number indicates up to how many levels the rendered tree should expand. Set it to `0` to make the whole tree collapsed or set it to `Infinity` to expand the tree deeply
config	`JsonExplorerConfig`	defaultConfig = { hoverPreviewEnabled: false, hoverPreviewArrayCount: 100, hoverPreviewFieldCount: 5 }Available configurations: #####Hover Preview * `hoverPreviewEnabled`: enable preview on hover * `hoverPreviewArrayCount`: number of array items to show in preview Any array larger than this number will be shown as `Array[XXX]` where `XXX` is length of the array. * `hoverPreviewFieldCount`: number of object properties to show for object preview. Any object with more properties that thin number will be truncated.
key	`string \| undefined`	The key that this object in it’s parent context

json property

Signature

json: any;

appendChildren method

Appends all the children to children element Animated option is used when user triggers this via a click

Signature

appendChildren(animated?: boolean): void;

Parameters

Parameter	Type	Description
animated	`boolean`

Returns:

void

isNumberArray method

Signature

isNumberArray(): boolean;

Returns:

boolean

openAtDepth method

Open all children up to a certain depth. Allows actions such as expand all/collapse all

Signature

openAtDepth(depth?: number): void;

Parameters

Parameter	Type	Description
depth	`number`

Returns:

void

removeChildren method

Removes all the children from children element Animated option is used when user triggers this via a click

Signature

removeChildren(animated?: boolean): void;

Parameters

Parameter	Type	Description
animated	`boolean`

Returns:

void

render method

Renders an HTML element and installs event listeners

Signature

render(skipRoot?: boolean): HTMLDivElement;

Parameters

Parameter	Type	Description
skipRoot	`boolean`

Returns:

HTMLDivElement

{HTMLDivElement}

renderArray method

Signature

renderArray(): Element;

Returns:

Element

toggleOpen method

Toggles isOpen state

Signature

toggleOpen(): void;

Returns:

void

JSONFormatter

Fri, 10 Apr 2026 22:13:30 +0000

JSONFormatter class

Signature

export declare class JSONFormatter extends PureComponent<Props>

Import

import { JSONFormatter } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
defaultProps	`static`	`{` `open: number;` `config: {` `animateOpen: boolean;` `};` `}`
renderJson		`() => void`

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate()
render()

defaultProps property

Signature

static defaultProps: {
        open: number;
        config: {
            animateOpen: boolean;
        };
    };

renderJson property

Signature

renderJson: () => void;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

Label

Fri, 10 Apr 2026 22:13:30 +0000

Label variable

Signature

Label: React.FC<LabelProps>

Import

import { Label } from '@grafana/ui';

LegacyForms

Fri, 10 Apr 2026 22:13:30 +0000

LegacyForms variable

Signature

LegacyForms: {
    SecretFormField: import("react").FunctionComponent<import("./SecretFormField/SecretFormField").Props>;
    FormField: import("react").FunctionComponent<import("./FormField/FormField").Props>;
    Select: typeof Select;
    AsyncSelect: typeof AsyncSelect;
    IndicatorsContainer: (props: any) => JSX.Element;
    NoOptionsMessage: (props: import("react-select").OptionProps<any, any, import("react-select").GroupTypeBase<any>>) => JSX.Element;
    Input: typeof Input;
    Switch: typeof Switch;
}

Import

import { LegacyForms } from '@grafana/ui';

LegacyInputStatus

Fri, 10 Apr 2026 22:13:30 +0000

LegacyInputStatus enum

Signature

export declare enum LegacyInputStatus

Import

import { LegacyInputStatus } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Invalid	`"invalid"`
Valid	`"valid"`

Legend

Fri, 10 Apr 2026 22:13:30 +0000

Legend variable

Signature

Legend: React.FC<LabelProps>

Import

import { Legend } from '@grafana/ui';

LinkButton

Fri, 10 Apr 2026 22:13:30 +0000

LinkButton variable

Signature

LinkButton: React.ForwardRefExoticComponent<CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>

Import

import { LinkButton } from '@grafana/ui';

linkModelToContextMenuItems

Fri, 10 Apr 2026 22:13:30 +0000

linkModelToContextMenuItems variable

Delays creating links until we need to open the ContextMenu

Signature

linkModelToContextMenuItems: (links: () => LinkModel[]) => MenuItemProps[]

Import

import { linkModelToContextMenuItems } from '@grafana/ui';

List

Fri, 10 Apr 2026 22:13:30 +0000

List class

Signature

export declare class List<T> extends React.PureComponent<ListProps<T>>

Import

import { List } from '@grafana/ui';

Methods

Method	Modifiers	Description
render()

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

listItem

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.listItem() function

Signature

export declare function listItem(theme: GrafanaTheme2): string;

Import

import { styleMixins } from '@grafana/ui';
const { listItem } = styleMixins;

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

string

listItemSelected

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.listItemSelected() function

Signature

export declare function listItemSelected(theme: GrafanaTheme2): string;

Import

import { styleMixins } from '@grafana/ui';
const { listItemSelected } = styleMixins;

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

string

LoadingPlaceholder

Fri, 10 Apr 2026 22:13:30 +0000

LoadingPlaceholder variable

Signature

LoadingPlaceholder: SFC<LoadingPlaceholderProps>

Import

import { LoadingPlaceholder } from '@grafana/ui';

LoadingPlaceholderProps

Fri, 10 Apr 2026 22:13:30 +0000

LoadingPlaceholderProps interface

Signature

export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement>

Import

import { LoadingPlaceholderProps } from '@grafana/ui';

Properties

Property	Type	Description
text	`string`

text property

Signature

text: string;

LogLabels

Fri, 10 Apr 2026 22:13:30 +0000

LogLabels variable

Signature

LogLabels: React.FunctionComponent<{
    labels: Labels;
}>

Import

import { LogLabels } from '@grafana/ui';

LogMessageAnsi

Fri, 10 Apr 2026 22:13:30 +0000

LogMessageAnsi class

Signature

export declare class LogMessageAnsi extends PureComponent<Props, State>

Import

import { LogMessageAnsi } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
state		`State`

Methods

Method	Modifiers	Description
getDerivedStateFromProps(props, state)	`static`
render()

state property

Signature

state: State;

getDerivedStateFromProps method

Signature

static getDerivedStateFromProps(props: Props, state: State): {
        chunks: ({
            style: Style;
            text: string;
        } | {
            text: string;
            style?: undefined;
        })[];
        prevValue: string;
    } | null;

Parameters

Parameter	Type	Description
props	`Props`
state	`State`

Returns:

{ chunks: ({ style: Style; text: string; } | { text: string; style?: undefined; })[]; prevValue: string; } | null

render method

Signature

render(): (string | JSX.Element)[];

Returns:

(string | JSX.Element)[]

LogRows

Fri, 10 Apr 2026 22:13:30 +0000

LogRows variable

Signature

LogRows: React.FunctionComponent<{
    timeZone: TimeZone;
    getRowContext?: ((row: LogRowModel, options?: RowContextOptions | undefined) => Promise<any>) | undefined;
    logsSortOrder?: LogsSortOrder | null | undefined;
    wrapLogMessage: boolean;
    prettifyLogMessage: boolean;
    showContextToggle?: ((row?: LogRowModel | undefined) => boolean) | undefined;
    onClickFilterLabel?: ((key: string, value: string) => void) | undefined;
    onClickFilterOutLabel?: ((key: string, value: string) => void) | undefined;
    showDetectedFields?: string[] | undefined;
    onClickShowDetectedField?: ((key: string) => void) | undefined;
    onClickHideDetectedField?: ((key: string) => void) | undefined;
    getFieldLinks?: ((field: Field, rowIndex: number) => Array<LinkModel<Field>>) | undefined;
    forceEscape?: boolean | undefined;
    enableLogDetails: boolean;
    showTime: boolean;
    showLabels: boolean;
    onLogRowHover?: ((row?: LogRowModel | undefined) => void) | undefined;
    logRows?: LogRowModel[] | undefined;
    deduplicatedRows?: LogRowModel[] | undefined;
    dedupStrategy: LogsDedupStrategy;
    previewLimit?: number | undefined;
}>

Import

import { LogRows } from '@grafana/ui';

makeFragment

Fri, 10 Apr 2026 22:13:30 +0000

makeFragment variable

Signature

makeFragment: (text: string, syntax?: string | undefined) => Document

Import

import { makeFragment } from '@grafana/ui';

makeValue

Fri, 10 Apr 2026 22:13:30 +0000

makeValue variable

Signature

makeValue: (text: string, syntax?: string | undefined) => Value

Import

import { makeValue } from '@grafana/ui';

Marker

Fri, 10 Apr 2026 22:13:30 +0000

Marker variable

Signature

Marker: React.FC<MarkerProps>

Import

import { Marker } from '@grafana/ui';

measureText

Fri, 10 Apr 2026 22:13:30 +0000

measureText() function

measureText() function

Signature

export declare function measureText(text: string, fontSize: number): TextMetrics;

Import

import { measureText } from '@grafana/ui';

Parameters

Parameter	Type	Description
text	`string`
fontSize	`number`

Returns:

TextMetrics

mediaUp

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins.mediaUp() function

Signature

export declare function mediaUp(breakpoint: string): string;

Import

import { styleMixins } from '@grafana/ui';
const { mediaUp } = styleMixins;

Parameters

Parameter	Type	Description
breakpoint	`string`

Returns:

string

mockTheme

Fri, 10 Apr 2026 22:13:30 +0000

mockTheme variable

Signature

mockTheme: (mock: (name?: string | undefined) => GrafanaTheme) => () => void

Import

import { mockTheme } from '@grafana/ui';

mockThemeContext

Fri, 10 Apr 2026 22:13:30 +0000

mockThemeContext variable

Signature

mockThemeContext: (theme: Partial<GrafanaTheme2>) => () => void

Import

import { mockThemeContext } from '@grafana/ui';

Modal

Fri, 10 Apr 2026 22:13:30 +0000

Signature

export declare namespace Modal

Import

import { Modal } from '@grafana/ui';

Variables

Variable	Description
ButtonRow

ModalRoot

Fri, 10 Apr 2026 22:13:30 +0000

ModalRoot variable

Signature

ModalRoot: () => JSX.Element

Import

import { ModalRoot } from '@grafana/ui';

ModalsController

Fri, 10 Apr 2026 22:13:30 +0000

ModalsController variable

Signature

ModalsController: React.Consumer<ModalsContextState>

Import

import { ModalsController } from '@grafana/ui';

ModalsProvider

Fri, 10 Apr 2026 22:13:30 +0000

ModalsProvider class

Signature

export declare class ModalsProvider extends React.Component<ModalsProviderProps, ModalsContextState>

Import

import { ModalsProvider } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `ModalsProvider` class

Properties

Property	Modifiers	Type	Description
hideModal		`() => void`
showModal		`(component: React.ComponentType<any>, props: any) => void`

Methods

Method	Modifiers	Description
render()

constructor(props)

Constructs a new instance of the ModalsProvider class

Signature

constructor(props: ModalsProviderProps);

Parameters

Parameter	Type	Description
props	`ModalsProviderProps`

hideModal property

Signature

hideModal: () => void;

showModal property

Signature

showModal: (component: React.ComponentType<any>, props: any) => void;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ModalTabsHeader

Fri, 10 Apr 2026 22:13:30 +0000

ModalTabsHeader variable

Signature

ModalTabsHeader: React.FC<Props>

Import

import { ModalTabsHeader } from '@grafana/ui';

Monaco

Fri, 10 Apr 2026 22:13:30 +0000

Monaco type

Signature

export declare type Monaco = typeof monacoType;

Import

import { Monaco } from '@grafana/ui';

MonacoEditor

Fri, 10 Apr 2026 22:13:30 +0000

MonacoEditor type

Signature

export declare type MonacoEditor = monacoType.editor.IStandaloneCodeEditor;

Import

import { MonacoEditor } from '@grafana/ui';

MultiSelect

Fri, 10 Apr 2026 22:13:30 +0000

MultiSelect() function

Signature

export declare function MultiSelect<T>(props: MultiSelectCommonProps<T>): JSX.Element;

Import

import { MultiSelect } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`MultiSelectCommonProps<T>`

Returns:

JSX.Element

MultiSelectCommonProps

Fri, 10 Apr 2026 22:13:30 +0000

MultiSelectCommonProps interface

Signature

export interface MultiSelectCommonProps<T> extends Omit<SelectCommonProps<T>, 'onChange' | 'isMulti' | 'value'>

Import

import { MultiSelectCommonProps } from '@grafana/ui';

Properties

Property	Type	Description
onChange	`(item: Array<SelectableValue<T>>) => {} \| void`
value	`Array<SelectableValue<T>> \| T[]`

onChange property

Signature

onChange: (item: Array<SelectableValue<T>>) => {} | void;

value property

Signature

value?: Array<SelectableValue<T>> | T[];

NewlinePlugin

Fri, 10 Apr 2026 22:13:30 +0000

NewlinePlugin() function

Signature

export declare function NewlinePlugin(): Plugin;

Import

import { NewlinePlugin } from '@grafana/ui';

Returns:

Plugin

NodeGraphDataFrameFieldNames

Fri, 10 Apr 2026 22:13:30 +0000

NodeGraphDataFrameFieldNames enum

Signature

export declare enum NodeGraphDataFrameFieldNames

Import

import { NodeGraphDataFrameFieldNames } from '@grafana/ui';

Enumeration Members

Member	Value	Description
arc	`"arc__"`
color	`"color"`
detail	`"detail__"`
id	`"id"`
mainStat	`"mainStat"`
secondaryStat	`"secondaryStat"`
source	`"source"`
subTitle	`"subTitle"`
target	`"target"`
title	`"title"`

NumberValueEditor

Fri, 10 Apr 2026 22:13:30 +0000

NumberValueEditor variable

Signature

NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFieldConfigSettings>>

Import

import { NumberValueEditor } from '@grafana/ui';

OnTagClick

Fri, 10 Apr 2026 22:13:30 +0000

OnTagClick type

Signature

export declare type OnTagClick = (name: string, event: React.MouseEvent<HTMLElement>) => any;

Import

import { OnTagClick } from '@grafana/ui';

Pagination

Fri, 10 Apr 2026 22:13:30 +0000

Pagination variable

Signature

Pagination: React.FC<Props>

Import

import { Pagination } from '@grafana/ui';

PanelContextRoot

Fri, 10 Apr 2026 22:13:30 +0000

PanelContextRoot variable

Signature

PanelContextRoot: React.Context<PanelContext>

Import

import { PanelContextRoot } from '@grafana/ui';

PlotLegend

Fri, 10 Apr 2026 22:13:30 +0000

PlotLegend variable

Signature

PlotLegend: React.FC<PlotLegendProps>

Import

import { PlotLegend } from '@grafana/ui';

PlotSelection

Fri, 10 Apr 2026 22:13:30 +0000

PlotSelection interface

Signature

export interface PlotSelection

Import

import { PlotSelection } from '@grafana/ui';

Properties

Property	Type	Description
bbox	`{` `top: number;` `left: number;` `width: number;` `height: number;` `}`
max	`number`
min	`number`

bbox property

Signature

bbox: {
        top: number;
        left: number;
        width: number;
        height: number;
    };

max property

Signature

max: number;

min property

Signature

min: number;

PluginSignatureBadge

Fri, 10 Apr 2026 22:13:30 +0000

PluginSignatureBadge variable

Signature

PluginSignatureBadge: React.FC<PluginSignatureBadgeProps>

Import

import { PluginSignatureBadge } from '@grafana/ui';

PluginSignatureBadgeProps

Fri, 10 Apr 2026 22:13:30 +0000

PluginSignatureBadgeProps interface

Signature

export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement>

Import

import { PluginSignatureBadgeProps } from '@grafana/ui';

Properties

Property	Type	Description
status	`PluginSignatureStatus`

status property

Signature

status?: PluginSignatureStatus;

Popover

Fri, 10 Apr 2026 22:13:30 +0000

Popover class

Signature

declare class Popover extends PureComponent<Props>

Import

import { Popover } from '@grafana/ui';

Methods

Method	Modifiers	Description
render()

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

PopoverContent

Fri, 10 Apr 2026 22:13:30 +0000

PopoverContent type

Signature

export declare type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);

Import

import { PopoverContent } from '@grafana/ui';

PopoverController

Fri, 10 Apr 2026 22:13:30 +0000

PopoverController class

Signature

declare class PopoverController extends React.Component<Props, State>

Import

import { PopoverController } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
hidePopper		`() => void`
showPopper		`() => void`
state		`{` `show: boolean;` `}`

Methods

Method	Modifiers	Description
render()

hidePopper property

Signature

hidePopper: () => void;

showPopper property

Signature

showPopper: () => void;

state property

Signature

state: {
        show: boolean;
    };

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

Portal

Fri, 10 Apr 2026 22:13:30 +0000

Portal() function

Signature

export declare function Portal(props: PropsWithChildren<Props>): import("react").ReactPortal;

Import

import { Portal } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`PropsWithChildren<Props>`

Returns:

import("react").ReactPortal

preparePlotFrame

Fri, 10 Apr 2026 22:13:30 +0000

preparePlotFrame() function

Signature

export declare function preparePlotFrame(frames: DataFrame[], dimFields: XYFieldMatchers): DataFrame | undefined;

Import

import { preparePlotFrame } from '@grafana/ui';

Parameters

Parameter	Type	Description
frames	`DataFrame[]`
dimFields	`XYFieldMatchers`

Returns:

DataFrame | undefined

QueryField

Fri, 10 Apr 2026 22:13:30 +0000

QueryField class

Renders an editor field. Pass initial value as initialQuery and listen to changes in props.onValueChanged. This component can only process strings. Internally it uses Slate Value. Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.

Signature

export declare class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldState>

Import

import { QueryField } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props, context)		Constructs a new instance of the `QueryField` class

Properties

Property	Type	Description
editor	`Editor \| null`
handleBlur	`(event: Event, editor: CoreEditor, next: Function) => any`	We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.
lastExecutedValue	`Value \| null`
mounted	`boolean`
onChange	`(value: Value, runQuery?: boolean \| undefined) => void`	Update local state, propagate change upstream and optionally run the query afterwards.
plugins	`Plugin[]`
runOnChange	`() => void`
runOnChangeAndRunQuery	`() => void`
runOnChangeDebounced	`Function`
runOnRunQuery	`() => void`

Methods

Method	Modifiers	Description
cleanText(text)
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
render()

constructor(props, context)

Constructs a new instance of the QueryField class

Signature

constructor(props: QueryFieldProps, context: Context<any>);

Parameters

Parameter	Type	Description
props	`QueryFieldProps`
context	`Context<any>`

editor property

Signature

editor: Editor | null;

handleBlur property

We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.

Signature

handleBlur: (event: Event, editor: CoreEditor, next: Function) => any;

lastExecutedValue property

Signature

lastExecutedValue: Value | null;

mounted property

Signature

mounted: boolean;

onChange property

Update local state, propagate change upstream and optionally run the query afterwards.

Signature

onChange: (value: Value, runQuery?: boolean | undefined) => void;

plugins property

Signature

plugins: Plugin[];

runOnChange property

Signature

runOnChange: () => void;

runOnChangeAndRunQuery property

Signature

runOnChangeAndRunQuery: () => void;

runOnChangeDebounced property

Signature

runOnChangeDebounced: Function;

runOnRunQuery property

Signature

runOnRunQuery: () => void;

cleanText method

Signature

cleanText(text: string): string;

Parameters

Parameter	Type	Description
text	`string`

Returns:

string

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState): void;

Parameters

Parameter	Type	Description
prevProps	`QueryFieldProps`
prevState	`QueryFieldState`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

RadioButtonGroup

Fri, 10 Apr 2026 22:13:30 +0000

RadioButtonGroup namespace

Signature

export declare namespace RadioButtonGroup

Import

import { RadioButtonGroup } from '@grafana/ui';

Variables

Variable	Description
displayName

RangeSlider

Fri, 10 Apr 2026 22:13:30 +0000

RangeSlider variable

RichHistoryQueriesTab uses this Range Component

Signature

RangeSlider: FunctionComponent<RangeSliderProps>

Import

import { RangeSlider } from '@grafana/ui';

ReactUtils

Fri, 10 Apr 2026 22:13:30 +0000

ReactUtils namespace

ReactUtils namespace

Import

import { ReactUtils } from '@grafana/ui';

Functions

Function	Description
getChildId(children)	Returns the ID value of the first, and only, child element
renderOrCallToRender(itemToRender, props)	Given react node or function returns element accordingly

RefreshPicker

Fri, 10 Apr 2026 22:13:30 +0000

RefreshPicker class

Signature

export declare class RefreshPicker extends PureComponent<Props>

Import

import { RefreshPicker } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `RefreshPicker` class

Properties

Property	Modifiers	Type
isLive	`static`	`(refreshInterval?: string \| undefined) => boolean`
liveOption	`static`	`{` `label: string;` `value: string;` `ariaLabel: string;` `}`
offOption	`static`	`{` `label: string;` `value: string;` `ariaLabel: string;` `}`
onChangeSelect		`(item: SelectableValue<string>) => void`

Methods

Method	Modifiers	Description
getVariant()
render()

constructor(props)

Constructs a new instance of the RefreshPicker class

Signature

constructor(props: Props);

Parameters

Parameter	Type	Description
props	`Props`

isLive property

Signature

static isLive: (refreshInterval?: string | undefined) => boolean;

liveOption property

Signature

static liveOption: {
        label: string;
        value: string;
        ariaLabel: string;
    };

offOption property

Signature

static offOption: {
        label: string;
        value: string;
        ariaLabel: string;
    };

onChangeSelect property

Signature

onChangeSelect: (item: SelectableValue<string>) => void;

getVariant method

Signature

getVariant(): ToolbarButtonVariant;

Returns:

ToolbarButtonVariant

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

regexValidation

Fri, 10 Apr 2026 22:13:30 +0000

regexValidation variable

Signature

regexValidation: (pattern: string | RegExp, errorMessage?: string | undefined) => ValidationRule

Import

import { regexValidation } from '@grafana/ui';

Renderable

Fri, 10 Apr 2026 22:13:30 +0000

Renderable type

Signature

export declare type Renderable = React.ComponentType | JSX.Element;

Import

import { Renderable } from '@grafana/ui';

RenderFunction

Fri, 10 Apr 2026 22:13:30 +0000

RenderFunction type

Signature

export declare type RenderFunction = () => Renderable | Renderable[];

Import

import { RenderFunction } from '@grafana/ui';

renderOrCallToRender

Fri, 10 Apr 2026 22:13:30 +0000

ReactUtils.renderOrCallToRender() function

Given react node or function returns element accordingly

Signature

export declare function renderOrCallToRender<TProps = any>(itemToRender: ((props?: TProps) => React.ReactNode) | React.ReactNode, props?: TProps): React.ReactNode;

Import

import { ReactUtils } from '@grafana/ui';
const { renderOrCallToRender } = ReactUtils;

Parameters

Parameter	Type	Description
itemToRender	`((props?: TProps) => React.ReactNode) \| React.ReactNode`
props	`TProps`	props to be passed to the function if item provided as such

Returns:

React.ReactNode

resetSelectStyles

Fri, 10 Apr 2026 22:13:30 +0000

resetSelectStyles() function

Signature

export default function resetSelectStyles(): {
    clearIndicator: () => {};
    container: () => {};
    control: () => {};
    dropdownIndicator: () => {};
    group: () => {};
    groupHeading: () => {};
    indicatorsContainer: () => {};
    indicatorSeparator: () => {};
    input: () => {};
    loadingIndicator: () => {};
    loadingMessage: () => {};
    menu: () => {};
    menuList: ({ maxHeight }: {
        maxHeight: number;
    }) => {
        maxHeight: number;
    };
    multiValue: () => {};
    multiValueLabel: () => {};
    multiValueRemove: () => {};
    noOptionsMessage: () => {};
    option: () => {};
    placeholder: () => {};
    singleValue: () => {};
    valueContainer: () => {};
};

Import

import { resetSelectStyles } from '@grafana/ui';

Returns:

{ clearIndicator: () => {}; container: () => {}; control: () => {}; dropdownIndicator: () => {}; group: () => {}; groupHeading: () => {}; indicatorsContainer: () => {}; indicatorSeparator: () => {}; input: () => {}; loadingIndicator: () => {}; loadingMessage: () => {}; menu: () => {}; menuList: ({ maxHeight }: { maxHeight: number; }) => { maxHeight: number; }; multiValue: () => {}; multiValueLabel: () => {}; multiValueRemove: () => {}; noOptionsMessage: () => {}; option: () => {}; placeholder: () => {}; singleValue: () => {}; valueContainer: () => {}; }

RunnerPlugin

Fri, 10 Apr 2026 22:13:30 +0000

RunnerPlugin() function

Signature

export declare function RunnerPlugin({ handler }: any): Plugin;

Import

import { RunnerPlugin } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ handler }	`any`

Returns:

Plugin

SCHEMA

Fri, 10 Apr 2026 22:13:30 +0000

SCHEMA variable

Signature

SCHEMA: SchemaProperties

Import

import { SCHEMA } from '@grafana/ui';

ScrollbarPosition

Fri, 10 Apr 2026 22:13:30 +0000

ScrollbarPosition type

Signature

export declare type ScrollbarPosition = positionValues;

Import

import { ScrollbarPosition } from '@grafana/ui';

Segment

Fri, 10 Apr 2026 22:13:30 +0000

Segment() function

Signature

export declare function Segment<T>({ options, value, onChange, Component, className, allowCustomValue, allowEmptyValue, placeholder, disabled, inputMinWidth, inputPlaceholder, onExpandedChange, autofocus, ...rest }: React.PropsWithChildren<SegmentSyncProps<T>>): JSX.Element;

Import

import { Segment } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ options, value, onChange, Component, className, allowCustomValue, allowEmptyValue, placeholder, disabled, inputMinWidth, inputPlaceholder, onExpandedChange, autofocus, …rest }	`React.PropsWithChildren<SegmentSyncProps<T>>`

Returns:

JSX.Element

SegmentAsync

Fri, 10 Apr 2026 22:13:30 +0000

SegmentAsync() function

Signature

export declare function SegmentAsync<T>({ value, onChange, loadOptions, reloadOptionsOnChange, Component, className, allowCustomValue, allowEmptyValue, disabled, placeholder, inputMinWidth, inputPlaceholder, autofocus, onExpandedChange, noOptionMessageHandler, ...rest }: React.PropsWithChildren<SegmentAsyncProps<T>>): JSX.Element;

Import

import { SegmentAsync } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ value, onChange, loadOptions, reloadOptionsOnChange, Component, className, allowCustomValue, allowEmptyValue, disabled, placeholder, inputMinWidth, inputPlaceholder, autofocus, onExpandedChange, noOptionMessageHandler, …rest }	`React.PropsWithChildren<SegmentAsyncProps<T>>`

Returns:

JSX.Element

SegmentInput

Fri, 10 Apr 2026 22:13:30 +0000

SegmentInput() function

Signature

export declare function SegmentInput<T>({ value: initialValue, onChange, Component, className, placeholder, inputPlaceholder, disabled, autofocus, onExpandedChange, ...rest }: React.PropsWithChildren<SegmentInputProps<T>>): JSX.Element;

Import

import { SegmentInput } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ value: initialValue, onChange, Component, className, placeholder, inputPlaceholder, disabled, autofocus, onExpandedChange, …rest }	`React.PropsWithChildren<SegmentInputProps<T>>`

Returns:

JSX.Element

Select

Fri, 10 Apr 2026 22:13:30 +0000

Select() function

Signature

export declare function Select<T>(props: SelectCommonProps<T>): JSX.Element;

Import

import { Select } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`SelectCommonProps<T>`

Returns:

JSX.Element

SelectableOptGroup

Fri, 10 Apr 2026 22:13:30 +0000

SelectableOptGroup interface

Signature

export interface SelectableOptGroup<T = any>

Import

import { SelectableOptGroup } from '@grafana/ui';

Properties

Property	Type	Description
label	`string`
options	`Array<SelectableValue<T>>`

label property

Signature

label: string;

options property

Signature

options: Array<SelectableValue<T>>;

SelectAsyncProps

Fri, 10 Apr 2026 22:13:30 +0000

SelectAsyncProps interface

Signature

export interface SelectAsyncProps<T>

Import

import { SelectAsyncProps } from '@grafana/ui';

Properties

Property	Type	Description
cacheOptions	`boolean`	If cacheOptions is true, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
defaultOptions	`boolean \| Array<SelectableValue<T>>`	When specified as boolean the loadOptions will execute when component is mounted
loadingMessage	`string`	Message to display when options are loading
loadOptions	`(query: string) => Promise<Array<SelectableValue<T>>>`	Asynchronously load select options

cacheOptions property

If cacheOptions is true, then the loaded data will be cached. The cache will remain until cacheOptions changes value.

Signature

cacheOptions?: boolean;

defaultOptions property

When specified as boolean the loadOptions will execute when component is mounted

Signature

defaultOptions?: boolean | Array<SelectableValue<T>>;

loadingMessage property

Message to display when options are loading

Signature

loadingMessage?: string;

loadOptions property

Asynchronously load select options

Signature

loadOptions?: (query: string) => Promise<Array<SelectableValue<T>>>;

SelectBaseProps

Fri, 10 Apr 2026 22:13:30 +0000

SelectBaseProps interface

Signature

export interface SelectBaseProps<T> extends SelectCommonProps<T>, SelectAsyncProps<T>

Import

import { SelectBaseProps } from '@grafana/ui';

Properties

Property	Type	Description
invalid	`boolean`

invalid property

Signature

invalid?: boolean;

SelectCommonProps

Fri, 10 Apr 2026 22:13:30 +0000

SelectCommonProps interface

Signature

export interface SelectCommonProps<T>

Import

import { SelectCommonProps } from '@grafana/ui';

Properties

Property	Type	Description
“aria-label”	`string`	Aria label applied to the input field
allowCreateWhileLoading	`boolean`
allowCustomValue	`boolean`
autoFocus	`boolean`	Focus is set to the Select when rendered
backspaceRemovesValue	`boolean`
className	`string`
closeMenuOnSelect	`boolean`
components	`any`	Used for custom components. For more information, see `react-select`
defaultValue	`any`
disabled	`boolean`
filterOption	`(option: SelectableValue<T>, searchQuery: string) => boolean`
formatCreateLabel	`(input: string) => string`	Function for formatting the text that is displayed when creating a new value
getOptionLabel	`(item: SelectableValue<T>) => React.ReactNode`
getOptionValue	`(item: SelectableValue<T>) => string`
id	`string`	The id to set on the SelectContainer component. To set the id for a label (with htmlFor),
inputId	`string`	The id of the search input. Use this to set a matching label with htmlFor
inputValue	`string`
invalid	`boolean`
isClearable	`boolean`
isLoading	`boolean`
isMulti	`boolean`
isOpen	`boolean`
isOptionDisabled	`() => boolean`
isSearchable	`boolean`	Disables the possibility to type into the input
isValidNewOption	`(inputValue: string, value: SelectableValue<T> \| null, options: Readonly<Array<SelectableValue<T>>>) => boolean`	allowCustomValue must be enabled. Determines whether the “create new” option should be displayed based on the current input value, select value and options array.
maxMenuHeight	`number`
maxVisibleValues	`number`
menuPlacement	`‘auto’ \| ‘bottom’ \| ’top’`
menuPosition	`‘fixed’ \| ‘absolute’`
menuShouldPortal	`boolean`
minMenuHeight	`number`
noOptionsMessage	`string`	The message to display when no options could be found
onBlur	`() => void`
onChange	`(value: SelectableValue<T>, actionMeta: ActionMeta) => {} \| void`
onCloseMenu	`() => void`
onCreateOption	`(value: string) => void`	allowCustomValue must be enabled. Function decides what to do with that custom value.
onInputChange	`(value: string, actionMeta: InputActionMeta) => void`
onKeyDown	`(event: React.KeyboardEvent) => void`
onOpenMenu	`() => void`
openMenuOnFocus	`boolean`
options	`Array<SelectableValue<T>>`
placeholder	`string`
prefix	`JSX.Element \| string \| null`	item to be rendered in front of the input
renderControl	`ControlComponent<T>`	Use a custom element to control Select. A proper ref to the renderControl is needed if ‘portal’ isn’t set to null
showAllSelectedWhenOpen	`boolean`
tabSelectsValue	`boolean`
value	`SelectValue<T> \| null`
width	`number \| ‘auto’`	Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.

“aria-label” property

Aria label applied to the input field

Signature

['aria-label']?: string;

allowCreateWhileLoading property

Signature

allowCreateWhileLoading?: boolean;

allowCustomValue property

Signature

allowCustomValue?: boolean;

autoFocus property

Focus is set to the Select when rendered

Signature

autoFocus?: boolean;

backspaceRemovesValue property

Signature

backspaceRemovesValue?: boolean;

className property

Signature

className?: string;

closeMenuOnSelect property

Signature

closeMenuOnSelect?: boolean;

components property

Used for custom components. For more information, see react-select

Signature

components?: any;

defaultValue property

Signature

defaultValue?: any;

disabled property

Signature

disabled?: boolean;

Signature

filterOption?: (option: SelectableValue<T>, searchQuery: string) => boolean;

formatCreateLabel property

Function for formatting the text that is displayed when creating a new value

Signature

formatCreateLabel?: (input: string) => string;

getOptionLabel property

Signature

getOptionLabel?: (item: SelectableValue<T>) => React.ReactNode;

getOptionValue property

Signature

getOptionValue?: (item: SelectableValue<T>) => string;

id property

The id to set on the SelectContainer component. To set the id for a label (with htmlFor),

Signature

id?: string;

inputId property

The id of the search input. Use this to set a matching label with htmlFor

Signature

inputId?: string;

inputValue property

Signature

inputValue?: string;

invalid property

Signature

invalid?: boolean;

isClearable property

Signature

isClearable?: boolean;

isLoading property

Signature

isLoading?: boolean;

isMulti property

Signature

isMulti?: boolean;

isOpen property

Signature

isOpen?: boolean;

isOptionDisabled property

Signature

isOptionDisabled?: () => boolean;

isSearchable property

Disables the possibility to type into the input

Signature

isSearchable?: boolean;

isValidNewOption property

allowCustomValue must be enabled. Determines whether the “create new” option should be displayed based on the current input value, select value and options array.

Signature

isValidNewOption?: (inputValue: string, value: SelectableValue<T> | null, options: Readonly<Array<SelectableValue<T>>>) => boolean;

maxMenuHeight property

Signature

maxMenuHeight?: number;

maxVisibleValues property

Signature

maxVisibleValues?: number;

menuPlacement property

Signature

menuPlacement?: 'auto' | 'bottom' | 'top';

menuPosition property

Signature

menuPosition?: 'fixed' | 'absolute';

menuShouldPortal property

Signature

menuShouldPortal?: boolean;

minMenuHeight property

Signature

minMenuHeight?: number;

noOptionsMessage property

The message to display when no options could be found

Signature

noOptionsMessage?: string;

onBlur property

Signature

onBlur?: () => void;

onChange property

Signature

onChange: (value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void;

onCloseMenu property

Signature

onCloseMenu?: () => void;

onCreateOption property

allowCustomValue must be enabled. Function decides what to do with that custom value.

Signature

onCreateOption?: (value: string) => void;

onInputChange property

Signature

onInputChange?: (value: string, actionMeta: InputActionMeta) => void;

onKeyDown property

Signature

onKeyDown?: (event: React.KeyboardEvent) => void;

onOpenMenu property

Signature

onOpenMenu?: () => void;

openMenuOnFocus property

Signature

openMenuOnFocus?: boolean;

options property

Signature

options?: Array<SelectableValue<T>>;

placeholder property

Signature

placeholder?: string;

prefix property

item to be rendered in front of the input

Signature

prefix?: JSX.Element | string | null;

renderControl property

Use a custom element to control Select. A proper ref to the renderControl is needed if ‘portal’ isn’t set to null

Signature

renderControl?: ControlComponent<T>;

showAllSelectedWhenOpen property

Signature

showAllSelectedWhenOpen?: boolean;

tabSelectsValue property

Signature

tabSelectsValue?: boolean;

value property

Signature

value?: SelectValue<T> | null;

width property

Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.

Signature

width?: number | 'auto';

SelectContainer

Fri, 10 Apr 2026 22:13:30 +0000

SelectContainer variable

Signature

SelectContainer: <Option, isMulti extends boolean, Group extends GroupTypeBase<Option>>(props: SelectContainerProps<Option, isMulti, Group>) => JSX.Element

Import

import { SelectContainer } from '@grafana/ui';

SelectContainerProps

Fri, 10 Apr 2026 22:13:30 +0000

SelectContainerProps interface

Signature

export interface SelectContainerProps<Option, isMulti extends boolean, Group extends GroupTypeBase<Option>> extends BaseContainerProps<Option, isMulti, Group>

Import

import { SelectContainerProps } from '@grafana/ui';

Properties

Property	Type	Description
isFocused	`boolean`

isFocused property

Signature

isFocused: boolean;

SelectionShortcutsPlugin

Fri, 10 Apr 2026 22:13:30 +0000

SelectionShortcutsPlugin() function

Signature

export declare function SelectionShortcutsPlugin(): Plugin;

Import

import { SelectionShortcutsPlugin } from '@grafana/ui';

Returns:

Plugin

selectOptionInTest

Fri, 10 Apr 2026 22:13:30 +0000

selectOptionInTest variable

Signature

selectOptionInTest: (input: HTMLElement, optionOrOptions: string | RegExp | Array<string | RegExp>) => Promise<void>

Import

import { selectOptionInTest } from '@grafana/ui';

SelectOptions

Fri, 10 Apr 2026 22:13:30 +0000

SelectOptions type

Signature

export declare type SelectOptions<T = any> = SelectableValue<T> | Array<SelectableValue<T> | SelectableOptGroup<T> | Array<SelectableOptGroup<T>>>;

Import

import { SelectOptions } from '@grafana/ui';

SelectValue

Fri, 10 Apr 2026 22:13:30 +0000

SelectValue type

Signature

export declare type SelectValue<T> = T | SelectableValue<T> | T[] | Array<SelectableValue<T>>;

Import

import { SelectValue } from '@grafana/ui';

SelectValueEditor

Fri, 10 Apr 2026 22:13:30 +0000

SelectValueEditor class

Signature

export declare class SelectValueEditor<T> extends React.PureComponent<Props<T>, State<T>>

Import

import { SelectValueEditor } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
state		`State<T>`
updateOptions		`() => Promise<void>`

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(oldProps)
render()

state property

Signature

state: State<T>;

updateOptions property

Signature

updateOptions: () => Promise<void>;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(oldProps: Props<T>): void;

Parameters

Parameter	Type	Description
oldProps	`Props<T>`

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

SeriesColorPicker

Fri, 10 Apr 2026 22:13:30 +0000

SeriesColorPicker variable

Signature

SeriesColorPicker: React.FunctionComponent<{
    color: string;
    onChange: ColorPickerChangeHandler;
    children?: ColorPickerTriggerRenderer | undefined;
    onColorChange?: ColorPickerChangeHandler | undefined;
    enableNamedColors?: boolean | undefined;
    updatePopperPosition?: (() => void) | undefined;
    yaxis?: number | undefined;
    onToggleAxis?: (() => void) | undefined;
}>

Import

import { SeriesColorPicker } from '@grafana/ui';

SeriesColorPickerPopover

Fri, 10 Apr 2026 22:13:30 +0000

SeriesColorPickerPopover variable

Signature

SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps>

Import

import { SeriesColorPickerPopover } from '@grafana/ui';

SeriesColorPickerPopoverWithTheme

Fri, 10 Apr 2026 22:13:30 +0000

SeriesColorPickerPopoverWithTheme variable

Signature

SeriesColorPickerPopoverWithTheme: React.FunctionComponent<{
    color: string;
    onChange: import("./ColorPickerPopover").ColorPickerChangeHandler;
    onColorChange?: import("./ColorPickerPopover").ColorPickerChangeHandler | undefined;
    enableNamedColors?: boolean | undefined;
    updatePopperPosition?: (() => void) | undefined;
    yaxis?: number | undefined;
    onToggleAxis?: (() => void) | undefined;
}>

Import

import { SeriesColorPickerPopoverWithTheme } from '@grafana/ui';

SeriesIcon

Fri, 10 Apr 2026 22:13:30 +0000

SeriesIcon variable

Signature

SeriesIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>

Import

import { SeriesIcon } from '@grafana/ui';

SeriesTable

Fri, 10 Apr 2026 22:13:30 +0000

SeriesTable variable

Signature

SeriesTable: React.FC<SeriesTableProps>

Import

import { SeriesTable } from '@grafana/ui';

SeriesTableProps

Fri, 10 Apr 2026 22:13:30 +0000

SeriesTableProps interface

Signature

export interface SeriesTableProps

Import

import { SeriesTableProps } from '@grafana/ui';

Properties

Property	Type	Description
series	`SeriesTableRowProps[]`
timestamp	`string \| GraphSeriesValue`

series property

Signature

series: SeriesTableRowProps[];

timestamp property

Signature

timestamp?: string | GraphSeriesValue;

SeriesTableRow

Fri, 10 Apr 2026 22:13:30 +0000

SeriesTableRow variable

Signature

SeriesTableRow: React.FC<SeriesTableRowProps>

Import

import { SeriesTableRow } from '@grafana/ui';

SeriesTableRowProps

Fri, 10 Apr 2026 22:13:30 +0000

SeriesTableRowProps interface

Signature

export interface SeriesTableRowProps

Import

import { SeriesTableRowProps } from '@grafana/ui';

Properties

Property	Type	Description
color	`string`
isActive	`boolean`
label	`string`
value	`string \| GraphSeriesValue`

color property

Signature

color?: string;

isActive property

Signature

isActive?: boolean;

label property

Signature

label?: string;

value property

Signature

value?: string | GraphSeriesValue;

SeriesVisibilityChangeBehavior

Fri, 10 Apr 2026 22:13:30 +0000

SeriesVisibilityChangeBehavior enum

Signature

export declare enum SeriesVisibilityChangeBehavior

Import

import { SeriesVisibilityChangeBehavior } from '@grafana/ui';

Enumeration Members

Member	Value	Description
Hide	`1`
Isolate	`0`

SetInterval

Fri, 10 Apr 2026 22:13:30 +0000

SetInterval class

Signature

export declare class SetInterval extends PureComponent<Props>

Import

import { SetInterval } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `SetInterval` class

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(prevProps)
componentWillUnmount()
render()

constructor(props)

Constructs a new instance of the SetInterval class

Signature

constructor(props: Props);

Parameters

Parameter	Type	Description
props	`Props`

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: Props): void;

Parameters

Parameter	Type	Description
prevProps	`Props`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): null;

Returns:

null

sharedInputStyle

Fri, 10 Apr 2026 22:13:30 +0000

sharedInputStyle variable

Signature

sharedInputStyle: (theme: GrafanaTheme2, invalid?: boolean) => string

Import

import { sharedInputStyle } from '@grafana/ui';

sharedSingleStatMigrationHandler

Fri, 10 Apr 2026 22:13:30 +0000

sharedSingleStatMigrationHandler() function

Signature

export declare function sharedSingleStatMigrationHandler(panel: PanelModel<SingleStatBaseOptions>): SingleStatBaseOptions;

Import

import { sharedSingleStatMigrationHandler } from '@grafana/ui';

Parameters

Parameter	Type	Description
panel	`PanelModel<SingleStatBaseOptions>`

Returns:

SingleStatBaseOptions

sharedSingleStatPanelChangedHandler

Fri, 10 Apr 2026 22:13:30 +0000

sharedSingleStatPanelChangedHandler() function

Signature

export declare function sharedSingleStatPanelChangedHandler(panel: PanelModel<Partial<SingleStatBaseOptions>> | any, prevPluginId: string, prevOptions: any): any;

Import

import { sharedSingleStatPanelChangedHandler } from '@grafana/ui';

Parameters

Parameter	Type	Description
panel	`PanelModel<Partial<SingleStatBaseOptions>> \| any`
prevPluginId	`string`
prevOptions	`any`

Returns:

any

SingleStatBaseOptions

Fri, 10 Apr 2026 22:13:30 +0000

SingleStatBaseOptions interface

Signature

export interface SingleStatBaseOptions extends OptionsWithTextFormatting

Import

import { SingleStatBaseOptions } from '@grafana/ui';

Properties

Property	Type	Description
orientation	`VizOrientation`
reduceOptions	`ReduceDataOptions`

orientation property

Signature

orientation: VizOrientation;

reduceOptions property

Signature

reduceOptions: ReduceDataOptions;

SlatePrism

Fri, 10 Apr 2026 22:13:30 +0000

SlatePrism() function

A Slate plugin to highlight code syntax.

Signature

export declare function SlatePrism(optsParam?: OptionsFormat, prismLanguages?: Prism.LanguageMap): Plugin;

Import

import { SlatePrism } from '@grafana/ui';

Parameters

Parameter	Type	Description
optsParam	`OptionsFormat`
prismLanguages	`Prism.LanguageMap`

Returns:

Plugin

SlideOutTransition

Fri, 10 Apr 2026 22:13:30 +0000

SlideOutTransition() function

Signature

export declare function SlideOutTransition(props: Props): JSX.Element;

Import

import { SlideOutTransition } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`Props`

Returns:

JSX.Element

Slider

Fri, 10 Apr 2026 22:13:30 +0000

Slider variable

Signature

Slider: FunctionComponent<SliderProps>

Import

import { Slider } from '@grafana/ui';

SliderValueEditor

Fri, 10 Apr 2026 22:13:30 +0000

SliderValueEditor variable

Signature

SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>>

Import

import { SliderValueEditor } from '@grafana/ui';

sortedColors

Fri, 10 Apr 2026 22:13:30 +0000

sortedColors variable

Signature

sortedColors: string[]

Import

import { sortedColors } from '@grafana/ui';

Spinner

Fri, 10 Apr 2026 22:13:30 +0000

Spinner variable

Signature

Spinner: FC<Props>

Import

import { Spinner } from '@grafana/ui';

StackingEditor

Fri, 10 Apr 2026 22:13:30 +0000

commonOptionsBuilder.StackingEditor variable

Signature

StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>>

Import

import { commonOptionsBuilder } from '@grafana/ui';
const { StackingEditor } = commonOptionsBuilder;

StatsPicker

Fri, 10 Apr 2026 22:13:30 +0000

StatsPicker class

Signature

export declare class StatsPicker extends PureComponent<Props>

Import

import { StatsPicker } from '@grafana/ui';

Properties

Property	Modifiers	Type
checkInput		`() => void`
defaultProps	`static`	`Partial<Props>`
onSelectionChange		`(item: SelectableValue<string>) => void`

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(prevProps)
render()

checkInput property

Signature

checkInput: () => void;

defaultProps property

Signature

static defaultProps: Partial<Props>;

onSelectionChange property

Signature

onSelectionChange: (item: SelectableValue<string>) => void;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: Props): void;

Parameters

Parameter	Type	Description
prevProps	`Props`

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

StringArrayEditor

Fri, 10 Apr 2026 22:13:30 +0000

StringArrayEditor class

Signature

export declare class StringArrayEditor extends React.PureComponent<Props, State>

Import

import { StringArrayEditor } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
onRemoveString		`(index: number) => void`
onValueChange		`(e: React.SyntheticEvent, idx: number) => void`
state		`{` `showAdd: boolean;` `}`

Methods

Method	Modifiers	Description
render()

onRemoveString property

Signature

onRemoveString: (index: number) => void;

onValueChange property

Signature

onValueChange: (e: React.SyntheticEvent, idx: number) => void;

state property

Signature

state: {
        showAdd: boolean;
    };

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

StringValueEditor

Fri, 10 Apr 2026 22:13:30 +0000

StringValueEditor variable

Signature

StringValueEditor: React.FC<StandardEditorProps<string, StringFieldConfigSettings>>

Import

import { StringValueEditor } from '@grafana/ui';

styleMixins

Fri, 10 Apr 2026 22:13:30 +0000

styleMixins namespace

styleMixins namespace

Import

import { styleMixins } from '@grafana/ui';

Functions

Function	Description
cardChrome(theme)
getFocusStyles(theme)
getMouseFocusStyles(theme)
hoverColor(color, theme)
listItem(theme)
listItemSelected(theme)
mediaUp(breakpoint)

Variables

Variable	Description
focusCss
getTooltipContainerStyles

stylesFactory

Fri, 10 Apr 2026 22:13:30 +0000

stylesFactory() function

Signature

export declare function stylesFactory<ResultFn extends (this: any, ...newArgs: any[]) => ReturnType<ResultFn>>(stylesCreator: ResultFn): import("memoize-one").MemoizedFn<ResultFn>;

Import

import { stylesFactory } from '@grafana/ui';

Parameters

Parameter	Type	Description
stylesCreator	`ResultFn`	function accepting dependencies based on which styles are created

Returns:

import("memoize-one").MemoizedFn<ResultFn>

SuggestionsPlugin

Fri, 10 Apr 2026 22:13:30 +0000

SuggestionsPlugin() function

Signature

export declare function SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, }: {
    onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
    cleanText?: (text: string) => string;
    onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;
    portalOrigin: string;
}): SlatePlugin;

Import

import { SuggestionsPlugin } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, }	`{` `onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;` `cleanText?: (text: string) => string;` `onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;` `portalOrigin: string;` `}`

Returns:

SlatePlugin

SuggestionsState

Fri, 10 Apr 2026 22:13:30 +0000

SuggestionsState interface

Signature

export interface SuggestionsState

Import

import { SuggestionsState } from '@grafana/ui';

Properties

Property	Type	Description
groupedItems	`CompletionItemGroup[]`
typeaheadContext	`string`
typeaheadPrefix	`string`
typeaheadText	`string`

groupedItems property

Signature

groupedItems: CompletionItemGroup[];

typeaheadContext property

Signature

typeaheadContext: string;

typeaheadPrefix property

Signature

typeaheadPrefix: string;

typeaheadText property

Signature

typeaheadText: string;

Switch

Fri, 10 Apr 2026 22:13:30 +0000

Switch variable

Signature

Switch: React.ForwardRefExoticComponent<Pick<Props, "name" | "min" | "value" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "transparent" | "action" | "disabled" | "selected" | "shape" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

import { Switch } from '@grafana/ui';

Tab

Fri, 10 Apr 2026 22:13:30 +0000

Tab variable

Signature

Tab: React.ForwardRefExoticComponent<Pick<TabProps, "name" | "min" | "value" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "action" | "disabled" | "selected" | "shape" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "icon" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "active" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "onChangeTab" | "counter"> & React.RefAttributes<HTMLAnchorElement>>

Import

import { Tab } from '@grafana/ui';

TabbedContainer

Fri, 10 Apr 2026 22:13:30 +0000

TabbedContainer() function

Signature

export declare function TabbedContainer(props: TabbedContainerProps): JSX.Element;

Import

import { TabbedContainer } from '@grafana/ui';

Parameters

Parameter	Type	Description
props	`TabbedContainerProps`

Returns:

JSX.Element

TabConfig

Fri, 10 Apr 2026 22:13:30 +0000

TabConfig interface

Signature

export interface TabConfig

Import

import { TabConfig } from '@grafana/ui';

Properties

Property	Type	Description
content	`React.ReactNode`
icon	`IconName`
label	`string`
value	`string`

content property

Signature

content: React.ReactNode;

icon property

Signature

icon: IconName;

label property

Signature

label: string;

value property

Signature

value: string;

TabContent

Fri, 10 Apr 2026 22:13:30 +0000

TabContent variable

Signature

TabContent: FC<Props>

Import

import { TabContent } from '@grafana/ui';

Table

Fri, 10 Apr 2026 22:13:30 +0000

Table variable

Signature

Table: FC<Props>

Import

import { Table } from '@grafana/ui';

TableInputCSV

Fri, 10 Apr 2026 22:13:30 +0000

TableInputCSV variable

Signature

TableInputCSV: React.FunctionComponent<{
    text: string;
    config?: CSVConfig | undefined;
    height: string | number;
    width: string | number;
    onSeriesParsed: (data: DataFrame[], text: string) => void;
}>

Import

import { TableInputCSV } from '@grafana/ui';

TableSortByFieldState

Fri, 10 Apr 2026 22:13:30 +0000

TableSortByFieldState interface

Signature

export interface TableSortByFieldState

Import

import { TableSortByFieldState } from '@grafana/ui';

Properties

Property	Type	Description
desc	`boolean`
displayName	`string`

desc property

Signature

desc?: boolean;

displayName property

Signature

displayName: string;

TabsBar

Fri, 10 Apr 2026 22:13:30 +0000

TabsBar variable

Signature

TabsBar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>

Import

import { TabsBar } from '@grafana/ui';

Tag

Fri, 10 Apr 2026 22:13:30 +0000

Tag variable

Signature

Tag: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>

Import

import { Tag } from '@grafana/ui';

TagList

Fri, 10 Apr 2026 22:13:30 +0000

Signature

TagList: FC<Props>

Import

import { TagList } from '@grafana/ui';

TagsInput

Fri, 10 Apr 2026 22:13:30 +0000

TagsInput variable

Signature

TagsInput: FC<Props>

Import

import { TagsInput } from '@grafana/ui';

TextArea

Fri, 10 Apr 2026 22:13:30 +0000

TextArea variable

Signature

TextArea: React.ForwardRefExoticComponent<Pick<Props, "name" | "min" | "value" | "prefix" | "type" | "target" | "id" | "title" | "color" | "onChange" | "onBlur" | "data" | "action" | "disabled" | "selected" | "shape" | "max" | "step" | "key" | "rows" | "pattern" | "style" | "label" | "readOnly" | "children" | "cite" | "form" | "slot" | "span" | "summary" | "default" | "capture" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "height" | "media" | "method" | "width" | "crossOrigin" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "invalid" | "alt" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLTextAreaElement>>

Import

import { TextArea } from '@grafana/ui';

Themeable

Fri, 10 Apr 2026 22:13:30 +0000

Themeable interface

Signature

export interface Themeable

Import

import { Themeable } from '@grafana/ui';

Properties

Property	Type	Description
theme	`GrafanaTheme`

theme property

Signature

theme: GrafanaTheme;

Themeable2

Fri, 10 Apr 2026 22:13:30 +0000

Themeable2 interface

Signature

export interface Themeable2

Import

import { Themeable2 } from '@grafana/ui';

Properties

Property	Type	Description
theme	`GrafanaTheme2`

theme property

Signature

theme: GrafanaTheme2;

ThemeContext

Fri, 10 Apr 2026 22:13:30 +0000

ThemeContext variable

Signature

ThemeContext: React.Context<GrafanaTheme2>

Import

import { ThemeContext } from '@grafana/ui';

TimeOfDayPicker

Fri, 10 Apr 2026 22:13:30 +0000

TimeOfDayPicker variable

Signature

TimeOfDayPicker: FC<Props>

Import

import { TimeOfDayPicker } from '@grafana/ui';

TimeRangeInput

Fri, 10 Apr 2026 22:13:30 +0000

TimeRangeInput variable

Signature

TimeRangeInput: FC<TimeRangeInputProps>

Import

import { TimeRangeInput } from '@grafana/ui';

TimeRangePicker

Fri, 10 Apr 2026 22:13:30 +0000

TimeRangePicker variable

Signature

TimeRangePicker: React.FunctionComponent<{
    fiscalYearStartMonth?: number | undefined;
    timeZone?: string | undefined;
    value: TimeRange;
    onChange: (timeRange: TimeRange) => void;
    history?: TimeRange[] | undefined;
    onChangeTimeZone: (timeZone: TimeZone) => void;
    onChangeFiscalYearStartMonth?: ((month: number) => void) | undefined;
    hideQuickRanges?: boolean | undefined;
    onMoveBackward: () => void;
    onMoveForward: () => void;
    onZoom: () => void;
    timeSyncButton?: JSX.Element | undefined;
    isSynced?: boolean | undefined;
    hideText?: boolean | undefined;
}>

Import

import { TimeRangePicker } from '@grafana/ui';

TimeRangePickerProps

Fri, 10 Apr 2026 22:13:30 +0000

TimeRangePickerProps interface

Signature

export interface TimeRangePickerProps extends Themeable

Import

import { TimeRangePickerProps } from '@grafana/ui';

Properties

Property	Type	Description
fiscalYearStartMonth	`number`
hideQuickRanges	`boolean`
hideText	`boolean`
history	`TimeRange[]`
isSynced	`boolean`
onChange	`(timeRange: TimeRange) => void`
onChangeFiscalYearStartMonth	`(month: number) => void`
onChangeTimeZone	`(timeZone: TimeZone) => void`
onMoveBackward	`() => void`
onMoveForward	`() => void`
onZoom	`() => void`
timeSyncButton	`JSX.Element`
timeZone	`TimeZone`
value	`TimeRange`

fiscalYearStartMonth property

Signature

fiscalYearStartMonth?: number;

hideQuickRanges property

Signature

hideQuickRanges?: boolean;

hideText property

Signature

hideText?: boolean;

history property

Signature

history?: TimeRange[];

isSynced property

Signature

isSynced?: boolean;

onChange property

Signature

onChange: (timeRange: TimeRange) => void;

onChangeFiscalYearStartMonth property

Signature

onChangeFiscalYearStartMonth?: (month: number) => void;

onChangeTimeZone property

Signature

onChangeTimeZone: (timeZone: TimeZone) => void;

onMoveBackward property

Signature

onMoveBackward: () => void;

onMoveForward property

Signature

onMoveForward: () => void;

onZoom property

Signature

onZoom: () => void;

timeSyncButton property

Signature

timeSyncButton?: JSX.Element;

timeZone property

Signature

timeZone?: TimeZone;

value property

Signature

value: TimeRange;

TimeSeries

Fri, 10 Apr 2026 22:13:30 +0000

TimeSeries variable

Signature

TimeSeries: React.FunctionComponent<{
    timeZone: string;
    options?: Record<string, any> | undefined;
    fields?: import("../GraphNG/types").XYFieldMatchers | undefined;
    children?: ((builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode) | undefined;
    legend: import("@grafana/schema").VizLegendOptions;
    height: number;
    width: number;
    timeRange: TimeRange;
    frames: DataFrame[];
    structureRev?: number | undefined;
    renderers?: import("../uPlot/config/UPlotConfigBuilder").Renderers | undefined;
    tweakScale?: ((opts: import("../uPlot/config/UPlotScaleBuilder").ScaleProps, forField: import("@grafana/data").Field<any, import("@grafana/data").Vector<any>>) => import("../uPlot/config/UPlotScaleBuilder").ScaleProps) | undefined;
    tweakAxis?: ((opts: import("../uPlot/config/UPlotAxisBuilder").AxisProps, forField: import("@grafana/data").Field<any, import("@grafana/data").Vector<any>>) => import("../uPlot/config/UPlotAxisBuilder").AxisProps) | undefined;
    onLegendClick?: ((event: import("..").GraphNGLegendEvent) => void) | undefined;
    preparePlotFrame?: ((frames: DataFrame[], dimFields: import("../GraphNG/types").XYFieldMatchers) => DataFrame) | undefined;
}>

Import

import { TimeSeries } from '@grafana/ui';

TimeZonePicker

Fri, 10 Apr 2026 22:13:30 +0000

TimeZonePicker variable

Signature

TimeZonePicker: React.FC<Props>

Import

import { TimeZonePicker } from '@grafana/ui';

TLSAuthSettings

Fri, 10 Apr 2026 22:13:30 +0000

TLSAuthSettings variable

Signature

TLSAuthSettings: React.FC<HttpSettingsBaseProps>

Import

import { TLSAuthSettings } from '@grafana/ui';

Token

Fri, 10 Apr 2026 22:13:30 +0000

Token interface

Signature

export interface Token

Import

import { Token } from '@grafana/ui';

Properties

Property	Type	Description
aliases	`string[]`
content	`string`
next	`Token \| null`
offsets	`{` `start: number;` `end: number;` `}`
prev	`Token \| null`
types	`string[]`

aliases property

Signature

aliases: string[];

content property

Signature

content: string;

next property

Signature

next?: Token | null;

offsets property

Signature

offsets?: {
        start: number;
        end: number;
    };

prev property

Signature

prev?: Token | null;

types property

Signature

types: string[];

ToolbarButton

Fri, 10 Apr 2026 22:13:30 +0000

ToolbarButton variable

Signature

ToolbarButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>

Import

import { ToolbarButton } from '@grafana/ui';

ToolbarButtonRow

Fri, 10 Apr 2026 22:13:30 +0000

ToolbarButtonRow variable

Signature

ToolbarButtonRow: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>

Import

import { ToolbarButtonRow } from '@grafana/ui';

Tooltip

Fri, 10 Apr 2026 22:13:30 +0000

Tooltip variable

Signature

Tooltip: FC<TooltipProps>

Import

import { Tooltip } from '@grafana/ui';

TypeaheadInput

Fri, 10 Apr 2026 22:13:30 +0000

TypeaheadInput interface

Signature

export interface TypeaheadInput

Import

import { TypeaheadInput } from '@grafana/ui';

Properties

Property	Type	Description
editor	`CoreEditor`
labelKey	`string`
prefix	`string`
text	`string`
value	`Value`
wrapperClasses	`string[]`

editor property

Signature

editor?: CoreEditor;

labelKey property

Signature

labelKey?: string;

prefix property

Signature

prefix: string;

text property

Signature

text: string;

value property

Signature

value?: Value;

wrapperClasses property

Signature

wrapperClasses: string[];

TypeaheadOutput

Fri, 10 Apr 2026 22:13:30 +0000

TypeaheadOutput interface

Signature

export interface TypeaheadOutput

Import

import { TypeaheadOutput } from '@grafana/ui';

Properties

Property	Type	Description
context	`string`
suggestions	`CompletionItemGroup[]`

context property

Signature

context?: string;

suggestions property

Signature

suggestions: CompletionItemGroup[];

UnitPicker

Fri, 10 Apr 2026 22:13:30 +0000

UnitPicker class

Signature

export declare class UnitPicker extends PureComponent<Props>

Import

import { UnitPicker } from '@grafana/ui';

Properties

Property	Modifiers	Type	Description
onChange		`(value: SelectableValue<string>) => void`

Methods

Method	Modifiers	Description
render()

onChange property

Signature

onChange: (value: SelectableValue<string>) => void;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

UPLOT_AXIS_FONT_SIZE

Fri, 10 Apr 2026 22:13:30 +0000

UPLOT_AXIS_FONT_SIZE variable

Signature

UPLOT_AXIS_FONT_SIZE = 12

Import

import { UPLOT_AXIS_FONT_SIZE } from '@grafana/ui';

UPlotConfigBuilder

Fri, 10 Apr 2026 22:13:30 +0000

UPlotConfigBuilder class

Signature

export declare class UPlotConfigBuilder

Import

import { UPlotConfigBuilder } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(timeZone)		Constructs a new instance of the `UPlotConfigBuilder` class

Properties

Property	Modifiers	Type	Description
prepData		`PrepData \| undefined`
scaleKeys		`[string, string]`

Methods

Method	Modifiers	Description
addAxis(props)
addBand(band)
addHook(type, hook)
addScale(props)		Add or update the scale with the scale key
addSeries(props)
addThresholds(options)
getAxisPlacement(scaleKey)
getConfig()
getSeries()
getTooltipInterpolator()
hasSync()
setCursor(cursor)
setMode(mode)
setPadding(padding)
setPrepData(prepData)
setSelect(select)
setSync()
setTooltipInterpolator(interpolator)

constructor(timeZone)

Constructs a new instance of the UPlotConfigBuilder class

Signature

constructor(timeZone?: TimeZone);

Parameters

Parameter	Type	Description
timeZone	`TimeZone`

prepData property

Signature

prepData: PrepData | undefined;

scaleKeys property

Signature

scaleKeys: [string, string];

addAxis method

Signature

addAxis(props: AxisProps): void;

Parameters

Parameter	Type	Description
props	`AxisProps`

Returns:

void

addBand method

Signature

addBand(band: Band): void;

Parameters

Parameter	Type	Description
band	`Band`

Returns:

void

addHook method

Signature

addHook<T extends keyof Hooks.Defs>(type: T, hook: Hooks.Defs[T]): void;

Parameters

Parameter	Type	Description
type	`T`
hook	`Hooks.Defs[T]`

Returns:

void

addScale method

Add or update the scale with the scale key

Signature

addScale(props: ScaleProps): void;

Parameters

Parameter	Type	Description
props	`ScaleProps`

Returns:

void

addSeries method

Signature

addSeries(props: SeriesProps): void;

Parameters

Parameter	Type	Description
props	`SeriesProps`

Returns:

void

addThresholds method

Signature

addThresholds(options: UPlotThresholdOptions): void;

Parameters

Parameter	Type	Description
options	`UPlotThresholdOptions`

Returns:

void

getAxisPlacement method

Signature

getAxisPlacement(scaleKey: string): AxisPlacement;

Parameters

Parameter	Type	Description
scaleKey	`string`

Returns:

AxisPlacement

getConfig method

Signature

getConfig(): PlotConfig;

Returns:

PlotConfig

getSeries method

Signature

getSeries(): UPlotSeriesBuilder[];

Returns:

UPlotSeriesBuilder[]

getTooltipInterpolator method

Signature

getTooltipInterpolator(): PlotTooltipInterpolator | undefined;

Returns:

PlotTooltipInterpolator | undefined

hasSync method

Signature

hasSync(): boolean;

Returns:

boolean

setCursor method

Signature

setCursor(cursor?: Cursor): void;

Parameters

Parameter	Type	Description
cursor	`Cursor`

Returns:

void

setMode method

Signature

setMode(mode: uPlot.Mode): void;

Parameters

Parameter	Type	Description
mode	`uPlot.Mode`

Returns:

void

setPadding method

Signature

setPadding(padding: Padding): void;

Parameters

Parameter	Type	Description
padding	`Padding`

Returns:

void

setPrepData method

Signature

setPrepData(prepData: PrepData): void;

Parameters

Parameter	Type	Description
prepData	`PrepData`

Returns:

void

setSelect method

Signature

setSelect(select: Select): void;

Parameters

Parameter	Type	Description
select	`Select`

Returns:

void

setSync method

Signature

setSync(): void;

Returns:

void

setTooltipInterpolator method

Signature

setTooltipInterpolator(interpolator: PlotTooltipInterpolator): void;

Parameters

Parameter	Type	Description
interpolator	`PlotTooltipInterpolator`

Returns:

void

useStyles

Fri, 10 Apr 2026 22:13:30 +0000

useStyles() function

Signature

export declare function useStyles<T>(getStyles: (theme: GrafanaTheme) => T): T;

Import

import { useStyles } from '@grafana/ui';

Parameters

Parameter	Type	Description
getStyles	`(theme: GrafanaTheme) => T`

Returns:

T

useStyles2

Fri, 10 Apr 2026 22:13:30 +0000

useStyles2() function

Signature

export declare function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T): T;

Import

import { useStyles2 } from '@grafana/ui';

Parameters

Parameter	Type	Description
getStyles	`(theme: GrafanaTheme2) => T`

Returns:

T

useTheme

Fri, 10 Apr 2026 22:13:30 +0000

useTheme() function

Signature

export declare function useTheme(): GrafanaTheme;

Import

import { useTheme } from '@grafana/ui';

Returns:

GrafanaTheme

useTheme2

Fri, 10 Apr 2026 22:13:30 +0000

useTheme2() function

Signature

export declare function useTheme2(): GrafanaTheme2;

Import

import { useTheme2 } from '@grafana/ui';

Returns:

GrafanaTheme2

validate

Fri, 10 Apr 2026 22:13:30 +0000

validate variable

Signature

validate: (value: string, validationRules: ValidationRule[]) => string[] | null

Import

import { validate } from '@grafana/ui';

ValidationEvents

Fri, 10 Apr 2026 22:13:30 +0000

ValidationEvents interface

Signature

export interface ValidationEvents

Import

import { ValidationEvents } from '@grafana/ui';

ValidationRule

Fri, 10 Apr 2026 22:13:30 +0000

ValidationRule interface

Signature

export interface ValidationRule

Import

import { ValidationRule } from '@grafana/ui';

Properties

Property	Type	Description
errorMessage	`string`
rule	`(valueToValidate: string) => boolean`

errorMessage property

Signature

errorMessage: string;

rule property

Signature

rule: (valueToValidate: string) => boolean;

ValuePicker

Fri, 10 Apr 2026 22:13:30 +0000

ValuePicker() function

Signature

export declare function ValuePicker<T>({ label, icon, options, onChange, variant, minWidth, size, isFullWidth, menuPlacement, }: ValuePickerProps<T>): JSX.Element;

Import

import { ValuePicker } from '@grafana/ui';

Parameters

Parameter	Type	Description
{ label, icon, options, onChange, variant, minWidth, size, isFullWidth, menuPlacement, }	`ValuePickerProps<T>`

Returns:

JSX.Element

VerticalGroup

Fri, 10 Apr 2026 22:13:30 +0000

VerticalGroup variable

Signature

VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>>

Import

import { VerticalGroup } from '@grafana/ui';

VizLayout

Fri, 10 Apr 2026 22:13:30 +0000

VizLayout variable

VizLayout variable

Signature

VizLayout: VizLayoutComponentType

Import

import { VizLayout } from '@grafana/ui';

VizLayoutComponentType

Fri, 10 Apr 2026 22:13:30 +0000

VizLayoutComponentType interface

Signature

export interface VizLayoutComponentType extends FC<VizLayoutProps>

Import

import { VizLayoutComponentType } from '@grafana/ui';

Properties

Property	Type	Description
Legend	`ComponentType<VizLayoutLegendProps>`	*(BETA)*

Legend property

Signature

Legend: ComponentType<VizLayoutLegendProps>;

VizLayoutLegendProps

Fri, 10 Apr 2026 22:13:30 +0000

VizLayoutLegendProps interface

Signature

export interface VizLayoutLegendProps

Import

import { VizLayoutLegendProps } from '@grafana/ui';

Properties

Property	Type	Description
children	`React.ReactNode`	*(BETA)*
maxHeight	`string`	*(BETA)*
maxWidth	`string`	*(BETA)*
placement	`LegendPlacement`	*(BETA)*

children property

Signature

children: React.ReactNode;

maxHeight property

Signature

maxHeight?: string;

maxWidth property

Signature

maxWidth?: string;

placement property

Signature

placement: LegendPlacement;

VizLayoutProps

Fri, 10 Apr 2026 22:13:30 +0000

VizLayoutProps interface

Signature

export interface VizLayoutProps

Import

import { VizLayoutProps } from '@grafana/ui';

Properties

Property	Type	Description
children	`(width: number, height: number) => React.ReactNode`	*(BETA)*
height	`number`	*(BETA)*
legend	`React.ReactElement<VizLayoutLegendProps> \| null`	*(BETA)*
width	`number`	*(BETA)*

children property

Signature

children: (width: number, height: number) => React.ReactNode;

height property

Signature

height: number;

legend property

Signature

legend?: React.ReactElement<VizLayoutLegendProps> | null;

width property

Signature

width: number;

VizLegend

Fri, 10 Apr 2026 22:13:30 +0000

VizLegend namespace

Signature

export declare namespace VizLegend

Import

import { VizLegend } from '@grafana/ui';

Variables

Variable	Description
displayName

VizLegendItem

Fri, 10 Apr 2026 22:13:30 +0000

VizLegendItem interface

Signature

export interface VizLegendItem<T = any>

Import

import { VizLegendItem } from '@grafana/ui';

Properties

Property	Type	Description
color	`string`
data	`T`
disabled	`boolean`
fieldIndex	`DataFrameFieldIndex`
getDisplayValues	`() => DisplayValue[]`
getItemKey	`() => string`
gradient	`string`
label	`string`
yAxis	`number`

color property

Signature

color?: string;

data property

Signature

data?: T;

disabled property

Signature

disabled?: boolean;

fieldIndex property

Signature

fieldIndex?: DataFrameFieldIndex;

getDisplayValues property

Signature

getDisplayValues?: () => DisplayValue[];

getItemKey property

Signature

getItemKey?: () => string;

gradient property

Signature

gradient?: string;

label property

Signature

label: string;

yAxis property

Signature

yAxis: number;

VizRepeater

Fri, 10 Apr 2026 22:13:30 +0000

VizRepeater class

Signature

export declare class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>

Import

import { VizRepeater } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props)		Constructs a new instance of the `VizRepeater` class

Properties

Property	Modifiers	Type	Description
defaultProps	`static`	`DefaultProps`

Methods

Method	Modifiers	Description
componentDidUpdate(prevProps)
getOrientation()
render()
renderGrid()

constructor(props)

Constructs a new instance of the VizRepeater class

Signature

constructor(props: Props<V, D>);

Parameters

Parameter	Type	Description
props	`Props<V, D>`

defaultProps property

Signature

static defaultProps: DefaultProps;

componentDidUpdate method

Signature

componentDidUpdate(prevProps: Props<V, D>): void;

Parameters

Parameter	Type	Description
prevProps	`Props<V, D>`

Returns:

void

getOrientation method

Signature

getOrientation(): VizOrientation;

Returns:

VizOrientation

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

renderGrid method

Signature

renderGrid(): JSX.Element;

Returns:

JSX.Element

VizRepeaterRenderValueProps

Fri, 10 Apr 2026 22:13:30 +0000

VizRepeaterRenderValueProps interface

Signature

export interface VizRepeaterRenderValueProps<V, D = {}>

Import

import { VizRepeaterRenderValueProps } from '@grafana/ui';

Properties

Property	Type	Description
alignmentFactors	`D`
count	`number`	Total number of values being shown in repeater
height	`number`
orientation	`VizOrientation`
value	`V`
width	`number`

alignmentFactors property

Signature

alignmentFactors: D;

count property

Total number of values being shown in repeater

Signature

count: number;

height property

Signature

height: number;

orientation property

Signature

orientation: VizOrientation;

value property

Signature

value: V;

width property

Signature

width: number;

VizTooltip

Fri, 10 Apr 2026 22:13:30 +0000

VizTooltip variable

Signature

VizTooltip: React.FC<VizTooltipProps>

Import

import { VizTooltip } from '@grafana/ui';

VizTooltipContainer

Fri, 10 Apr 2026 22:13:30 +0000

VizTooltipContainer variable

Signature

VizTooltipContainer: React.FC<VizTooltipContainerProps>

Import

import { VizTooltipContainer } from '@grafana/ui';

WeekStartPicker

Fri, 10 Apr 2026 22:13:30 +0000

WeekStartPicker variable

Signature

WeekStartPicker: React.FC<Props>

Import

import { WeekStartPicker } from '@grafana/ui';

WithContextMenu

Fri, 10 Apr 2026 22:13:30 +0000

WithContextMenu variable

Signature

WithContextMenu: React.FC<WithContextMenuProps>

Import

import { WithContextMenu } from '@grafana/ui';

withErrorBoundary

Fri, 10 Apr 2026 22:13:30 +0000

withErrorBoundary() function

HOC for wrapping a component in an error boundary.

Signature

export declare function withErrorBoundary<P = {}>(Component: ComponentType<P>, errorBoundaryProps?: Omit<ErrorBoundaryAlertProps, 'children'>): ComponentType<P>;

Import

import { withErrorBoundary } from '@grafana/ui';

Parameters

Parameter	Type	Description
Component	`ComponentType<P>`	the react component to wrap in error boundary
errorBoundaryProps	`Omit<ErrorBoundaryAlertProps, ‘children’>`	error boundary options

Returns:

ComponentType<P>

withTheme

Fri, 10 Apr 2026 22:13:30 +0000

withTheme variable

Signature

withTheme: <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => React.FunctionComponent<Subtract<P, Themeable>> & S

Import

import { withTheme } from '@grafana/ui';

XYCanvas

Fri, 10 Apr 2026 22:13:30 +0000

XYCanvas variable

Renders absolutely positioned element on top of the uPlot’s plotting area (axes are not included!). Useful when you want to render some overlay with canvas-independent elements on top of the plot.

Signature

XYCanvas: React.FC<XYCanvasProps>

Import

import { XYCanvas } from '@grafana/ui';