› API Reference › @grafana/ui

@grafana/ui package

A library containing the different design components of the Grafana ecosystem.

Classes

Class Description
BarGauge
BigValue
Cascader
ClickOutsideWrapper
ClipboardButton
ErrorBoundary
ErrorBoundaryAlert
Gauge
Graph
GraphNG “Time as X” core component, expectes ascending x
GraphSeriesToggler
JsonExplorer JsonExplorerJsonExplorer allows you to render JSON objects in HTML with a **collapsible** navigation.
JSONFormatter
List
LogMessageAnsi
ModalsProvider
Popover
PopoverController
QueryField 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.
RefreshPicker
SelectValueEditor
SetInterval
StatsPicker
StringArrayEditor
UnitPicker
UPlotConfigBuilder
VizRepeater

Enumerations

Enumeration Description
BarGaugeDisplayMode
BigValueColorMode
BigValueGraphMode
BigValueJustifyMode
BigValueTextMode Options for how the value & title are to be displayed
CompletionItemKind
EventsWithValidation
LegacyInputStatus
LegendDisplayMode
NodeGraphDataFrameFieldNames
SeriesVisibilityChangeBehavior
TableCellDisplayMode
TooltipDisplayMode

Functions

Function Description
AlertingSettings({ options, onOptionsChange, })
AsyncMultiSelect(props)
AsyncSelect(props)
BracesPlugin()
calculateFontSize(text, width, height, lineHeight, maxSize) (BETA)
ClearPlugin()
ClipboardPlugin()
convertOldAngularValueMapping(panel)
EmotionPerfTest()
EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config })
FadeTransition(props)
FileDropzone({ options, children, readAs, onLoad, fileListRenderer })
FileDropzoneDefaultChildren({ primaryText, secondaryText, })
FileListItem({ file: customFile, removeFile })
Form({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, …htmlProps })
getScrollbarWidth()
getTagColor(index)
getTagColorsFromName(name) Returns tag badge background and border colors based on hashed tag name.
getTextColorForBackground(color)
IndentationPlugin()
measureText(text, fontSize) (BETA)
Modal(props)
MultiSelect(props)
NewlinePlugin()
Portal(props)
preparePlotFrame(frames, dimFields)
RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, className, fullWidth, })
renderOrCallToRender(itemToRender, props) Given react node or function returns element accordingly
resetSelectStyles()
RunnerPlugin({ handler })
Segment({ options, value, onChange, Component, className, allowCustomValue, allowEmptyValue, placeholder, disabled, inputMinWidth, inputPlaceholder, onExpandedChange, autofocus, …rest })
SegmentAsync({ value, onChange, loadOptions, Component, className, allowCustomValue, allowEmptyValue, disabled, placeholder, inputMinWidth, inputPlaceholder, autofocus, onExpandedChange, noOptionMessageHandler, …rest })
SegmentInput({ value: initialValue, onChange, Component, className, placeholder, inputPlaceholder, disabled, autofocus, onExpandedChange, …rest })
Select(props)
SelectionShortcutsPlugin()
sharedSingleStatMigrationHandler(panel)
sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions)
SlatePrism(optsParam, prismLanguages) A Slate plugin to highlight code syntax.
SlideOutTransition(props)
stylesFactory(stylesCreator)
SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, })
TabbedContainer(props)
useStyles(getStyles)
useStyles2(getStyles)
useTheme()
useTheme2()
ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, })
VizLegend({ items, displayMode, sortBy: sortKey, seriesVisibilityChangeBehavior, sortDesc, onLabelClick, onToggleSort, placement, className, itemRenderer, readonly, })
withErrorBoundary(Component, errorBoundaryProps) HOC for wrapping a component in an error boundary.

Interfaces

Interface Description
BadgeProps
CardContainerProps
CardProps
CascaderOption
CompletionItem
CompletionItemGroup
ConfirmModalProps
ContextMenuProps
DatePickerProps
DatePickerWithInputProps
DropzoneFile
ErrorBoundaryAlertProps Props for the ErrorBoundaryAlert component
FieldArrayApi
FileDropzoneProps
FileListItemProps
GraphNGProps
GraphSeriesTogglerAPI
LoadingPlaceholderProps
OptionsWithLegend
OptionsWithTextFormatting
OptionsWithTooltip
PlotSelection
PluginSignatureBadgeProps
SeriesTableProps
SeriesTableRowProps
SingleStatBaseOptions
SuggestionsState
TabConfig
TableSortByFieldState
Themeable
Themeable2
TimeRangePickerProps
Token
TypeaheadInput
TypeaheadOutput
ValidationEvents
ValidationRule
VizLayoutComponentType (BETA)
VizLayoutLegendProps (BETA)
VizLayoutProps (BETA)
VizLegendItem
VizLegendOptions
VizRepeaterRenderValueProps
VizTextDisplayOptions Explicit control for visualization text settings

Namespaces

Namespace Description
commonOptionsBuilder
DOMUtil
Modal
RadioButtonGroup
styleMixins
VizLegend

Variables

Variable Description
Alert
Badge
Button
ButtonCascader
ButtonGroup
ButtonSelect
CallToActionCard
Card Generic card component
CardContainer
CertificationKey
Checkbox
CodeEditor
CollapsableSection
Collapse
ColorPicker
colors
ConfirmButton
ConfirmModal
Container
ContextMenu
ControlledCollapse
Counter
CustomScrollbar Wraps component into component from react-custom-scrollbars
DataLinkInput
DataLinksContextMenu
DataLinksInlineEditor
DataSourceHttpSettings
DatePicker
DatePickerWithInput
defaultIntervals
DeleteButton
Drawer
EmptySearchResult
ErrorWithStack
FeatureBadge
FeatureInfoBox
Field
FieldArray
fieldMatchersUI
FieldSet
FieldValidationMessage
FileUpload
FilterPill
FormattedValueDisplay
FullWidthButtonContainer
getAvailableIcons
getCardStyles
getFormStyles
getLogRowStyles
getStandardFieldConfigs Returns collection of common field config properties definitions
getStandardOptionEditors Returns collection of standard option editors definitions
getTheme
graphTickFormatter
graphTimeFormat
GraphWithLegend
hasValidationEvent
HorizontalGroup
Icon
IconButton
InfoBox
InlineField
InlineFieldRow
InlineFormLabel
InlineLabel
InlineSegmentGroup (BETA)
InlineSwitch
Input
InputControl
Label
LegacyForms
Legend
LinkButton
linkModelToContextMenuItems Delays creating links until we need to open the ContextMenu
LoadingPlaceholder
LogLabels
LogRows
makeFragment
makeValue
Marker
mockTheme
mockThemeContext
ModalRoot
ModalsController
ModalTabsHeader
NumberValueEditor
Pagination
PanelContextRoot
PlotLegend
PluginSignatureBadge
RangeSlider RichHistoryQueriesTab uses this Range Component
regexValidation
SCHEMA
selectOptionInTest
SeriesColorPicker
SeriesColorPickerPopover
SeriesColorPickerPopoverWithTheme
SeriesIcon
SeriesTable
SeriesTableRow
Slider
SliderValueEditor
sortedColors
Spinner
StringValueEditor
Switch
Tab
TabContent
Table
TableInputCSV
TabsBar
Tag
TagList
TagsInput
TextArea
ThemeContext
TimeOfDayPicker
TimeRangeInput
TimeRangePicker
TimeSeries
TimeZonePicker
TLSAuthSettings
ToolbarButton
ToolbarButtonRow
Tooltip
usePlotContext
validate
VerticalGroup
VizLayout (BETA)
VizTooltip
VizTooltipContainer
WithContextMenu
withTheme
XYCanvas 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.

Type Aliases

Type Alias Description
AlertVariant
BadgeColor
ButtonVariant
FormAPI
FormInputSize
IconButtonVariant
IconName
IconSize
IconType
LegendPlacement
Monaco
MonacoEditor
OnTagClick
PopoverContent
Renderable
RenderFunction
ScrollbarPosition
VizTooltipOptions
Related Grafana resources
Getting started with Grafana 8

Grafana 8.0 is here! Join us for a live walkthrough on how to get started using Grafana 8 and the Grafana 8 user interface while showing how to set up monitoring for a web service that uses Prometheus and Loki to store metrics and logs.

Unify your data with Grafana plugins: Splunk, MongoDB, Datadog, and more

Show how Grafana can be used to take data from multiple different sources and unify it, without disrupting the investments that are working today.

Demo: Getting started with Grafana Enterprise and observability

Join the Grafana Labs team for a 30-minute demo of how to get started with the Grafana Stack, so you can go from zero to observability in just a few minutes.