@grafana/ui on Grafana Labs

Alert

Wed, 15 Apr 2026 03:22:24 +0000

Alert variable

Signature

Alert: FC<Props>

Import

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

AlertVariant

Wed, 15 Apr 2026 03:22:24 +0000

AlertVariant type

Signature

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

Import

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

AlphaNotice

Wed, 15 Apr 2026 03:22:24 +0000

AlphaNotice variable

Signature

AlphaNotice: FC<Props>

Import

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

ansicolor

Wed, 15 Apr 2026 03:22:24 +0000

ansicolor class

Represents an ANSI-escaped string.

Signature

export default class Colors

Import

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

Constructors

Constructor	Modifiers	Description
constructor(s)		Constructs a new instance of the `Colors` class

Properties

Property	Modifiers	Type	Description
asChromeConsoleLogArguments		`any[]`
browserConsoleArguments		`any[]`
names	`static`	`(string \| number)[]`
nice	`static`	`typeof Colors`	installs String prototype extensions
parsed		`Colors & {` `spans: any[];` `}`
rgb	`static`	`{` `black: number[];` `darkGray: number[];` `lightGray: number[];` `white: number[];` `red: number[];` `lightRed: number[];` `green: number[];` `lightGreen: number[];` `yellow: number[];` `lightYellow: number[];` `blue: number[];` `lightBlue: number[];` `magenta: number[];` `lightMagenta: number[];` `cyan: number[];` `lightCyan: number[];` `}`
spans		`any[]`
str		`any`

Methods

Method	Modifiers	Description
[Symbol.iterator]()
parse(s)	`static`	parses a string containing ANSI escape codes
strip(s)	`static`	strips ANSI codes from a string

constructor(s)

Constructs a new instance of the Colors class

Signature

constructor(s?: string);

Parameters

Parameter	Type	Description
s	`string`	a string containing ANSI escape codes.

asChromeConsoleLogArguments property

Signature

get asChromeConsoleLogArguments(): any[];

browserConsoleArguments property

Signature

get browserConsoleArguments(): any[];

names property

Signature

static names: (string | number)[];

nice property

installs String prototype extensions

Signature

static get nice(): typeof Colors;

Example

require (‘ansicolor’).nice console.log (‘foo’.bright.red)

parsed property

Signature

get parsed(): Colors & {
        spans: any[];
    };

rgb property

Signature

static rgb: {
        black: number[];
        darkGray: number[];
        lightGray: number[];
        white: number[];
        red: number[];
        lightRed: number[];
        green: number[];
        lightGreen: number[];
        yellow: number[];
        lightYellow: number[];
        blue: number[];
        lightBlue: number[];
        magenta: number[];
        lightMagenta: number[];
        cyan: number[];
        lightCyan: number[];
    };

spans property

Signature

spans: any[];

str property

Signature

get str(): any;

[Symbol.iterator] method

Signature

[Symbol.iterator](): IterableIterator<any>;

Returns:

IterableIterator<any>

Example

const spans = […ansi.parse (’\u001b[7m\u001b[7mfoo\u001b[7mbar\u001b[27m’)]

parse method

parses a string containing ANSI escape codes

Signature

static parse(s: string): Colors & {
        spans: any[];
    };

Parameters

Parameter	Type	Description
s	`string`

Returns:

Colors & { spans: any[]; }

{Colors} parsed representation.

strip method

strips ANSI codes from a string

Signature

static strip(s: string): string;

Parameters

Parameter	Type	Description
s	`string`	a string containing ANSI escape codes.

Returns:

string

{string} clean string.

AsyncMultiSelect

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

Badge variable

Signature

Badge: React.NamedExoticComponent<BadgeProps>

Import

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

BadgeColor

Wed, 15 Apr 2026 03:22:24 +0000

BadgeColor type

Signature

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

Import

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

BadgeProps

Wed, 15 Apr 2026 03:22:24 +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	`string`
tooltip	`string`

color property

Signature

color: BadgeColor;

icon property

Signature

icon?: IconName;

text property

Signature

text: string;

tooltip property

Signature

tooltip?: string;

BarChart

Wed, 15 Apr 2026 03:22:24 +0000

BarChart variable

Signature

BarChart: React.FunctionComponent<Pick<BarChartProps, "data" | "height" | "legend" | "width" | "onSeriesColorChange" | "orientation" | "onLegendClick" | "groupWidth" | "barWidth" | "showValue" | "stacking">>

Import

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

BarGauge

Wed, 15 Apr 2026 03:22:24 +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
getCellColor(positionValue)
render()
renderBarAndValue()
renderBasicAndGradientBars()
renderRetroBars()

defaultProps property

Signature

static defaultProps: Partial<Props>;

getCellColor method

Signature

getCellColor(positionValue: TimeSeriesValue): CellColors;

Parameters

Parameter	Type	Description
positionValue	`TimeSeriesValue`

Returns:

CellColors

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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

BigValueColorMode enum

Signature

export declare enum BigValueColorMode

Import

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

Enumeration Members

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

BigValueGraphMode

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

BigValueJustifyMode enum

Signature

export declare enum BigValueJustifyMode

Import

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

Enumeration Members

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

BigValueTextMode

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

BracesPlugin() function

Signature

export declare function BracesPlugin(): Plugin;

Import

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

Returns:

Plugin

Button

Wed, 15 Apr 2026 03:22:24 +0000

Button variable

Signature

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

Import

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

ButtonCascader

Wed, 15 Apr 2026 03:22:24 +0000

ButtonCascader variable

Signature

ButtonCascader: React.FC<ButtonCascaderProps>

Import

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

ButtonGroup

Wed, 15 Apr 2026 03:22:24 +0000

ButtonGroup variable

Signature

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

Import

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

ButtonVariant

Wed, 15 Apr 2026 03:22:24 +0000

ButtonVariant type

Signature

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

Import

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

calculateFontSize

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

CallToActionCard variable

Signature

CallToActionCard: React.FunctionComponent<CallToActionCardProps>

Import

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

Card

Wed, 15 Apr 2026 03:22:24 +0000

Card variable

Generic card component

Signature

Card: CardInterface

Import

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

cardChrome

Wed, 15 Apr 2026 03:22:24 +0000

styleMixins.cardChrome() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
theme	`GrafanaTheme`

Returns:

string

CardInnerProps

Wed, 15 Apr 2026 03:22:24 +0000

CardInnerProps interface

Signature

export interface CardInnerProps

Import

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

Properties

Property	Type	Description
href	`string`

href property

Signature

href?: string;

CardProps

Wed, 15 Apr 2026 03:22:24 +0000

CardProps interface

Signature

export interface Props extends ContainerProps

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

Wed, 15 Apr 2026 03:22:24 +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		`(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: (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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

CertificationKey variable

Signature

CertificationKey: FC<Props>

Import

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

Chart

Wed, 15 Apr 2026 03:22:24 +0000

Chart variable

Signature

Chart: {
    Tooltip: import("react").FC<import("./Tooltip").TooltipProps>;
}

Import

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

Checkbox

Wed, 15 Apr 2026 03:22:24 +0000

Checkbox variable

Signature

Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "prefix" | "min" | "max" | "name" | "type" | "key" | "value" | "data" | "description" | "color" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "height" | "cite" | "form" | "label" | "span" | "summary" | "default" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "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" | "css" | "list" | "step" | "content" | "start" | "wrap" | "open" | "multiple" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "width" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

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

ClearPlugin

Wed, 15 Apr 2026 03:22:24 +0000

ClearPlugin() function

Signature

export declare function ClearPlugin(): Plugin;

Import

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

Returns:

Plugin

ClickOutsideWrapper

Wed, 15 Apr 2026 03:22:24 +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

ClickPlugin

Wed, 15 Apr 2026 03:22:24 +0000

ClickPlugin variable

Signature

ClickPlugin: React.FC<ClickPluginProps>

Import

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

ClipboardButton

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

ClipboardPlugin() function

Signature

export declare function ClipboardPlugin(): Plugin;

Import

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

Returns:

Plugin

CodeEditor

Wed, 15 Apr 2026 03:22:24 +0000

CodeEditor variable

Signature

CodeEditor: React.FC<CodeEditorProps>

Import

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

CollapsableSection

Wed, 15 Apr 2026 03:22:24 +0000

CollapsableSection variable

Signature

CollapsableSection: FC<Props>

Import

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

Collapse

Wed, 15 Apr 2026 03:22:24 +0000

Collapse variable

Signature

Collapse: FunctionComponent<Props>

Import

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

ColorPicker

Wed, 15 Apr 2026 03:22:24 +0000

ColorPicker variable

Signature

ColorPicker: React.FunctionComponent<Pick<ColorPickerProps & {
    children?: ColorPickerTriggerRenderer | undefined;
}, "color" | "onChange" | "children" | "onColorChange" | "enableNamedColors">>

Import

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

colors

Wed, 15 Apr 2026 03:22:24 +0000

colors variable

Signature

colors: string[]

Import

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

CompletionItem

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

CompletionItemKind enum

Signature

export declare enum CompletionItemKind

Import

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

Enumeration Members

Member	Value	Description
GroupTitle	`"GroupTitle"`

ConfirmButton

Wed, 15 Apr 2026 03:22:24 +0000

ConfirmButton variable

Signature

ConfirmButton: React.FunctionComponent<Pick<Props, "size" | "className" | "onClick" | "disabled" | "onConfirm" | "confirmText" | "confirmVariant" | "closeOnConfirm" | "onCancel">>

Import

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

ConfirmModal

Wed, 15 Apr 2026 03:22:24 +0000

ConfirmModal variable

Signature

ConfirmModal: FC<Props>

Import

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

Container

Wed, 15 Apr 2026 03:22:24 +0000

Container variable

Signature

Container: React.FC<ContainerProps>

Import

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

ContainerProps

Wed, 15 Apr 2026 03:22:24 +0000

ContainerProps interface

Signature

export interface ContainerProps extends HTMLAttributes<HTMLOrSVGElement>

Import

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

Properties

Property	Type	Description
tooltip	`PopoverContent`	Content for the card’s tooltip

tooltip property

Content for the card’s tooltip

Signature

tooltip?: PopoverContent;

ContextMenu

Wed, 15 Apr 2026 03:22:24 +0000

ContextMenu variable

Signature

ContextMenu: React.FC<ContextMenuProps>

Import

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

ContextMenuProps

Wed, 15 Apr 2026 03:22:24 +0000

ContextMenuProps interface

Signature

export interface ContextMenuProps

Import

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

Properties

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

items property

List of the menu items to display

Signature

items?: MenuItemsGroup[];

onClose property

Callback for closing the menu

Signature

onClose?: () => void;

renderHeader property

A function that returns header element

Signature

renderHeader?: () => React.ReactNode;

x property

Starting horizontal position for the menu

Signature

x: number;

y property

Starting vertical position for the menu

Signature

y: number;

ControlledCollapse

Wed, 15 Apr 2026 03:22:24 +0000

ControlledCollapse variable

Signature

ControlledCollapse: FunctionComponent<Props>

Import

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

convertOldAngularValueMapping

Wed, 15 Apr 2026 03:22:24 +0000

convertOldAngularValueMapping() function

Convert the angular single stat mapping to new react style

Signature

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

Import

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

Parameters

Parameter	Type	Description
panel	`any`

Returns:

ValueMapping[]

Counter

Wed, 15 Apr 2026 03:22:24 +0000

Counter variable

Signature

Counter: FC<CounterProps>

Import

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

CustomScrollbar

Wed, 15 Apr 2026 03:22:24 +0000

CustomScrollbar variable

Wraps component into component from react-custom-scrollbars

Signature

CustomScrollbar: FC<Props>

Import

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

DataLinkInput

Wed, 15 Apr 2026 03:22:24 +0000

DataLinkInput variable

Signature

DataLinkInput: React.FC<DataLinkInputProps>

Import

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

DataLinksContextMenu

Wed, 15 Apr 2026 03:22:24 +0000

DataLinksContextMenu variable

Signature

DataLinksContextMenu: React.FC<DataLinksContextMenuProps>

Import

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

DataLinksInlineEditor

Wed, 15 Apr 2026 03:22:24 +0000

DataLinksInlineEditor variable

Signature

DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps>

Import

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

DataSourceHttpSettings

Wed, 15 Apr 2026 03:22:24 +0000

DataSourceHttpSettings variable

Signature

DataSourceHttpSettings: React.FC<HttpSettingsProps>

Import

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

defaultIntervals

Wed, 15 Apr 2026 03:22:24 +0000

defaultIntervals variable

Signature

defaultIntervals: string[]

Import

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

DeleteButton

Wed, 15 Apr 2026 03:22:24 +0000

DeleteButton variable

Signature

DeleteButton: FC<Props>

Import

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

displayName

Wed, 15 Apr 2026 03:22:24 +0000

RadioButtonGroup.displayName variable

Signature

displayName: string

Import

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

DOMUtil

Wed, 15 Apr 2026 03:22:24 +0000

DOMUtil namespace

DOMUtil namespace

Import

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

Functions

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

Drawer

Wed, 15 Apr 2026 03:22:24 +0000

Drawer variable

Signature

Drawer: FC<Props>

Import

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

EmptySearchResult

Wed, 15 Apr 2026 03:22:24 +0000

EmptySearchResult variable

Signature

EmptySearchResult: FC<Props>

Import

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

ErrorBoundary

Wed, 15 Apr 2026 03:22:24 +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)
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

render method

Signature

render(): React.ReactNode;

Returns:

React.ReactNode

ErrorBoundaryAlert

Wed, 15 Apr 2026 03:22:24 +0000

ErrorBoundaryAlert class

Signature

export declare class ErrorBoundaryAlert extends PureComponent<WithAlertBoxProps>

Import

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

Properties

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

Methods

Method	Modifiers	Description
render()

defaultProps property

Signature

static defaultProps: Partial<WithAlertBoxProps>;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ErrorWithStack

Wed, 15 Apr 2026 03:22:24 +0000

ErrorWithStack variable

Signature

ErrorWithStack: FunctionComponent<Props>

Import

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

EventsCanvas

Wed, 15 Apr 2026 03:22:24 +0000

EventsCanvas() function

Signature

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

Import

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

Parameters

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

Returns:

JSX.Element | null

EventsWithValidation

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

FeatureBadge variable

Signature

FeatureBadge: React.FC<FeatureBadgeProps>

Import

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

FeatureInfoBox

Wed, 15 Apr 2026 03:22:24 +0000

FeatureInfoBox variable

Signature

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

Import

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

Field

Wed, 15 Apr 2026 03:22:24 +0000

Field variable

Signature

Field: React.FC<FieldProps>

Import

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

FieldArray

Wed, 15 Apr 2026 03:22:24 +0000

FieldArray variable

Signature

FieldArray: FC<FieldArrayProps>

Import

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

FieldArrayApi

Wed, 15 Apr 2026 03:22:24 +0000

FieldArrayApi interface

Signature

export interface FieldArrayApi

Import

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

Properties

Property	Type	Description
append	`(value: FieldArrayValue) => void`
fields	`Array<Partial<ArrayField<FieldValues, ‘id’>>>`
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<Partial<ArrayField<FieldValues, 'id'>>>;

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

Wed, 15 Apr 2026 03:22:24 +0000

fieldMatchersUI variable

Signature

fieldMatchersUI: Registry<FieldMatcherUIRegistryItem<any>>

Import

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

FieldSet

Wed, 15 Apr 2026 03:22:24 +0000

FieldSet variable

Signature

FieldSet: FC<Props>

Import

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

FieldValidationMessage

Wed, 15 Apr 2026 03:22:24 +0000

FieldValidationMessage variable

Signature

FieldValidationMessage: React.FC<FieldValidationMessageProps>

Import

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

FileUpload

Wed, 15 Apr 2026 03:22:24 +0000

FileUpload variable

Signature

FileUpload: FC<Props>

Import

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

FilterPill

Wed, 15 Apr 2026 03:22:24 +0000

FilterPill variable

Signature

FilterPill: React.FC<FilterPillProps>

Import

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

FIXED_UNIT

Wed, 15 Apr 2026 03:22:24 +0000

FIXED_UNIT variable

Signature

FIXED_UNIT = "__fixed"

Import

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

focusCss

Wed, 15 Apr 2026 03:22:24 +0000

styleMixins.focusCss variable

Signature

focusCss: (theme: GrafanaTheme) => string

Import

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

Form

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

FormAPI type

Signature

export declare type FormAPI<T> = Pick<FormContextValues<T>, 'register' | 'errors' | 'control' | 'formState' | 'getValues' | 'watch'>;

Import

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

FormattedValueDisplay

Wed, 15 Apr 2026 03:22:24 +0000

FormattedValueDisplay variable

Signature

FormattedValueDisplay: FC<Props>

Import

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

FormInputSize

Wed, 15 Apr 2026 03:22:24 +0000

FormInputSize type

Signature

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

Import

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

FullWidthButtonContainer

Wed, 15 Apr 2026 03:22:24 +0000

FullWidthButtonContainer variable

Signature

FullWidthButtonContainer: FC<Props>

Import

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

Gauge

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

getAvailableIcons variable

Signature

getAvailableIcons: () => IconName[]

Import

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

getCardStyles

Wed, 15 Apr 2026 03:22:24 +0000

getCardStyles variable

Signature

getCardStyles: (theme: GrafanaTheme) => {
    inner: string;
    heading: string;
    info: string;
    metadata: string;
    description: string;
    media: string;
    actionRow: string;
    actions: string;
    secondaryActions: string;
    separator: string;
    innerLink: string;
    tagList: string;
}

Import

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

getFormStyles

Wed, 15 Apr 2026 03:22:24 +0000

getFormStyles variable

Signature

getFormStyles: (theme: GrafanaTheme, 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;
        img: string;
        icon: string;
        content: string;
    };
    input: {
        wrapper: string;
        inputWrapper: string;
        input: string;
        inputDisabled: string;
        addon: string;
        prefix: string;
        suffix: string;
        loadingIndicator: string;
    };
    checkbox: {
        label: string;
        description: string;
        wrapper: string;
        input: string;
        checkmark: string;
    };
}

Import

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

getLogRowStyles

Wed, 15 Apr 2026 03:22:24 +0000

getLogRowStyles variable

Signature

getLogRowStyles: (theme: GrafanaTheme, logLevel?: LogLevel | undefined) => {
    logsRowMatchHighLight: string;
    logsRowMatchHighLightPreview: string;
    logsRowsTable: string;
    logsRowsHorizontalScroll: 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';

getNextCharacter

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

getScrollbarWidth() function

Signature

export declare function getScrollbarWidth(): number;

Import

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

Returns:

number

getStandardFieldConfigs

Wed, 15 Apr 2026 03:22:24 +0000

getStandardFieldConfigs variable

Returns collection of common field config properties definitions

Signature

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

Import

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

getStandardOptionEditors

Wed, 15 Apr 2026 03:22:24 +0000

getStandardOptionEditors variable

Returns collection of standard option editors definitions

Signature

getStandardOptionEditors: () => (StandardEditorsRegistryItem<any, any> | StandardEditorsRegistryItem<string, any> | StandardEditorsRegistryItem<number, any> | StandardEditorsRegistryItem<boolean, any> | StandardEditorsRegistryItem<ValueMapping[], any> | StandardEditorsRegistryItem<ThresholdsConfig, any> | StandardEditorsRegistryItem<DataLink<any>[], any> | StandardEditorsRegistryItem<string[], any> | StandardEditorsRegistryItem<FieldColor, any>)[]

Import

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

getTagColor

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

getTextColorForBackground() function

Signature

export declare function getTextColorForBackground(color: string): string;

Import

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

Parameters

Parameter	Type	Description
color	`string`

Returns:

string

getTheme

Wed, 15 Apr 2026 03:22:24 +0000

getTheme variable

Signature

getTheme: (name?: string | undefined) => GrafanaTheme

Import

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

Graph

Wed, 15 Apr 2026 03:22:24 +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<TooltipProps, string \| ((props: any) => React.ReactElement<any, string \| any \| (new (props: any) => React.Component<any, any, any>)> \| null) \| (new (props: any) => React.Component<any, any, 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<TooltipProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, 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: import("@grafana/data").DecimalCount;
        tickDecimals: import("@grafana/data").DecimalCount;
    }[] | {
        show: boolean;
        min: number;
        max: number;
    }[];

Parameters

Parameter	Type	Description
series	`GraphSeriesXY[]`

Returns:

{ show: boolean; index: number; position: string; min: import("@grafana/data").DecimalCount; tickDecimals: import("@grafana/data").DecimalCount; }[] | { show: boolean; min: number; max: number; }[]

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

GraphNG

Wed, 15 Apr 2026 03:22:24 +0000

GraphNG variable

Signature

GraphNG: React.FunctionComponent<Pick<GraphNGProps, "fields" | "data" | "timeZone" | "children" | "height" | "legend" | "width" | "onSeriesColorChange" | "timeRange" | "onLegendClick">>

Import

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

GraphSeriesToggler

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

graphTickFormatter variable

Signature

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

Import

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

graphTimeFormat

Wed, 15 Apr 2026 03:22:24 +0000

graphTimeFormat variable

Signature

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

Import

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

GraphTooltipOptions

Wed, 15 Apr 2026 03:22:24 +0000

GraphTooltipOptions interface

Signature

export interface GraphTooltipOptions

Import

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

Properties

Property	Type	Description
mode	`TooltipMode`

mode property

Signature

mode: TooltipMode;

GraphWithLegend

Wed, 15 Apr 2026 03:22:24 +0000

GraphWithLegend variable

Signature

GraphWithLegend: React.FunctionComponent<GraphWithLegendProps>

Import

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

hasValidationEvent

Wed, 15 Apr 2026 03:22:24 +0000

hasValidationEvent variable

Signature

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

Import

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

HorizontalGroup

Wed, 15 Apr 2026 03:22:24 +0000

HorizontalGroup variable

Signature

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

Import

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

hoverColor

Wed, 15 Apr 2026 03:22:24 +0000

styleMixins.hoverColor() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
color	`string`
theme	`GrafanaTheme`

Returns:

string

Icon

Wed, 15 Apr 2026 03:22:24 +0000

Icon variable

Signature

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

Import

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

IconButton

Wed, 15 Apr 2026 03:22:24 +0000

IconButton variable

Signature

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

Import

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

IconName

Wed, 15 Apr 2026 03:22:24 +0000

IconName type

Signature

export declare type IconName = 'angle-double-down' | 'angle-double-right' | 'angle-down' | 'angle-left' | 'angle-right' | 'angle-up' | 'apps' | 'arrow-down' | 'arrow-from-right' | 'arrow-left' | 'arrow-random' | 'arrow-right' | 'arrow-up' | 'arrow' | 'arrows-h' | 'bars' | 'bell-slash' | 'bell' | 'bolt' | 'book-open' | 'book' | 'brackets-curly' | 'bug' | 'calculator-alt' | 'calendar-alt' | 'camera' | 'channel-add' | 'chart-line' | 'check-circle' | 'check' | 'circle' | 'clipboard-alt' | 'clock-nine' | 'cloud-download' | 'cloud-upload' | 'cloud' | 'code-branch' | 'cog' | 'columns' | 'comment-alt' | 'comments-alt' | 'compass' | 'copy' | 'cube' | 'database' | 'document-info' | 'download-alt' | 'draggabledots' | 'edit' | 'ellipsis-v' | 'envelope' | 'exchange-alt' | 'exclamation-triangle' | 'external-link-alt' | 'eye-slash' | 'eye' | 'fa fa-spinner' | 'favorite' | 'file-alt' | 'file-blank' | 'file-copy-alt' | 'filter' | 'folder-open' | 'folder-plus' | 'folder-upload' | 'folder' | 'forward' | 'gf-interpolation-linear' | 'gf-interpolation-smooth' | 'gf-interpolation-step-after' | 'gf-interpolation-step-before' | 'gf-logs' | 'grafana' | 'graph-bar' | 'heart-break' | 'heart' | 'history' | 'home-alt' | 'import' | 'info-circle' | 'key-skeleton-alt' | 'keyboard' | 'line-alt' | 'link' | 'list-ul' | 'lock' | 'minus-circle' | 'minus' | 'mobile-android' | 'monitor' | 'palette' | 'panel-add' | 'pause' | 'pen' | 'percentage' | 'play' | 'plug' | 'plus-circle' | 'plus-square' | 'plus' | 'power' | 'question-circle' | 'repeat' | 'reusable-panel' | 'rocket' | 'save' | 'search-minus' | 'search-plus' | 'search' | 'share-alt' | 'shield' | 'sign-in-alt' | 'signal' | 'signin' | 'signout' | 'slack' | 'sliders-v-alt' | 'sort-amount-down' | 'square-shape' | 'star' | 'step-backward' | 'sync' | 'table' | 'tag-alt' | 'times' | 'trash-alt' | 'unlock' | 'upload' | 'user' | 'users-alt' | 'wrap-text' | 'x';

Import

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

IconSize

Wed, 15 Apr 2026 03:22:24 +0000

IconSize type

Signature

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

Import

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

IconType

Wed, 15 Apr 2026 03:22:24 +0000

IconType type

Signature

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

Import

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

IndentationPlugin

Wed, 15 Apr 2026 03:22:24 +0000

IndentationPlugin() function

Signature

export declare function IndentationPlugin(): Plugin;

Import

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

Returns:

Plugin

InfoBox

Wed, 15 Apr 2026 03:22:24 +0000

InfoBox variable

Signature

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

Import

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

InlineField

Wed, 15 Apr 2026 03:22:24 +0000

InlineField variable

Signature

InlineField: FC<Props>

Import

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

InlineFieldRow

Wed, 15 Apr 2026 03:22:24 +0000

InlineFieldRow variable

Signature

InlineFieldRow: FC<Props>

Import

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

InlineFormLabel

Wed, 15 Apr 2026 03:22:24 +0000

InlineFormLabel variable

Signature

InlineFormLabel: React.FunctionComponent<Props>

Import

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

InlineLabel

Wed, 15 Apr 2026 03:22:24 +0000

InlineLabel variable

Signature

InlineLabel: FunctionComponent<Props>

Import

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

InlineSegmentGroup

Wed, 15 Apr 2026 03:22:24 +0000

InlineSegmentGroup variable

InlineSegmentGroup variable

Signature

InlineSegmentGroup: FC<Props>

Import

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

InlineSwitch

Wed, 15 Apr 2026 03:22:24 +0000

InlineSwitch variable

Signature

InlineSwitch: React.ForwardRefExoticComponent<Pick<Props, "prefix" | "min" | "max" | "name" | "type" | "key" | "value" | "data" | "color" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "height" | "cite" | "form" | "label" | "span" | "summary" | "default" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "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" | "css" | "list" | "step" | "transparent" | "content" | "start" | "wrap" | "open" | "multiple" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "width" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

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

Input

Wed, 15 Apr 2026 03:22:24 +0000

Input variable

Signature

Input: React.ForwardRefExoticComponent<Pick<Props, "prefix" | "suffix" | "min" | "max" | "name" | "type" | "key" | "value" | "data" | "color" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "height" | "cite" | "form" | "label" | "span" | "summary" | "default" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "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" | "css" | "list" | "step" | "content" | "start" | "wrap" | "open" | "multiple" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "width" | "wmode" | "invalid" | "loading" | "addonBefore" | "addonAfter"> & React.RefAttributes<HTMLInputElement>>

Import

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

InputControl

Wed, 15 Apr 2026 03:22:24 +0000

InputControl variable

Signature

InputControl: <As extends "symbol" | "object" | "s" | "section" | "map" | "filter" | "p" | "g" | "b" | "var" | "time" | "meta" | "data" | "text" | "path" | "table" | "style" | "head" | "pattern" | "link" | "title" | "source" | "i" | "desc" | "select" | import("react").FunctionComponent<any> | import("react").ComponentClass<any, any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "hr" | "html" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "script" | "small" | "span" | "strong" | "sub" | "summary" | "sup" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "tr" | "track" | "u" | "ul" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>, ControlProp extends import("react-hook-form").Control<Record<string, any>> = import("react-hook-form").Control<Record<string, any>>>({ name, rules, as: InnerComponent, onBlur, onChange, onChangeName, onBlurName, valueName, defaultValue, control, ...rest }: import("react-hook-form").Assign<{
    name: string;
    as: As;
    rules?: Partial<{
        required: string | boolean | {
            value: boolean;
            message: string;
        };
        min: string | number | {
            value: string | number;
            message: string;
        };
        max: string | number | {
            value: string | number;
            message: string;
        };
        maxLength: string | number | {
            value: string | number;
            message: string;
        };
        minLength: string | number | {
            value: string | number;
            message: string;
        };
        pattern: RegExp | {
            value: RegExp;
            message: string;
        };
        validate: import("react-hook-form").Validate | Record<string, import("react-hook-form").Validate>;
    }> | undefined;
    onChange?: import("react-hook-form").EventFunction | undefined;
    onBlur?: import("react-hook-form").EventFunction | undefined;
    mode?: "onChange" | "onBlur" | "onSubmit" | undefined;
    onChangeName?: string | undefined;
    onBlurName?: string | undefined;
    valueName?: string | undefined;
    defaultValue?: any;
    control?: ControlProp | undefined;
}, import("react-hook-form").AsProps<As>>) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>

Import

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

JsonExplorer

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

Label variable

Signature

Label: React.FC<LabelProps>

Import

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

LegacyForms

Wed, 15 Apr 2026 03:22:24 +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: any) => JSX.Element;
    Input: typeof Input;
    Switch: typeof Switch;
}

Import

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

LegacyInputStatus

Wed, 15 Apr 2026 03:22:24 +0000

LegacyInputStatus enum

Signature

export declare enum LegacyInputStatus

Import

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

Enumeration Members

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

Legend

Wed, 15 Apr 2026 03:22:24 +0000

Legend variable

Signature

Legend: React.FC<LabelProps>

Import

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

LegendDisplayMode

Wed, 15 Apr 2026 03:22:24 +0000

LegendDisplayMode enum

Signature

export declare enum LegendDisplayMode

Import

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

Enumeration Members

Member	Value	Description
Hidden	`"hidden"`
List	`"list"`
Table	`"table"`

LegendPlacement

Wed, 15 Apr 2026 03:22:24 +0000

LegendPlacement type

Signature

export declare type LegendPlacement = 'bottom' | 'right';

Import

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

LinkButton

Wed, 15 Apr 2026 03:22:24 +0000

LinkButton variable

Signature

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

Import

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

linkModelToContextMenuItems

Wed, 15 Apr 2026 03:22:24 +0000

linkModelToContextMenuItems variable

Delays creating links until we need to open the ContextMenu

Signature

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

Import

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

List

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

styleMixins.listItem() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
theme	`GrafanaTheme`

Returns:

string

listItemSelected

Wed, 15 Apr 2026 03:22:24 +0000

styleMixins.listItemSelected() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
theme	`GrafanaTheme`

Returns:

string

LoadingPlaceholder

Wed, 15 Apr 2026 03:22:24 +0000

LoadingPlaceholder variable

Signature

LoadingPlaceholder: SFC<LoadingPlaceholderProps>

Import

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

LoadingPlaceholderProps

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

LogLabels variable

Signature

LogLabels: React.FunctionComponent<Pick<Props, "labels">>

Import

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

LogMessageAnsi

Wed, 15 Apr 2026 03:22:24 +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: any;
        } | {
            text: any;
            style?: undefined;
        })[];
        prevValue: string;
    } | null;

Parameters

Parameter	Type	Description
props	`Props`
state	`State`

Returns:

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

render method

Signature

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

Returns:

(string | JSX.Element)[]

LogRows

Wed, 15 Apr 2026 03:22:24 +0000

LogRows variable

Signature

LogRows: React.FunctionComponent<Pick<Props, "timeZone" | "getRowContext" | "logsSortOrder" | "highlighterExpressions" | "wrapLogMessage" | "showContextToggle" | "onClickFilterLabel" | "onClickFilterOutLabel" | "showDetectedFields" | "onClickShowDetectedField" | "onClickHideDetectedField" | "getFieldLinks" | "showLabels" | "showTime" | "allowDetails" | "forceEscape" | "logRows" | "deduplicatedRows" | "dedupStrategy" | "previewLimit" | "disableCustomHorizontalScroll">>

Import

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

makeFragment

Wed, 15 Apr 2026 03:22:24 +0000

makeFragment variable

Signature

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

Import

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

makeValue

Wed, 15 Apr 2026 03:22:24 +0000

makeValue variable

Signature

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

Import

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

Marker

Wed, 15 Apr 2026 03:22:24 +0000

Marker variable

Signature

Marker: React.FC<MarkerProps>

Import

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

measureText

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

mockTheme variable

Signature

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

Import

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

mockThemeContext

Wed, 15 Apr 2026 03:22:24 +0000

mockThemeContext variable

Enables theme context mocking

Signature

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

Import

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

Modal

Wed, 15 Apr 2026 03:22:24 +0000

Signature

export declare function Modal(props: PropsWithChildren<Props>): ReturnType<FC<Props>>;

Import

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

Parameters

Parameter	Type	Description
props	`PropsWithChildren<Props>`

Returns:

ReturnType<FC<Props>>

ModalHeader

Wed, 15 Apr 2026 03:22:24 +0000

ModalHeader variable

Signature

ModalHeader: React.FC<Props>

Import

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

ModalRoot

Wed, 15 Apr 2026 03:22:24 +0000

ModalRoot variable

Signature

ModalRoot: () => JSX.Element

Import

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

ModalsController

Wed, 15 Apr 2026 03:22:24 +0000

ModalsController variable

Signature

ModalsController: React.Consumer<ModalsContextState>

Import

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

ModalsProvider

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

ModalTabsHeader variable

Signature

ModalTabsHeader: React.FC<Props>

Import

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

MultiSelect

Wed, 15 Apr 2026 03:22:24 +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

NewlinePlugin

Wed, 15 Apr 2026 03:22:24 +0000

NewlinePlugin() function

Signature

export declare function NewlinePlugin(): Plugin;

Import

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

Returns:

Plugin

NodeGraph

Wed, 15 Apr 2026 03:22:24 +0000

NodeGraph() function

Signature

export declare function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props): JSX.Element;

Import

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

Parameters

Parameter	Type	Description
{ getLinks, dataFrames, nodeLimit }	`Props`

Returns:

JSX.Element

NodeGraphDataFrameFieldNames

Wed, 15 Apr 2026 03:22:24 +0000

NodeGraphDataFrameFieldNames enum

Signature

export declare enum DataFrameFieldNames

Import

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

Enumeration Members

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

NumberValueEditor

Wed, 15 Apr 2026 03:22:24 +0000

NumberValueEditor variable

Signature

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

Import

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

OnTagClick

Wed, 15 Apr 2026 03:22:24 +0000

OnTagClick type

Signature

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

Import

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

Pagination

Wed, 15 Apr 2026 03:22:24 +0000

Pagination variable

Signature

Pagination: React.FC<Props>

Import

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

PieChart

Wed, 15 Apr 2026 03:22:24 +0000

PieChart variable

Signature

PieChart: FC<Props>

Import

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

PieChartLabels

Wed, 15 Apr 2026 03:22:24 +0000

PieChartLabels enum

Signature

export declare enum PieChartLabels

Import

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

Enumeration Members

Member	Value	Description
Name	`"name"`
Percent	`"percent"`
Value	`"value"`

PieChartLegendOptions

Wed, 15 Apr 2026 03:22:24 +0000

PieChartLegendOptions interface

Signature

export interface PieChartLegendOptions extends VizLegendOptions

Import

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

Properties

Property	Type	Description
values	`PieChartLegendValues[]`

values property

Signature

values: PieChartLegendValues[];

PieChartLegendValues

Wed, 15 Apr 2026 03:22:24 +0000

PieChartLegendValues enum

Signature

export declare enum PieChartLegendValues

Import

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

Enumeration Members

Member	Value	Description
Percent	`"percent"`
Value	`"value"`

PieChartType

Wed, 15 Apr 2026 03:22:24 +0000

PieChartType enum

Signature

export declare enum PieChartType

Import

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

Enumeration Members

Member	Value	Description
Donut	`"donut"`
Pie	`"pie"`

Popover

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

PopoverContent type

Signature

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

Import

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

PopoverController

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

Portal class

Signature

export declare class Portal extends PureComponent<Props>

Import

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

Constructors

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

Properties

Property	Modifiers	Type	Description
node		`HTMLElement`
portalRoot		`HTMLElement`

Methods

Method	Modifiers	Description
componentWillUnmount()
render()

constructor(props)

Constructs a new instance of the Portal class

Signature

constructor(props: Props);

Parameters

Parameter	Type	Description
props	`Props`

node property

Signature

node: HTMLElement;

portalRoot property

Signature

portalRoot: HTMLElement;

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): React.ReactPortal;

Returns:

React.ReactPortal

QueryField

Wed, 15 Apr 2026 03:22:24 +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
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;

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

Wed, 15 Apr 2026 03:22:24 +0000

RadioButtonGroup namespace

Signature

export declare namespace RadioButtonGroup

Import

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

Variables

Variable	Description
displayName

RangeSlider

Wed, 15 Apr 2026 03:22:24 +0000

RangeSlider variable

RichHistoryQueriesTab uses this Range Component

Signature

RangeSlider: FunctionComponent<RangeSliderProps>

Import

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

RefreshPicker

Wed, 15 Apr 2026 03:22:24 +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;` `}`
offOption	`static`	`{` `label: string;` `value: 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;
    };

offOption property

Signature

static offOption: {
        label: string;
        value: 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

Wed, 15 Apr 2026 03:22:24 +0000

regexValidation variable

Signature

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

Import

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

Renderable

Wed, 15 Apr 2026 03:22:24 +0000

Renderable type

Signature

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

Import

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

RenderFunction

Wed, 15 Apr 2026 03:22:24 +0000

RenderFunction type

Signature

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

Import

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

renderOrCallToRender

Wed, 15 Apr 2026 03:22:24 +0000

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 { renderOrCallToRender } from '@grafana/ui';

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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

SCHEMA variable

Signature

SCHEMA: SchemaProperties

Import

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

Segment

Wed, 15 Apr 2026 03:22:24 +0000

Segment() function

Signature

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

Import

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

Parameters

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

Returns:

JSX.Element

SegmentAsync

Wed, 15 Apr 2026 03:22:24 +0000

SegmentAsync() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
{ value, onChange, loadOptions, Component, className, allowCustomValue, disabled, placeholder, …rest }	`React.PropsWithChildren<SegmentAsyncProps<T>>`

Returns:

JSX.Element

SegmentInput

Wed, 15 Apr 2026 03:22:24 +0000

SegmentInput() function

Signature

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

Import

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

Parameters

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

Returns:

JSX.Element

SegmentSelect

Wed, 15 Apr 2026 03:22:24 +0000

SegmentSelect() function

Signature

export declare function SegmentSelect<T>({ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, ...rest }: React.PropsWithChildren<Props<T>>): JSX.Element;

Import

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

Parameters

Parameter	Type	Description
{ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, …rest }	`React.PropsWithChildren<Props<T>>`

Returns:

JSX.Element

Select

Wed, 15 Apr 2026 03:22:24 +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

SelectionShortcutsPlugin

Wed, 15 Apr 2026 03:22:24 +0000

SelectionShortcutsPlugin() function

Signature

export declare function SelectionShortcutsPlugin(): Plugin;

Import

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

Returns:

Plugin

selectThemeVariant

Wed, 15 Apr 2026 03:22:24 +0000

selectThemeVariant variable

Signature

selectThemeVariant: (variants: VariantDescriptor, currentTheme?: GrafanaThemeType | undefined) => string | number

Import

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

SelectValueEditor

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

SeriesColorPicker variable

Signature

SeriesColorPicker: React.FunctionComponent<Pick<import("./SeriesColorPickerPopover").SeriesColorPickerPopoverProps & {
    children?: ColorPickerTriggerRenderer | undefined;
}, "color" | "onChange" | "children" | "onColorChange" | "enableNamedColors" | "updatePopperPosition" | "yaxis" | "onToggleAxis">>

Import

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

SeriesColorPickerPopover

Wed, 15 Apr 2026 03:22:24 +0000

SeriesColorPickerPopover variable

Signature

SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps>

Import

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

SeriesColorPickerPopoverWithTheme

Wed, 15 Apr 2026 03:22:24 +0000

SeriesColorPickerPopoverWithTheme variable

Signature

SeriesColorPickerPopoverWithTheme: React.FunctionComponent<Pick<SeriesColorPickerPopoverProps, "color" | "onChange" | "onColorChange" | "enableNamedColors" | "updatePopperPosition" | "yaxis" | "onToggleAxis">>

Import

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

SeriesIcon

Wed, 15 Apr 2026 03:22:24 +0000

SeriesIcon variable

Signature

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

Import

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

SetInterval

Wed, 15 Apr 2026 03:22:24 +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

sharedSingleStatMigrationHandler

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

SingleStatBaseOptions interface

Signature

export interface SingleStatBaseOptions

Import

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

Properties

Property	Type	Description
orientation	`VizOrientation`
reduceOptions	`ReduceDataOptions`
text	`TextDisplayOptions`

orientation property

Signature

orientation: VizOrientation;

reduceOptions property

Signature

reduceOptions: ReduceDataOptions;

text property

Signature

text?: TextDisplayOptions;

SlatePrism

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

Slider variable

Signature

Slider: FunctionComponent<SliderProps>

Import

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

SliderValueEditor

Wed, 15 Apr 2026 03:22:24 +0000

SliderValueEditor variable

Signature

SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>>

Import

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

sortedColors

Wed, 15 Apr 2026 03:22:24 +0000

sortedColors variable

Signature

sortedColors: string[]

Import

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

Spinner

Wed, 15 Apr 2026 03:22:24 +0000

Spinner variable

Signature

Spinner: FC<Props>

Import

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

StatsPicker

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

StringValueEditor variable

Signature

StringValueEditor: React.FC<FieldConfigEditorProps<string, StringFieldConfigSettings>>

Import

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

styleMixins

Wed, 15 Apr 2026 03:22:24 +0000

styleMixins namespace

styleMixins namespace

Import

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

Functions

Function	Description
cardChrome(theme)
hoverColor(color, theme)
listItem(theme)
listItemSelected(theme)
mediaUp(breakpoint)

Variables

Variable	Description
focusCss

stylesFactory

Wed, 15 Apr 2026 03:22:24 +0000

stylesFactory() function

Creates memoized version of styles creator

Signature

export declare function stylesFactory<ResultFn extends (this: any, ...newArgs: any[]) => ReturnType<ResultFn>>(stylesCreator: ResultFn): ResultFn;

Import

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

Parameters

Parameter	Type	Description
stylesCreator	`ResultFn`	function accepting dependencies based on which styles are created

Returns:

ResultFn

SuggestionsPlugin

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

Switch variable

Signature

Switch: React.ForwardRefExoticComponent<Pick<Props, "prefix" | "min" | "max" | "name" | "type" | "key" | "value" | "data" | "color" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "height" | "cite" | "form" | "label" | "span" | "summary" | "default" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "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" | "css" | "list" | "step" | "transparent" | "content" | "start" | "wrap" | "open" | "multiple" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "width" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

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

Tab

Wed, 15 Apr 2026 03:22:24 +0000

Tab variable

Signature

Tab: React.ForwardRefExoticComponent<Pick<TabProps, "prefix" | "min" | "max" | "name" | "type" | "key" | "value" | "data" | "color" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "height" | "cite" | "form" | "label" | "span" | "summary" | "default" | "size" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "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" | "css" | "list" | "step" | "content" | "start" | "wrap" | "open" | "icon" | "multiple" | "active" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "width" | "wmode" | "onChangeTab" | "counter"> & React.RefAttributes<HTMLLIElement>>

Import

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

TabbedContainer

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

TabContent variable

Signature

TabContent: FC<Props>

Import

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

Table

Wed, 15 Apr 2026 03:22:24 +0000

Table variable

Signature

Table: FC<Props>

Import

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

TableCellDisplayMode

Wed, 15 Apr 2026 03:22:24 +0000

TableCellDisplayMode enum

Signature

export declare enum TableCellDisplayMode

Import

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

Enumeration Members

Member	Value	Description
Auto	`"auto"`
BasicGauge	`"basic"`
ColorBackground	`"color-background"`
ColorText	`"color-text"`
GradientGauge	`"gradient-gauge"`
Image	`"image"`
JSONView	`"json-view"`
LcdGauge	`"lcd-gauge"`

TableInputCSV

Wed, 15 Apr 2026 03:22:24 +0000

TableInputCSV variable

Signature

TableInputCSV: React.FunctionComponent<Pick<Props, "config" | "text" | "height" | "width" | "onSeriesParsed">>

Import

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

TableSortByFieldState

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

TabsBar variable

Signature

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

Import

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

Tag

Wed, 15 Apr 2026 03:22:24 +0000

Tag variable

Signature

Tag: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>

Import

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

TagList

Wed, 15 Apr 2026 03:22:24 +0000

Signature

TagList: FC<Props>

Import

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

TagsInput

Wed, 15 Apr 2026 03:22:24 +0000

TagsInput variable

Signature

TagsInput: FC<Props>

Import

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

TextArea

Wed, 15 Apr 2026 03:22:24 +0000

TextArea variable

Signature

TextArea: React.ForwardRefExoticComponent<Pick<Props, "prefix" | "min" | "max" | "name" | "type" | "key" | "value" | "data" | "color" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "height" | "cite" | "form" | "label" | "span" | "summary" | "default" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "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" | "css" | "list" | "step" | "content" | "start" | "wrap" | "open" | "multiple" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "width" | "wmode" | "invalid"> & React.RefAttributes<HTMLTextAreaElement>>

Import

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

Themeable

Wed, 15 Apr 2026 03:22:24 +0000

Themeable interface

Signature

export interface Themeable

Import

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

Properties

Property	Type	Description
theme	`GrafanaTheme`

theme property

Signature

theme: GrafanaTheme;

ThemeContext

Wed, 15 Apr 2026 03:22:24 +0000

ThemeContext variable

Signature

ThemeContext: React.Context<GrafanaTheme>

Import

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

TimeOfDayPicker

Wed, 15 Apr 2026 03:22:24 +0000

TimeOfDayPicker variable

Signature

TimeOfDayPicker: FC<Props>

Import

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

TimeRangeInput

Wed, 15 Apr 2026 03:22:24 +0000

TimeRangeInput variable

Signature

TimeRangeInput: FC<TimeRangeInputProps>

Import

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

TimeRangePicker

Wed, 15 Apr 2026 03:22:24 +0000

TimeRangePicker variable

Signature

TimeRangePicker: React.FunctionComponent<Pick<TimeRangePickerProps, "value" | "timeZone" | "onChange" | "history" | "onChangeTimeZone" | "hideQuickRanges" | "hideText" | "timeSyncButton" | "isSynced" | "onMoveBackward" | "onMoveForward" | "onZoom">>

Import

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

TimeZonePicker

Wed, 15 Apr 2026 03:22:24 +0000

TimeZonePicker variable

Signature

TimeZonePicker: React.FC<Props>

Import

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

TLSAuthSettings

Wed, 15 Apr 2026 03:22:24 +0000

TLSAuthSettings variable

Signature

TLSAuthSettings: React.FC<HttpSettingsBaseProps>

Import

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

ToggleButton

Wed, 15 Apr 2026 03:22:24 +0000

ToggleButton variable

Signature

ToggleButton: FC<ToggleButtonProps>

Import

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

ToggleButtonGroup

Wed, 15 Apr 2026 03:22:24 +0000

ToggleButtonGroup class

Signature

export declare class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps>

Import

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

Methods

Method	Modifiers	Description
render()

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

Token

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

ToolbarButton variable

Signature

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

Import

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

ToolbarButtonRow

Wed, 15 Apr 2026 03:22:24 +0000

ToolbarButtonRow variable

Signature

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

Import

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

Tooltip

Wed, 15 Apr 2026 03:22:24 +0000

Tooltip variable

Signature

Tooltip: FC<TooltipProps>

Import

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

TooltipContainer

Wed, 15 Apr 2026 03:22:24 +0000

TooltipContainer variable

Signature

TooltipContainer: React.FC<TooltipContainerProps>

Import

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

TypeaheadInput

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

usePlotContext

Wed, 15 Apr 2026 03:22:24 +0000

usePlotContext variable

Signature

usePlotContext: () => PlotContextType

Import

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

usePlotPluginContext

Wed, 15 Apr 2026 03:22:24 +0000

usePlotPluginContext variable

Signature

usePlotPluginContext: () => PlotPluginsContextType

Import

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

useRefreshAfterGraphRendered

Wed, 15 Apr 2026 03:22:24 +0000

useRefreshAfterGraphRendered variable

Forces re-render of a component when uPlots’s draw hook is fired. This hook is usefull in scenarios when you want to reposition XYCanvas elements when i.e. plot size changes

Signature

useRefreshAfterGraphRendered: (pluginId: string) => number

Import

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

useStyles

Wed, 15 Apr 2026 03:22:24 +0000

useStyles() function

Hook for using memoized styles with access to the theme.

NOTE: For memoization to work, you need to ensure that the function you pass in doesn’t change, or only if it needs to. (i.e. declare your style creator outside of a function component or use useCallback().)

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

useTheme

Wed, 15 Apr 2026 03:22:24 +0000

useTheme() function

Signature

export declare function useTheme(): GrafanaTheme;

Import

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

Returns:

GrafanaTheme

validate

Wed, 15 Apr 2026 03:22:24 +0000

validate variable

Signature

validate: (value: string, validationRules: ValidationRule[]) => string[] | null

Import

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

ValidationEvents

Wed, 15 Apr 2026 03:22:24 +0000

ValidationEvents interface

Signature

export interface ValidationEvents

Import

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

ValidationRule

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +0000

ValuePicker() function

Signature

export declare function ValuePicker<T>({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, }: ValuePickerProps<T>): JSX.Element;

Import

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

Parameters

Parameter	Type	Description
{ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, }	`ValuePickerProps<T>`

Returns:

JSX.Element

VerticalGroup

Wed, 15 Apr 2026 03:22:24 +0000

VerticalGroup variable

Signature

VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>>

Import

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

VizLayout

Wed, 15 Apr 2026 03:22:24 +0000

VizLayout variable

VizLayout variable

Signature

VizLayout: VizLayoutComponentType

Import

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

VizLayoutComponentType

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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>`	*(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>;

width property

Signature

width: number;

VizLegend

Wed, 15 Apr 2026 03:22:24 +0000

VizLegend variable

Signature

VizLegend: React.FunctionComponent<LegendProps>

Import

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

VizLegendItem

Wed, 15 Apr 2026 03:22:24 +0000

VizLegendItem interface

Signature

export interface VizLegendItem

Import

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

Properties

Property	Type	Description
color	`string`
disabled	`boolean`
fieldIndex	`DataFrameFieldIndex`
getDisplayValues	`() => DisplayValue[]`
label	`string`
yAxis	`number`

color property

Signature

color: string;

disabled property

Signature

disabled?: boolean;

fieldIndex property

Signature

fieldIndex?: DataFrameFieldIndex;

getDisplayValues property

Signature

getDisplayValues?: () => DisplayValue[];

label property

Signature

label: string;

yAxis property

Signature

yAxis: number;

VizLegendOptions

Wed, 15 Apr 2026 03:22:24 +0000

VizLegendOptions interface

Signature

export interface VizLegendOptions

Import

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

Properties

Property	Type	Description
calcs	`string[]`
displayMode	`LegendDisplayMode`
placement	`LegendPlacement`

calcs property

Signature

calcs: string[];

displayMode property

Signature

displayMode: LegendDisplayMode;

placement property

Signature

placement: LegendPlacement;

VizRepeater

Wed, 15 Apr 2026 03:22:24 +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

Wed, 15 Apr 2026 03:22:24 +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;

WithContextMenu

Wed, 15 Apr 2026 03:22:24 +0000

WithContextMenu variable

Signature

WithContextMenu: React.FC<WithContextMenuProps>

Import

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

withTheme

Wed, 15 Apr 2026 03:22:24 +0000

withTheme variable

Signature

withTheme: <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => React.FunctionComponent<Pick<P, Exclude<keyof P, "theme">>> & S

Import

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

XYCanvas

Wed, 15 Apr 2026 03:22:24 +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';