@grafana/ui on Grafana Labs

addStackingConfig

Tue, 10 Mar 2026 12:41:07 +0100

commonOptionsBuilder.addStackingConfig() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
builder	`FieldConfigEditorBuilder<{` `stacking: StackingConfig;` `}>`
defaultConfig	`StackingConfig`
category	`string[]`

Returns:

void

addTextSizeOptions

Tue, 10 Mar 2026 12:41:07 +0100

commonOptionsBuilder.addTextSizeOptions() function

Adds common text control options to a visualization options

Signature

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

Import

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

Parameters

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

Returns:

void

addTooltipOptions

Tue, 10 Mar 2026 12:41:07 +0100

commonOptionsBuilder.addTooltipOptions() function

Signature

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

Import

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

Parameters

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

Returns:

void

Alert

Tue, 10 Mar 2026 12:41:07 +0100

Alert variable

Signature

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

Import

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

AlertVariant

Tue, 10 Mar 2026 12:41:07 +0100

AlertVariant type

Signature

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

Import

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

AlphaNotice

Tue, 10 Mar 2026 12:41:07 +0100

AlphaNotice variable

Signature

AlphaNotice: FC<Props>

Import

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

ansicolor

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

Badge variable

Signature

Badge: React.NamedExoticComponent<BadgeProps>

Import

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

BadgeColor

Tue, 10 Mar 2026 12:41:07 +0100

BadgeColor type

Signature

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

Import

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

BadgeProps

Tue, 10 Mar 2026 12:41:07 +0100

BadgeProps interface

Signature

export interface BadgeProps extends HTMLAttributes<HTMLDivElement>

Import

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

Properties

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

color property

Signature

color: BadgeColor;

icon property

Signature

icon?: IconName;

text property

Signature

text: React.ReactNode;

tooltip property

Signature

tooltip?: string;

BarGauge

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

BigValueColorMode enum

Signature

export declare enum BigValueColorMode

Import

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

Enumeration Members

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

BigValueGraphMode

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

BigValueJustifyMode enum

Signature

export declare enum BigValueJustifyMode

Import

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

Enumeration Members

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

BigValueTextMode

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

BracesPlugin() function

Signature

export declare function BracesPlugin(): Plugin;

Import

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

Returns:

Plugin

Button

Tue, 10 Mar 2026 12:41:07 +0100

Button variable

Signature

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

Import

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

ButtonCascader

Tue, 10 Mar 2026 12:41:07 +0100

ButtonCascader variable

Signature

ButtonCascader: React.FC<ButtonCascaderProps>

Import

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

ButtonGroup

Tue, 10 Mar 2026 12:41:07 +0100

ButtonGroup variable

Signature

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

Import

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

ButtonRow

Tue, 10 Mar 2026 12:41:07 +0100

Modal.ButtonRow variable

Signature

ButtonRow: typeof ModalButtonRow

Import

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

ButtonVariant

Tue, 10 Mar 2026 12:41:07 +0100

ButtonVariant type

Signature

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

Import

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

calculateFontSize

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

CallToActionCard variable

Signature

CallToActionCard: React.FunctionComponent<CallToActionCardProps>

Import

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

Card

Tue, 10 Mar 2026 12:41:07 +0100

Card variable

Generic card component

Signature

Card: CardInterface

Import

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

cardChrome

Tue, 10 Mar 2026 12:41:07 +0100

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

CardContainer

Tue, 10 Mar 2026 12:41:07 +0100

CardContainer variable

Signature

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

Import

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

CardContainerProps

Tue, 10 Mar 2026 12:41:07 +0100

CardContainerProps interface

Signature

export interface CardContainerProps extends HTMLAttributes<HTMLOrSVGElement>, CardInnerProps

Import

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

Properties

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

className property

Custom container styles

Signature

className?: string;

disableEvents property

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

Signature

disableEvents?: boolean;

disableHover property

No style change on hover

Signature

disableHover?: boolean;

CardProps

Tue, 10 Mar 2026 12:41:07 +0100

CardProps interface

Signature

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

Import

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

Properties

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

description property

Card description text

Signature

description?: string;

disabled property

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

Signature

disabled?: boolean;

heading property

Main heading for the Card *

Signature

heading: ReactNode;

href property

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

Signature

href?: string;

onClick property

On click handler for the Card

Signature

onClick?: () => void;

Cascader

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

CertificationKey variable

Signature

CertificationKey: FC<Props>

Import

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

Checkbox

Tue, 10 Mar 2026 12:41:07 +0100

Checkbox variable

Signature

Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "min" | "value" | "prefix" | "type" | "color" | "name" | "action" | "disabled" | "selected" | "shape" | "description" | "max" | "key" | "data" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "cite" | "form" | "label" | "span" | "summary" | "default" | "css" | "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" | "list" | "step" | "height" | "media" | "method" | "target" | "width" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "accept" | "acceptCharset" | "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" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

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

ClearPlugin

Tue, 10 Mar 2026 12:41:07 +0100

ClearPlugin() function

Signature

export declare function ClearPlugin(): Plugin;

Import

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

Returns:

Plugin

ClickOutsideWrapper

Tue, 10 Mar 2026 12:41:07 +0100

ClickOutsideWrapper class

Signature

export declare class ClickOutsideWrapper extends PureComponent<Props, State>

Import

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

Properties

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

Methods

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

defaultProps property

Signature

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

myRef property

Signature

myRef: React.RefObject<HTMLDivElement>;

onOutsideClick property

Signature

onOutsideClick: (event: any) => void;

state property

Signature

state: {
        hasEventListener: boolean;
    };

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ClipboardButton

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

ClipboardPlugin() function

Signature

export declare function ClipboardPlugin(): Plugin;

Import

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

Returns:

Plugin

CodeEditor

Tue, 10 Mar 2026 12:41:07 +0100

CodeEditor variable

Signature

CodeEditor: React.FC<CodeEditorProps>

Import

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

CollapsableSection

Tue, 10 Mar 2026 12:41:07 +0100

CollapsableSection variable

Signature

CollapsableSection: FC<Props>

Import

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

Collapse

Tue, 10 Mar 2026 12:41:07 +0100

Collapse variable

Signature

Collapse: FunctionComponent<Props>

Import

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

ColorPicker

Tue, 10 Mar 2026 12:41:07 +0100

ColorPicker variable

Signature

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

Import

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

colors

Tue, 10 Mar 2026 12:41:07 +0100

colors variable

Signature

colors: string[]

Import

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

commonOptionsBuilder

Tue, 10 Mar 2026 12:41:07 +0100

commonOptionsBuilder namespace

commonOptionsBuilder namespace

Import

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

Functions

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

Variables

Variable	Description
StackingEditor

CompletionItem

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

CompletionItemKind enum

Signature

export declare enum CompletionItemKind

Import

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

Enumeration Members

Member	Value	Description
GroupTitle	`"GroupTitle"`

ConfirmButton

Tue, 10 Mar 2026 12:41:07 +0100

ConfirmButton variable

Signature

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

Import

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

ConfirmModal

Tue, 10 Mar 2026 12:41:07 +0100

ConfirmModal variable

Signature

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

Import

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

ConfirmModalProps

Tue, 10 Mar 2026 12:41:07 +0100

ConfirmModalProps interface

Signature

export interface ConfirmModalProps

Import

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

Properties

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

Methods

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

alternativeText property

Text for alternative button

Signature

alternativeText?: string;

body property

Modal content

Signature

body: React.ReactNode;

confirmationText property

Text user needs to fill in before confirming

Signature

confirmationText?: string;

confirmText property

Text for confirm button

Signature

confirmText: string;

description property

Modal description

Signature

description?: React.ReactNode;

dismissText property

Text for dismiss button

Signature

dismissText?: string;

icon property

Icon for the modal header

Signature

icon?: IconName;

isOpen property

Toggle modal’s open/closed state

Signature

isOpen: boolean;

title property

Title for the modal header

Signature

title: string;

onAlternative method

Alternative action callback

Signature

onAlternative?(): void;

Returns:

void

onConfirm method

Confirm action callback

Signature

onConfirm(): void;

Returns:

void

onDismiss method

Dismiss action callback

Signature

onDismiss(): void;

Returns:

void

Container

Tue, 10 Mar 2026 12:41:07 +0100

Container variable

Signature

Container: React.FC<ContainerProps>

Import

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

ContextMenu

Tue, 10 Mar 2026 12:41:07 +0100

ContextMenu variable

Signature

ContextMenu: React.FC<ContextMenuProps>

Import

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

ContextMenuProps

Tue, 10 Mar 2026 12:41:07 +0100

ContextMenuProps interface

Signature

export interface ContextMenuProps

Import

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

Properties

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

onClose property

Callback for closing the menu

Signature

onClose?: () => void;

renderHeader property

A function that returns header element

Signature

renderHeader?: () => React.ReactNode;

renderMenuItems property

RenderProp function that returns menu items to display

Signature

renderMenuItems?: () => React.ReactNode;

x property

Starting horizontal position for the menu

Signature

x: number;

y property

Starting vertical position for the menu

Signature

y: number;

ControlledCollapse

Tue, 10 Mar 2026 12:41:07 +0100

ControlledCollapse variable

Signature

ControlledCollapse: FunctionComponent<Props>

Import

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

convertOldAngularValueMapping

Tue, 10 Mar 2026 12:41:07 +0100

convertOldAngularValueMapping() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
panel	`any`

Returns:

ValueMapping[]

Counter

Tue, 10 Mar 2026 12:41:07 +0100

Counter variable

Signature

Counter: FC<CounterProps>

Import

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

CustomScrollbar

Tue, 10 Mar 2026 12:41:07 +0100

CustomScrollbar variable

Wraps component into component from react-custom-scrollbars

Signature

CustomScrollbar: FC<Props>

Import

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

DataLinkInput

Tue, 10 Mar 2026 12:41:07 +0100

DataLinkInput variable

Signature

DataLinkInput: React.FC<DataLinkInputProps>

Import

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

DataLinksContextMenu

Tue, 10 Mar 2026 12:41:07 +0100

DataLinksContextMenu variable

Signature

DataLinksContextMenu: React.FC<DataLinksContextMenuProps>

Import

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

DataLinksInlineEditor

Tue, 10 Mar 2026 12:41:07 +0100

DataLinksInlineEditor variable

Signature

DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps>

Import

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

DataSourceHttpSettings

Tue, 10 Mar 2026 12:41:07 +0100

DataSourceHttpSettings variable

Signature

DataSourceHttpSettings: React.FC<HttpSettingsProps>

Import

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

defaultIntervals

Tue, 10 Mar 2026 12:41:07 +0100

defaultIntervals variable

Signature

defaultIntervals: string[]

Import

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

DeleteButton

Tue, 10 Mar 2026 12:41:07 +0100

DeleteButton variable

Signature

DeleteButton: FC<Props>

Import

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

displayName

Tue, 10 Mar 2026 12:41:07 +0100

RadioButtonGroup.displayName variable

Signature

displayName: string

Import

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

displayName

Tue, 10 Mar 2026 12:41:07 +0100

VizLegend.displayName variable

Signature

displayName: string

Import

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

DOMUtil

Tue, 10 Mar 2026 12:41:07 +0100

DOMUtil namespace

DOMUtil namespace

Import

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

Functions

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

Drawer

Tue, 10 Mar 2026 12:41:07 +0100

Drawer variable

Signature

Drawer: FC<Props>

Import

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

EmotionPerfTest

Tue, 10 Mar 2026 12:41:07 +0100

EmotionPerfTest() function

Signature

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

Import

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

Returns:

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

EmptySearchResult

Tue, 10 Mar 2026 12:41:07 +0100

EmptySearchResult variable

Signature

EmptySearchResult: FC<Props>

Import

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

ErrorBoundary

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

ErrorBoundaryAlert class

Signature

export declare class ErrorBoundaryAlert extends PureComponent<ErrorBoundaryAlertProps>

Import

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

Properties

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

Methods

Method	Modifiers	Description
render()

defaultProps property

Signature

static defaultProps: Partial<ErrorBoundaryAlertProps>;

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

ErrorBoundaryAlertProps

Tue, 10 Mar 2026 12:41:07 +0100

ErrorBoundaryAlertProps interface

Props for the ErrorBoundaryAlert component

Signature

export interface ErrorBoundaryAlertProps

Import

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

Properties

Property	Type	Description
children	`ReactNode`	Component to be wrapped with an error boundary
style	`‘page’ \| ‘alertbox’`	‘page’ will render full page error with stacktrace. ‘alertbox’ will render an . Default ‘alertbox’
title	`string`	Title for the error boundary alert

children property

Component to be wrapped with an error boundary

Signature

children: ReactNode;

style property

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

Signature

style?: 'page' | 'alertbox';

title property

Title for the error boundary alert

Signature

title?: string;

ErrorWithStack

Tue, 10 Mar 2026 12:41:07 +0100

ErrorWithStack variable

Signature

ErrorWithStack: FunctionComponent<Props>

Import

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

EventsCanvas

Tue, 10 Mar 2026 12:41:07 +0100

EventsCanvas() function

Signature

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

Import

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

Parameters

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

Returns:

JSX.Element | null

EventsWithValidation

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

FeatureBadge variable

Signature

FeatureBadge: React.FC<FeatureBadgeProps>

Import

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

FeatureInfoBox

Tue, 10 Mar 2026 12:41:07 +0100

FeatureInfoBox variable

Signature

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

Import

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

Field

Tue, 10 Mar 2026 12:41:07 +0100

Field variable

Signature

Field: React.FC<FieldProps>

Import

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

FieldArray

Tue, 10 Mar 2026 12:41:07 +0100

FieldArray variable

Signature

FieldArray: FC<FieldArrayProps>

Import

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

FieldArrayApi

Tue, 10 Mar 2026 12:41:07 +0100

FieldArrayApi interface

Signature

export interface FieldArrayApi

Import

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

Properties

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

append property

Signature

append: (value: FieldArrayValue) => void;

fields property

Signature

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

insert property

Signature

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

move property

Signature

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

prepend property

Signature

prepend: (value: FieldArrayValue) => void;

remove property

Signature

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

swap property

Signature

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

fieldMatchersUI

Tue, 10 Mar 2026 12:41:07 +0100

fieldMatchersUI variable

Signature

fieldMatchersUI: Registry<FieldMatcherUIRegistryItem<any>>

Import

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

FieldSet

Tue, 10 Mar 2026 12:41:07 +0100

FieldSet variable

Signature

FieldSet: FC<Props>

Import

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

FieldValidationMessage

Tue, 10 Mar 2026 12:41:07 +0100

FieldValidationMessage variable

Signature

FieldValidationMessage: React.FC<FieldValidationMessageProps>

Import

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

FileUpload

Tue, 10 Mar 2026 12:41:07 +0100

FileUpload variable

Signature

FileUpload: FC<Props>

Import

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

FilterPill

Tue, 10 Mar 2026 12:41:07 +0100

FilterPill variable

Signature

FilterPill: React.FC<FilterPillProps>

Import

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

focusCss

Tue, 10 Mar 2026 12:41:07 +0100

styleMixins.focusCss variable

Signature

focusCss: (theme: GrafanaTheme) => string

Import

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

Form

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

FormAPI type

Signature

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

Import

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

FormattedValueDisplay

Tue, 10 Mar 2026 12:41:07 +0100

FormattedValueDisplay variable

Signature

FormattedValueDisplay: FC<Props>

Import

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

FormInputSize

Tue, 10 Mar 2026 12:41:07 +0100

FormInputSize type

Signature

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

Import

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

FullWidthButtonContainer

Tue, 10 Mar 2026 12:41:07 +0100

FullWidthButtonContainer variable

Signature

FullWidthButtonContainer: FC<Props>

Import

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

Gauge

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

getAvailableIcons variable

Signature

getAvailableIcons: () => readonly ["angle-double-down", "angle-double-right", "angle-down", "angle-left", "angle-right", "angle-up", "apps", "arrow", "arrow-down", "arrow-from-right", "arrow-left", "arrow-random", "arrow-right", "arrow-up", "arrows-h", "bars", "bell", "bell-slash", "bolt", "book", "book-open", "brackets-curly", "bug", "calculator-alt", "calendar-alt", "camera", "channel-add", "chart-line", "check", "check-circle", "circle", "clipboard-alt", "clock-nine", "cloud", "cloud-download", "cloud-upload", "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", "eye-slash", "fa fa-spinner", "favorite", "file-alt", "file-blank", "file-copy-alt", "filter", "folder", "fire", "folder-open", "folder-plus", "folder-upload", "forward", "gf-grid", "gf-interpolation-linear", "gf-interpolation-smooth", "gf-interpolation-step-after", "gf-interpolation-step-before", "gf-landscape", "gf-layout-simple", "gf-logs", "gf-portrait", "grafana", "graph-bar", "heart", "heart-break", "history", "home-alt", "hourglass", "import", "info-circle", "key-skeleton-alt", "keyboard", "layer-group", "library-panel", "line-alt", "link", "list-ui-alt", "list-ul", "lock", "minus", "minus-circle", "mobile-android", "monitor", "palette", "panel-add", "pause", "pen", "percentage", "play", "plug", "plus", "plus-circle", "plus-square", "power", "question-circle", "repeat", "rocket", "save", "search", "search-minus", "search-plus", "share-alt", "shield", "shield-exclamation", "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 { getAvailableIcons } from '@grafana/ui';

getCardStyles

Tue, 10 Mar 2026 12:41:07 +0100

getCardStyles variable

Signature

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

Import

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

getFocusStyles

Tue, 10 Mar 2026 12:41:07 +0100

styleMixins.getFocusStyles() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

CSSObject

getFormStyles

Tue, 10 Mar 2026 12:41:07 +0100

getFormStyles variable

Signature

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

Import

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

getLogRowStyles

Tue, 10 Mar 2026 12:41:07 +0100

getLogRowStyles variable

Signature

getLogRowStyles: (theme: GrafanaTheme, logLevel?: LogLevel | undefined) => {
    logsRowMatchHighLight: string;
    logsRowMatchHighLightPreview: string;
    logsRowsTable: string;
    context: string;
    logsRow: string;
    logsRowDuplicates: string;
    logsRowLevel: string;
    logIconError: string;
    logsRowToggleDetails: string;
    logsRowLocalTime: string;
    logsRowLabels: string;
    logsRowMessage: string;
    logDetailsContainer: string;
    logDetailsTable: string;
    logsDetailsIcon: string;
    logDetailsLabel: string;
    logDetailsHeading: string;
    logDetailsValue: string;
}

Import

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

getMouseFocusStyles

Tue, 10 Mar 2026 12:41:07 +0100

styleMixins.getMouseFocusStyles() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
theme	`GrafanaTheme2`

Returns:

CSSObject

getNextCharacter

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

getScrollbarWidth() function

Signature

export declare function getScrollbarWidth(): number;

Import

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

Returns:

number

getStandardFieldConfigs

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

getTextColorForBackground() function

Signature

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

Import

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

Parameters

Parameter	Type	Description
color	`string`

Returns:

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

getTheme

Tue, 10 Mar 2026 12:41:07 +0100

getTheme variable

Signature

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

Import

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

getTooltipContainerStyles

Tue, 10 Mar 2026 12:41:07 +0100

styleMixins.getTooltipContainerStyles variable

Signature

getTooltipContainerStyles: (theme: GrafanaTheme2) => string

Import

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

Graph

Tue, 10 Mar 2026 12:41:07 +0100

Graph class

Signature

export declare class Graph extends PureComponent<GraphProps, GraphState>

Import

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

Properties

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

Methods

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

$element property

Signature

$element: any;

defaultProps property

Signature

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

element property

Signature

element: HTMLElement | null;

getBarWidth property

Signature

getBarWidth: () => number;

onPlotClick property

Signature

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

onPlotHover property

Signature

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

onPlotSelected property

Signature

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

renderContextMenu property

Signature

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

renderTooltip property

Signature

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

state property

Signature

state: GraphState;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

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

Parameters

Parameter	Type	Description
prevProps	`GraphProps`
prevState	`GraphState`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

draw method

Signature

draw(): void;

Returns:

void

getYAxes method

Signature

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

Parameters

Parameter	Type	Description
series	`GraphSeriesXY[]`

Returns:

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

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

GraphNG

Tue, 10 Mar 2026 12:41:07 +0100

GraphNG class

“Time as X” core component, expectes ascending x

Signature

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

Import

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

Constructors

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

Properties

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

Methods

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

constructor(props)

Constructs a new instance of the GraphNG class

Signature

constructor(props: GraphNGProps);

Parameters

Parameter	Type	Description
props	`GraphNGProps`

contextType property

Signature

static contextType: React.Context<PanelContext>;

getTimeRange property

Signature

getTimeRange: () => TimeRange;

panelContext property

Signature

panelContext: PanelContext;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: GraphNGProps): void;

Parameters

Parameter	Type	Description
prevProps	`GraphNGProps`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

prepState method

Signature

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

Parameters

Parameter	Type	Description
props	`GraphNGProps`
withConfig	`boolean`

Returns:

GraphNGState

render method

Signature

render(): JSX.Element | null;

Returns:

JSX.Element | null

GraphNGProps

Tue, 10 Mar 2026 12:41:07 +0100

GraphNGProps interface

Signature

export interface GraphNGProps extends Themeable2

Import

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

Properties

Property	Type	Description
children	`(builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode`
fields	`XYFieldMatchers`
frames	`DataFrame[]`
height	`number`
legend	`VizLegendOptions`
onLegendClick	`(event: GraphNGLegendEvent) => void`
preparePlotFrame	`(frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame`
prepConfig	`(alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder`
propsToDiff	`string[]`
renderLegend	`(config: UPlotConfigBuilder) => React.ReactElement \| null`
structureRev	`number`
timeRange	`TimeRange`
timeZone	`TimeZone`
width	`number`

children property

Signature

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

fields property

Signature

fields?: XYFieldMatchers;

frames property

Signature

frames: DataFrame[];

height property

Signature

height: number;

legend property

Signature

legend: VizLegendOptions;

onLegendClick property

Signature

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

preparePlotFrame property

Signature

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

prepConfig property

Signature

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

propsToDiff property

Signature

propsToDiff?: string[];

renderLegend property

Signature

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

structureRev property

Signature

structureRev?: number;

timeRange property

Signature

timeRange: TimeRange;

timeZone property

Signature

timeZone: TimeZone;

width property

Signature

width: number;

GraphSeriesToggler

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

graphTickFormatter variable

Signature

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

Import

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

graphTimeFormat

Tue, 10 Mar 2026 12:41:07 +0100

graphTimeFormat variable

Signature

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

Import

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

GraphWithLegend

Tue, 10 Mar 2026 12:41:07 +0100

GraphWithLegend variable

Signature

GraphWithLegend: React.FunctionComponent<GraphWithLegendProps>

Import

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

hasValidationEvent

Tue, 10 Mar 2026 12:41:07 +0100

hasValidationEvent variable

Signature

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

Import

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

HorizontalGroup

Tue, 10 Mar 2026 12:41:07 +0100

HorizontalGroup variable

Signature

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

Import

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

hoverColor

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

Icon variable

Signature

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

Import

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

IconButton

Tue, 10 Mar 2026 12:41:07 +0100

IconButton variable

Signature

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

Import

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

IconName

Tue, 10 Mar 2026 12:41:07 +0100

IconName type

Signature

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

Import

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

IconSize

Tue, 10 Mar 2026 12:41:07 +0100

IconSize type

Signature

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

Import

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

IconType

Tue, 10 Mar 2026 12:41:07 +0100

IconType type

Signature

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

Import

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

IndentationPlugin

Tue, 10 Mar 2026 12:41:07 +0100

IndentationPlugin() function

Signature

export declare function IndentationPlugin(): Plugin;

Import

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

Returns:

Plugin

InfoBox

Tue, 10 Mar 2026 12:41:07 +0100

InfoBox variable

Signature

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

Import

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

InlineField

Tue, 10 Mar 2026 12:41:07 +0100

InlineField variable

Signature

InlineField: FC<Props>

Import

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

InlineFieldRow

Tue, 10 Mar 2026 12:41:07 +0100

InlineFieldRow variable

Signature

InlineFieldRow: FC<Props>

Import

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

InlineFormLabel

Tue, 10 Mar 2026 12:41:07 +0100

InlineFormLabel variable

Signature

InlineFormLabel: React.FunctionComponent<Props>

Import

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

InlineLabel

Tue, 10 Mar 2026 12:41:07 +0100

InlineLabel variable

Signature

InlineLabel: FunctionComponent<Props>

Import

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

InlineSegmentGroup

Tue, 10 Mar 2026 12:41:07 +0100

InlineSegmentGroup variable

InlineSegmentGroup variable

Signature

InlineSegmentGroup: FC<Props>

Import

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

InlineSwitch

Tue, 10 Mar 2026 12:41:07 +0100

InlineSwitch variable

Signature

InlineSwitch: React.ForwardRefExoticComponent<Pick<InlineSwitchProps, "min" | "value" | "prefix" | "type" | "color" | "name" | "transparent" | "action" | "disabled" | "selected" | "shape" | "max" | "key" | "data" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "cite" | "form" | "label" | "span" | "summary" | "default" | "css" | "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" | "list" | "step" | "height" | "media" | "method" | "target" | "width" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "accept" | "acceptCharset" | "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" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "showLabel"> & React.RefAttributes<HTMLInputElement>>

Import

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

Input

Tue, 10 Mar 2026 12:41:07 +0100

Input variable

Signature

Input: React.ForwardRefExoticComponent<Pick<Props, "min" | "value" | "prefix" | "suffix" | "type" | "color" | "name" | "action" | "disabled" | "selected" | "shape" | "max" | "key" | "data" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "cite" | "form" | "label" | "span" | "summary" | "default" | "css" | "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" | "list" | "step" | "height" | "media" | "method" | "target" | "width" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "accept" | "acceptCharset" | "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" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "invalid" | "loading" | "addonBefore" | "addonAfter"> & React.RefAttributes<HTMLInputElement>>

Import

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

InputControl

Tue, 10 Mar 2026 12:41:07 +0100

InputControl variable

Signature

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

Import

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

JsonExplorer

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

Label variable

Signature

Label: React.FC<LabelProps>

Import

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

LegacyForms

Tue, 10 Mar 2026 12:41:07 +0100

LegacyForms variable

Signature

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

Import

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

LegacyInputStatus

Tue, 10 Mar 2026 12:41:07 +0100

LegacyInputStatus enum

Signature

export declare enum LegacyInputStatus

Import

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

Enumeration Members

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

Legend

Tue, 10 Mar 2026 12:41:07 +0100

Legend variable

Signature

Legend: React.FC<LabelProps>

Import

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

LegendDisplayMode

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

LegendPlacement type

Signature

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

Import

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

LinkButton

Tue, 10 Mar 2026 12:41:07 +0100

LinkButton variable

Signature

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

Import

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

linkModelToContextMenuItems

Tue, 10 Mar 2026 12:41:07 +0100

linkModelToContextMenuItems variable

Delays creating links until we need to open the ContextMenu

Signature

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

Import

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

List

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

LoadingPlaceholder variable

Signature

LoadingPlaceholder: SFC<LoadingPlaceholderProps>

Import

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

LoadingPlaceholderProps

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

LogLabels variable

Signature

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

Import

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

LogMessageAnsi

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

LogRows variable

Signature

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

Import

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

makeFragment

Tue, 10 Mar 2026 12:41:07 +0100

makeFragment variable

Signature

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

Import

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

makeValue

Tue, 10 Mar 2026 12:41:07 +0100

makeValue variable

Signature

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

Import

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

Marker

Tue, 10 Mar 2026 12:41:07 +0100

Marker variable

Signature

Marker: React.FC<MarkerProps>

Import

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

measureText

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

mockTheme variable

Signature

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

Import

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

mockThemeContext

Tue, 10 Mar 2026 12:41:07 +0100

mockThemeContext variable

Signature

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

Import

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

Modal

Tue, 10 Mar 2026 12:41:07 +0100

Signature

export declare namespace Modal

Import

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

Variables

Variable	Description
ButtonRow

ModalRoot

Tue, 10 Mar 2026 12:41:07 +0100

ModalRoot variable

Signature

ModalRoot: () => JSX.Element

Import

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

ModalsController

Tue, 10 Mar 2026 12:41:07 +0100

ModalsController variable

Signature

ModalsController: React.Consumer<ModalsContextState>

Import

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

ModalsProvider

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

ModalTabsHeader variable

Signature

ModalTabsHeader: React.FC<Props>

Import

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

Monaco

Tue, 10 Mar 2026 12:41:07 +0100

Monaco type

Signature

export declare type Monaco = typeof monacoType;

Import

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

MonacoEditor

Tue, 10 Mar 2026 12:41:07 +0100

MonacoEditor type

Signature

export declare type MonacoEditor = monacoType.editor.IStandaloneCodeEditor;

Import

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

MultiSelect

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

NewlinePlugin() function

Signature

export declare function NewlinePlugin(): Plugin;

Import

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

Returns:

Plugin

NodeGraphDataFrameFieldNames

Tue, 10 Mar 2026 12:41:07 +0100

NodeGraphDataFrameFieldNames enum

Signature

export declare enum NodeGraphDataFrameFieldNames

Import

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

Enumeration Members

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

NumberValueEditor

Tue, 10 Mar 2026 12:41:07 +0100

NumberValueEditor variable

Signature

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

Import

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

OnTagClick

Tue, 10 Mar 2026 12:41:07 +0100

OnTagClick type

Signature

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

Import

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

OptionsWithLegend

Tue, 10 Mar 2026 12:41:07 +0100

OptionsWithLegend interface

Signature

export interface OptionsWithLegend

Import

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

Properties

Property	Type	Description
legend	`VizLegendOptions`

legend property

Signature

legend: VizLegendOptions;

OptionsWithTextFormatting

Tue, 10 Mar 2026 12:41:07 +0100

OptionsWithTextFormatting interface

Signature

export interface OptionsWithTextFormatting

Import

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

Properties

Property	Type	Description
text	`VizTextDisplayOptions`

text property

Signature

text?: VizTextDisplayOptions;

OptionsWithTooltip

Tue, 10 Mar 2026 12:41:07 +0100

OptionsWithTooltip interface

Signature

export interface OptionsWithTooltip

Import

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

Properties

Property	Type	Description
tooltip	`VizTooltipOptions`

tooltip property

Signature

tooltip: VizTooltipOptions;

Pagination

Tue, 10 Mar 2026 12:41:07 +0100

Pagination variable

Signature

Pagination: React.FC<Props>

Import

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

PanelContextRoot

Tue, 10 Mar 2026 12:41:07 +0100

PanelContextRoot variable

Signature

PanelContextRoot: React.Context<PanelContext>

Import

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

PlotLegend

Tue, 10 Mar 2026 12:41:07 +0100

PlotLegend variable

Signature

PlotLegend: React.FC<PlotLegendProps>

Import

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

PluginSignatureBadge

Tue, 10 Mar 2026 12:41:07 +0100

PluginSignatureBadge variable

Signature

PluginSignatureBadge: React.FC<PluginSignatureBadgeProps>

Import

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

PluginSignatureBadgeProps

Tue, 10 Mar 2026 12:41:07 +0100

PluginSignatureBadgeProps interface

Signature

export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement>

Import

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

Properties

Property	Type	Description
status	`PluginSignatureStatus`

status property

Signature

status?: PluginSignatureStatus;

Popover

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

PopoverContent type

Signature

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

Import

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

PopoverController

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

preparePlotFrame

Tue, 10 Mar 2026 12:41:07 +0100

preparePlotFrame() function

Signature

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

Import

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

Parameters

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

Returns:

DataFrame | undefined

QueryField

Tue, 10 Mar 2026 12:41:07 +0100

QueryField class

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

Signature

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

Import

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

Constructors

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

Properties

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

Methods

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

constructor(props, context)

Constructs a new instance of the QueryField class

Signature

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

Parameters

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

editor property

Signature

editor: Editor | null;

handleBlur property

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

Signature

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

lastExecutedValue property

Signature

lastExecutedValue: Value | null;

mounted property

Signature

mounted: boolean;

onChange property

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

Signature

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

plugins property

Signature

plugins: Plugin[];

runOnChange property

Signature

runOnChange: () => void;

runOnChangeAndRunQuery property

Signature

runOnChangeAndRunQuery: () => void;

runOnChangeDebounced property

Signature

runOnChangeDebounced: Function;

runOnRunQuery property

Signature

runOnRunQuery: () => void;

cleanText method

Signature

cleanText(text: string): string;

Parameters

Parameter	Type	Description
text	`string`

Returns:

string

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

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

Parameters

Parameter	Type	Description
prevProps	`QueryFieldProps`
prevState	`QueryFieldState`

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

RadioButtonGroup

Tue, 10 Mar 2026 12:41:07 +0100

RadioButtonGroup namespace

Signature

export declare namespace RadioButtonGroup

Import

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

Variables

Variable	Description
displayName

RangeSlider

Tue, 10 Mar 2026 12:41:07 +0100

RangeSlider variable

RichHistoryQueriesTab uses this Range Component

Signature

RangeSlider: FunctionComponent<RangeSliderProps>

Import

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

RefreshPicker

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

regexValidation variable

Signature

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

Import

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

Renderable

Tue, 10 Mar 2026 12:41:07 +0100

Renderable type

Signature

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

Import

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

RenderFunction

Tue, 10 Mar 2026 12:41:07 +0100

RenderFunction type

Signature

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

Import

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

renderOrCallToRender

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

SCHEMA variable

Signature

SCHEMA: SchemaProperties

Import

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

ScrollbarPosition

Tue, 10 Mar 2026 12:41:07 +0100

ScrollbarPosition type

Signature

export declare type ScrollbarPosition = positionValues;

Import

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

Segment

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

SegmentAsync() function

Signature

export declare function SegmentAsync<T>({ value, onChange, loadOptions, Component, className, allowCustomValue, disabled, placeholder, noOptionMessageHandler, ...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, noOptionMessageHandler, …rest }	`React.PropsWithChildren<SegmentAsyncProps<T>>`

Returns:

JSX.Element

SegmentInput

Tue, 10 Mar 2026 12:41:07 +0100

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

Select

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

SelectionShortcutsPlugin() function

Signature

export declare function SelectionShortcutsPlugin(): Plugin;

Import

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

Returns:

Plugin

SelectValueEditor

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

SeriesColorPicker variable

Signature

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

Import

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

SeriesColorPickerPopover

Tue, 10 Mar 2026 12:41:07 +0100

SeriesColorPickerPopover variable

Signature

SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps>

Import

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

SeriesColorPickerPopoverWithTheme

Tue, 10 Mar 2026 12:41:07 +0100

SeriesColorPickerPopoverWithTheme variable

Signature

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

Import

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

SeriesIcon

Tue, 10 Mar 2026 12:41:07 +0100

SeriesIcon variable

Signature

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

Import

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

SeriesTable

Tue, 10 Mar 2026 12:41:07 +0100

SeriesTable variable

Signature

SeriesTable: React.FC<SeriesTableProps>

Import

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

SeriesTableProps

Tue, 10 Mar 2026 12:41:07 +0100

SeriesTableProps interface

Signature

export interface SeriesTableProps

Import

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

Properties

Property	Type	Description
series	`SeriesTableRowProps[]`
timestamp	`string \| GraphSeriesValue`

series property

Signature

series: SeriesTableRowProps[];

timestamp property

Signature

timestamp?: string | GraphSeriesValue;

SeriesTableRow

Tue, 10 Mar 2026 12:41:07 +0100

SeriesTableRow variable

Signature

SeriesTableRow: React.FC<SeriesTableRowProps>

Import

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

SeriesTableRowProps

Tue, 10 Mar 2026 12:41:07 +0100

SeriesTableRowProps interface

Signature

export interface SeriesTableRowProps

Import

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

Properties

Property	Type	Description
color	`string`
isActive	`boolean`
label	`string`
value	`string \| GraphSeriesValue`

color property

Signature

color?: string;

isActive property

Signature

isActive?: boolean;

label property

Signature

label?: string;

value property

Signature

value?: string | GraphSeriesValue;

SeriesVisibilityChangeBehavior

Tue, 10 Mar 2026 12:41:07 +0100

SeriesVisibilityChangeBehavior enum

Signature

export declare enum SeriesVisibilityChangeBehavior

Import

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

Enumeration Members

Member	Value	Description
Hide	`1`
Isolate	`0`

SetInterval

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

SingleStatBaseOptions interface

Signature

export interface SingleStatBaseOptions extends OptionsWithTextFormatting

Import

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

Properties

Property	Type	Description
orientation	`VizOrientation`
reduceOptions	`ReduceDataOptions`

orientation property

Signature

orientation: VizOrientation;

reduceOptions property

Signature

reduceOptions: ReduceDataOptions;

SlatePrism

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

Slider variable

Signature

Slider: FunctionComponent<SliderProps>

Import

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

SliderValueEditor

Tue, 10 Mar 2026 12:41:07 +0100

SliderValueEditor variable

Signature

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

Import

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

sortedColors

Tue, 10 Mar 2026 12:41:07 +0100

sortedColors variable

Signature

sortedColors: string[]

Import

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

Spinner

Tue, 10 Mar 2026 12:41:07 +0100

Spinner variable

Signature

Spinner: FC<Props>

Import

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

StackingEditor

Tue, 10 Mar 2026 12:41:07 +0100

commonOptionsBuilder.StackingEditor variable

Signature

StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>>

Import

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

StatsPicker

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

StringValueEditor variable

Signature

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

Import

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

styleMixins

Tue, 10 Mar 2026 12:41:07 +0100

styleMixins namespace

styleMixins namespace

Import

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

Functions

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

Variables

Variable	Description
focusCss
getTooltipContainerStyles

stylesFactory

Tue, 10 Mar 2026 12:41:07 +0100

stylesFactory() function

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

Switch variable

Signature

Switch: React.ForwardRefExoticComponent<Pick<Props, "min" | "value" | "prefix" | "type" | "color" | "name" | "transparent" | "action" | "disabled" | "selected" | "shape" | "max" | "key" | "data" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "cite" | "form" | "label" | "span" | "summary" | "default" | "css" | "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" | "list" | "step" | "height" | "media" | "method" | "target" | "width" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "accept" | "acceptCharset" | "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" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>

Import

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

Tab

Tue, 10 Mar 2026 12:41:07 +0100

Tab variable

Signature

Tab: React.ForwardRefExoticComponent<Pick<TabProps, "min" | "value" | "prefix" | "type" | "color" | "name" | "action" | "disabled" | "selected" | "shape" | "max" | "key" | "data" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "cite" | "form" | "label" | "span" | "summary" | "default" | "css" | "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" | "list" | "step" | "height" | "media" | "method" | "target" | "width" | "href" | "src" | "content" | "start" | "wrap" | "open" | "icon" | "multiple" | "active" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "accept" | "acceptCharset" | "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" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "onChangeTab" | "counter"> & React.RefAttributes<HTMLAnchorElement>>

Import

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

TabbedContainer

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

TabContent variable

Signature

TabContent: FC<Props>

Import

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

Table

Tue, 10 Mar 2026 12:41:07 +0100

Table variable

Signature

Table: FC<Props>

Import

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

TableCellDisplayMode

Tue, 10 Mar 2026 12:41:07 +0100

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"`
ColorBackgroundSolid	`"color-background-solid"`
ColorText	`"color-text"`
GradientGauge	`"gradient-gauge"`
Image	`"image"`
JSONView	`"json-view"`
LcdGauge	`"lcd-gauge"`

TableInputCSV

Tue, 10 Mar 2026 12:41:07 +0100

TableInputCSV variable

Signature

TableInputCSV: React.FunctionComponent<{
    text: string;
    config?: CSVConfig | undefined;
    height: string | number;
    width: string | number;
    onSeriesParsed: (data: DataFrame[], text: string) => void;
}>

Import

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

TableSortByFieldState

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

TabsBar variable

Signature

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

Import

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

Tag

Tue, 10 Mar 2026 12:41:07 +0100

Tag variable

Signature

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

Import

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

TagList

Tue, 10 Mar 2026 12:41:07 +0100

Signature

TagList: FC<Props>

Import

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

TagsInput

Tue, 10 Mar 2026 12:41:07 +0100

TagsInput variable

Signature

TagsInput: FC<Props>

Import

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

TextArea

Tue, 10 Mar 2026 12:41:07 +0100

TextArea variable

Signature

TextArea: React.ForwardRefExoticComponent<Pick<Props, "min" | "value" | "prefix" | "type" | "color" | "name" | "action" | "disabled" | "selected" | "shape" | "max" | "key" | "data" | "style" | "pattern" | "onChange" | "id" | "title" | "onBlur" | "readOnly" | "children" | "cite" | "form" | "label" | "span" | "summary" | "default" | "css" | "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" | "list" | "step" | "height" | "media" | "method" | "target" | "width" | "href" | "src" | "content" | "start" | "wrap" | "open" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "download" | "hrefLang" | "rel" | "accept" | "acceptCharset" | "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" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "invalid"> & React.RefAttributes<HTMLTextAreaElement>>

Import

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

Themeable

Tue, 10 Mar 2026 12:41:07 +0100

Themeable interface

Signature

export interface Themeable

Import

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

Properties

Property	Type	Description
theme	`GrafanaTheme`

theme property

Signature

theme: GrafanaTheme;

Themeable2

Tue, 10 Mar 2026 12:41:07 +0100

Themeable2 interface

Signature

export interface Themeable2

Import

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

Properties

Property	Type	Description
theme	`GrafanaTheme2`

theme property

Signature

theme: GrafanaTheme2;

ThemeContext

Tue, 10 Mar 2026 12:41:07 +0100

ThemeContext variable

Signature

ThemeContext: React.Context<GrafanaTheme2>

Import

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

TimeOfDayPicker

Tue, 10 Mar 2026 12:41:07 +0100

TimeOfDayPicker variable

Signature

TimeOfDayPicker: FC<Props>

Import

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

TimeRangeInput

Tue, 10 Mar 2026 12:41:07 +0100

TimeRangeInput variable

Signature

TimeRangeInput: FC<TimeRangeInputProps>

Import

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

TimeRangePicker

Tue, 10 Mar 2026 12:41:07 +0100

TimeRangePicker variable

Signature

TimeRangePicker: React.FunctionComponent<{
    value: TimeRange;
    timeZone?: string | undefined;
    onChange: (timeRange: TimeRange) => void;
    history?: TimeRange[] | undefined;
    onChangeTimeZone: (timeZone: TimeZone) => void;
    hideQuickRanges?: boolean | undefined;
    hideText?: boolean | undefined;
    timeSyncButton?: JSX.Element | undefined;
    isSynced?: boolean | undefined;
    onMoveBackward: () => void;
    onMoveForward: () => void;
    onZoom: () => void;
}>

Import

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

TimeSeries

Tue, 10 Mar 2026 12:41:07 +0100

TimeSeries variable

Signature

TimeSeries: React.FunctionComponent<{
    fields?: import("../GraphNG/types").XYFieldMatchers | undefined;
    timeZone: string;
    children?: ((builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode) | undefined;
    legend: import("../VizLegend/models.gen").VizLegendOptions;
    height: number;
    width: number;
    timeRange: TimeRange;
    frames: DataFrame[];
    structureRev?: number | undefined;
    onLegendClick?: ((event: import("..").GraphNGLegendEvent) => void) | undefined;
    preparePlotFrame?: ((frames: DataFrame[], dimFields: import("../GraphNG/types").XYFieldMatchers) => DataFrame) | undefined;
}>

Import

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

TimeZonePicker

Tue, 10 Mar 2026 12:41:07 +0100

TimeZonePicker variable

Signature

TimeZonePicker: React.FC<Props>

Import

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

TLSAuthSettings

Tue, 10 Mar 2026 12:41:07 +0100

TLSAuthSettings variable

Signature

TLSAuthSettings: React.FC<HttpSettingsBaseProps>

Import

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

Token

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

ToolbarButton variable

Signature

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

Import

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

ToolbarButtonRow

Tue, 10 Mar 2026 12:41:07 +0100

ToolbarButtonRow variable

Signature

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

Import

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

Tooltip

Tue, 10 Mar 2026 12:41:07 +0100

Tooltip variable

Signature

Tooltip: FC<TooltipProps>

Import

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

TooltipDisplayMode

Tue, 10 Mar 2026 12:41:07 +0100

TooltipDisplayMode enum

Signature

export declare enum TooltipDisplayMode

Import

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

Enumeration Members

Member	Value	Description
Multi	`"multi"`
None	`"none"`
Single	`"single"`

TypeaheadInput

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

UPlotConfigBuilder

Tue, 10 Mar 2026 12:41:07 +0100

UPlotConfigBuilder class

Signature

export declare class UPlotConfigBuilder

Import

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

Constructors

Constructor	Modifiers	Description
constructor(timeZone)		Constructs a new instance of the `UPlotConfigBuilder` class

Properties

Property	Modifiers	Type	Description
scaleKeys		`[string, string]`
tooltipInterpolator		`PlotTooltipInterpolator \| undefined`	Custom handler for closest datapoint and series lookup. Technicaly returns uPlots setCursor hook that sets tooltips state.

Methods

Method	Modifiers	Description
addAxis(props)
addBand(band)
addHook(type, hook)
addScale(props)		Add or update the scale with the scale key
addSeries(props)
addThresholds(options)
getAxisPlacement(scaleKey)
getConfig()
getSeries()
hasSync()
setCursor(cursor)
setSelect(select)
setStacking(enabled)
setSync()
setTooltipInterpolator(interpolator)

constructor(timeZone)

Constructs a new instance of the UPlotConfigBuilder class

Signature

constructor(timeZone?: TimeZone);

Parameters

Parameter	Type	Description
timeZone	`TimeZone`

scaleKeys property

Signature

scaleKeys: [string, string];

tooltipInterpolator property

Custom handler for closest datapoint and series lookup. Technicaly returns uPlots setCursor hook that sets tooltips state.

Signature

tooltipInterpolator: PlotTooltipInterpolator | undefined;

addAxis method

Signature

addAxis(props: AxisProps): void;

Parameters

Parameter	Type	Description
props	`AxisProps`

Returns:

void

addBand method

Signature

addBand(band: Band): void;

Parameters

Parameter	Type	Description
band	`Band`

Returns:

void

addHook method

Signature

addHook<T extends keyof Hooks.Defs>(type: T, hook: Hooks.Defs[T]): void;

Parameters

Parameter	Type	Description
type	`T`
hook	`Hooks.Defs[T]`

Returns:

void

addScale method

Add or update the scale with the scale key

Signature

addScale(props: ScaleProps): void;

Parameters

Parameter	Type	Description
props	`ScaleProps`

Returns:

void

addSeries method

Signature

addSeries(props: SeriesProps): void;

Parameters

Parameter	Type	Description
props	`SeriesProps`

Returns:

void

addThresholds method

Signature

addThresholds(options: UPlotThresholdOptions): void;

Parameters

Parameter	Type	Description
options	`UPlotThresholdOptions`

Returns:

void

getAxisPlacement method

Signature

getAxisPlacement(scaleKey: string): AxisPlacement;

Parameters

Parameter	Type	Description
scaleKey	`string`

Returns:

AxisPlacement

getConfig method

Signature

getConfig(): PlotConfig;

Returns:

PlotConfig

getSeries method

Signature

getSeries(): UPlotSeriesBuilder[];

Returns:

UPlotSeriesBuilder[]

hasSync method

Signature

hasSync(): boolean;

Returns:

boolean

setCursor method

Signature

setCursor(cursor?: Cursor): void;

Parameters

Parameter	Type	Description
cursor	`Cursor`

Returns:

void

setSelect method

Signature

setSelect(select: Select): void;

Parameters

Parameter	Type	Description
select	`Select`

Returns:

void

setStacking method

Signature

setStacking(enabled?: boolean): void;

Parameters

Parameter	Type	Description
enabled	`boolean`

Returns:

void

setSync method

Signature

setSync(): void;

Returns:

void

setTooltipInterpolator method

Signature

setTooltipInterpolator(interpolator: PlotTooltipInterpolator): void;

Parameters

Parameter	Type	Description
interpolator	`PlotTooltipInterpolator`

Returns:

void

usePlotContext

Tue, 10 Mar 2026 12:41:07 +0100

usePlotContext variable

Signature

usePlotContext: () => PlotContextType

Import

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

useStyles

Tue, 10 Mar 2026 12:41:07 +0100

useStyles() function

Signature

export declare function useStyles<T>(getStyles: (theme: GrafanaTheme) => T): T;

Import

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

Parameters

Parameter	Type	Description
getStyles	`(theme: GrafanaTheme) => T`

Returns:

T

useStyles2

Tue, 10 Mar 2026 12:41:07 +0100

useStyles2() function

Signature

export declare function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T): T;

Import

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

Parameters

Parameter	Type	Description
getStyles	`(theme: GrafanaTheme2) => T`

Returns:

T

useTheme

Tue, 10 Mar 2026 12:41:07 +0100

useTheme() function

Signature

export declare function useTheme(): GrafanaTheme;

Import

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

Returns:

GrafanaTheme

useTheme2

Tue, 10 Mar 2026 12:41:07 +0100

useTheme2() function

Signature

export declare function useTheme2(): GrafanaTheme2;

Import

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

Returns:

GrafanaTheme2

validate

Tue, 10 Mar 2026 12:41:07 +0100

validate variable

Signature

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

Import

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

ValidationEvents

Tue, 10 Mar 2026 12:41:07 +0100

ValidationEvents interface

Signature

export interface ValidationEvents

Import

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

ValidationRule

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

VerticalGroup variable

Signature

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

Import

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

VizLayout

Tue, 10 Mar 2026 12:41:07 +0100

VizLayout variable

VizLayout variable

Signature

VizLayout: VizLayoutComponentType

Import

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

VizLayoutComponentType

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

VizLayoutProps interface

Signature

export interface VizLayoutProps

Import

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

Properties

Property	Type	Description
children	`(width: number, height: number) => React.ReactNode`	*(BETA)*
height	`number`	*(BETA)*
legend	`React.ReactElement<VizLayoutLegendProps> \| null`	*(BETA)*
width	`number`	*(BETA)*

children property

Signature

children: (width: number, height: number) => React.ReactNode;

height property

Signature

height: number;

legend property

Signature

legend?: React.ReactElement<VizLayoutLegendProps> | null;

width property

Signature

width: number;

VizLegend

Tue, 10 Mar 2026 12:41:07 +0100

VizLegend namespace

Signature

export declare namespace VizLegend

Import

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

Variables

Variable	Description
displayName

VizLegendItem

Tue, 10 Mar 2026 12:41:07 +0100

VizLegendItem interface

Signature

export interface VizLegendItem<T = any>

Import

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

Properties

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

color property

Signature

color?: string;

data property

Signature

data?: T;

disabled property

Signature

disabled?: boolean;

fieldIndex property

Signature

fieldIndex?: DataFrameFieldIndex;

getDisplayValues property

Signature

getDisplayValues?: () => DisplayValue[];

getItemKey property

Signature

getItemKey?: () => string;

gradient property

Signature

gradient?: string;

label property

Signature

label: string;

yAxis property

Signature

yAxis: number;

VizLegendOptions

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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

Tue, 10 Mar 2026 12:41:07 +0100

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;

VizTextDisplayOptions

Tue, 10 Mar 2026 12:41:07 +0100

VizTextDisplayOptions interface

Explicit control for visualization text settings

Signature

export interface VizTextDisplayOptions

Import

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

Properties

Property	Type	Description
titleSize	`number`
valueSize	`number`

titleSize property

Signature

titleSize?: number;

valueSize property

Signature

valueSize?: number;

VizTooltip

Tue, 10 Mar 2026 12:41:07 +0100

VizTooltip variable

Signature

VizTooltip: React.FC<VizTooltipProps>

Import

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

VizTooltipContainer

Tue, 10 Mar 2026 12:41:07 +0100

VizTooltipContainer variable

Signature

VizTooltipContainer: React.FC<VizTooltipContainerProps>

Import

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

VizTooltipOptions

Tue, 10 Mar 2026 12:41:07 +0100

VizTooltipOptions type

Signature

export declare type VizTooltipOptions = {
    mode: TooltipDisplayMode;
};

Import

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

WithContextMenu

Tue, 10 Mar 2026 12:41:07 +0100

WithContextMenu variable

Signature

WithContextMenu: React.FC<WithContextMenuProps>

Import

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

withErrorBoundary

Tue, 10 Mar 2026 12:41:07 +0100

withErrorBoundary() function

HOC for wrapping a component in an error boundary.

Signature

export declare function withErrorBoundary<P = {}>(Component: ComponentType<P>, errorBoundaryProps?: Omit<ErrorBoundaryAlertProps, 'children'>): ComponentType<P>;

Import

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

Parameters

Parameter	Type	Description
Component	`ComponentType<P>`	the react component to wrap in error boundary
errorBoundaryProps	`Omit<ErrorBoundaryAlertProps, ‘children’>`	error boundary options

Returns:

ComponentType<P>

withTheme

Tue, 10 Mar 2026 12:41:07 +0100

withTheme variable

Signature

withTheme: <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => React.FunctionComponent<Subtract<P, Themeable>> & S

Import

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

XYCanvas

Tue, 10 Mar 2026 12:41:07 +0100

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';