2020-02-26 03:03:53 -06:00
+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "@grafana/ui"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++
## @grafana/ui package
A library containing the different design components of the Grafana ecosystem.
## Classes
| Class | Description |
| --- | --- |
| [ansicolor ](./ansicolor/ ) | Represents an ANSI-escaped string. |
| [BarGauge ](./bargauge/ ) | |
| [BigValue ](./bigvalue/ ) | |
| [Cascader ](./cascader/ ) | |
| [ClickOutsideWrapper ](./clickoutsidewrapper/ ) | |
2020-04-21 03:41:50 -05:00
| [ClipboardButton ](./clipboardbutton/ ) | |
2020-02-26 03:03:53 -06:00
| [CustomScrollbar ](./customscrollbar/ ) | Wraps component into < Scrollbars > component from < code > react-custom-scrollbars</ code > |
| [ErrorBoundary ](./errorboundary/ ) | |
| [ErrorBoundaryAlert ](./errorboundaryalert/ ) | |
| [Gauge ](./gauge/ ) | |
| [Graph ](./graph/ ) | |
| [GraphSeriesToggler ](./graphseriestoggler/ ) | |
| [JsonExplorer ](./jsonexplorer/ ) | JsonExplorer<!-- --> JsonExplorer allows you to render JSON objects in HTML with a \*\*collapsible\*\* navigation. |
| [JSONFormatter ](./jsonformatter/ ) | |
| [List ](./list/ ) | |
2020-04-21 03:41:50 -05:00
| [ModalsProvider ](./modalsprovider/ ) | |
2020-02-26 03:03:53 -06:00
| [PieChart ](./piechart/ ) | |
| [Popover ](./popover/ ) | |
| [PopoverController ](./popovercontroller/ ) | |
| [Portal ](./portal/ ) | |
| [QueryField ](./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. |
| [SetInterval ](./setinterval/ ) | |
| [StatsPicker ](./statspicker/ ) | |
| [TableInputCSV ](./tableinputcsv/ ) | Expects the container div to have size set and will fill it 100% |
| [TagsInput ](./tagsinput/ ) | |
| [ToggleButtonGroup ](./togglebuttongroup/ ) | |
| [UnitPicker ](./unitpicker/ ) | |
| [VizRepeater ](./vizrepeater/ ) | |
## Enumerations
| Enumeration | Description |
| --- | --- |
| [BarGaugeDisplayMode ](./bargaugedisplaymode/ ) | |
| [BigValueColorMode ](./bigvaluecolormode/ ) | |
| [BigValueGraphMode ](./bigvaluegraphmode/ ) | |
| [BigValueJustifyMode ](./bigvaluejustifymode/ ) | |
| [CompletionItemKind ](./completionitemkind/ ) | |
| [EventsWithValidation ](./eventswithvalidation/ ) | |
2020-04-21 03:41:50 -05:00
| [LegacyInputStatus ](./legacyinputstatus/ ) | |
2020-02-26 03:03:53 -06:00
| [LegendDisplayMode ](./legenddisplaymode/ ) | |
| [PieChartType ](./piecharttype/ ) | |
2020-04-28 02:53:58 -05:00
| [TableCellDisplayMode ](./tablecelldisplaymode/ ) | |
2020-02-26 03:03:53 -06:00
## Functions
| Function | Description |
| --- | --- |
2020-04-21 03:41:50 -05:00
| [AsyncMultiSelect(props) ](./asyncmultiselect/ ) | |
| [AsyncSelect(props) ](./asyncselect/ ) | |
2020-02-26 03:03:53 -06:00
| [BracesPlugin() ](./bracesplugin/ ) | |
2020-04-21 03:41:50 -05:00
| [ButtonSelect({ placeholder, icon, variant, size, className, disabled, ...selectProps }) ](./buttonselect/ ) | |
2020-02-26 03:03:53 -06:00
| [calculateFontSize(text, width, height, lineHeight, maxSize) ](./calculatefontsize/ ) | |
| [ClearPlugin() ](./clearplugin/ ) | |
| [ClipboardPlugin() ](./clipboardplugin/ ) | |
| [convertOldAngularValueMapping(panel) ](./convertoldangularvaluemapping/ ) | Convert the angular single stat mapping to new react style |
| [FadeTransition(props) ](./fadetransition/ ) | |
2020-04-28 02:53:58 -05:00
| [Form({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, }) ](./form/ ) | |
| [getTagColor(index) ](./gettagcolor/ ) | |
2020-02-26 03:03:53 -06:00
| [getTagColorsFromName(name) ](./gettagcolorsfromname/ ) | Returns tag badge background and border colors based on hashed tag name. |
| [IndentationPlugin() ](./indentationplugin/ ) | |
| [measureText(text, fontSize) ](./measuretext/ ) | |
2020-04-21 03:41:50 -05:00
| [MultiSelect(props) ](./multiselect/ ) | |
2020-02-26 03:03:53 -06:00
| [NewlinePlugin() ](./newlineplugin/ ) | |
2020-04-21 03:41:50 -05:00
| [RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, fullWidth, }) ](./radiobuttongroup/ ) | |
| [renderOrCallToRender(itemToRender, props) ](./renderorcalltorender/ ) | Given react node or function returns element accordingly |
2020-02-26 03:03:53 -06:00
| [resetSelectStyles() ](./resetselectstyles/ ) | |
| [RunnerPlugin({ handler }) ](./runnerplugin/ ) | |
| [Segment({ options, value, onChange, Component, className, allowCustomValue, placeholder, }) ](./segment/ ) | |
| [SegmentAsync({ value, onChange, loadOptions, Component, className, allowCustomValue, placeholder, }) ](./segmentasync/ ) | |
| [SegmentInput({ value: initialValue, onChange, Component, className, placeholder, autofocus, }) ](./segmentinput/ ) | |
| [SegmentSelect({ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, }) ](./segmentselect/ ) | |
2020-04-21 03:41:50 -05:00
| [Select(props) ](./select/ ) | |
2020-02-26 03:03:53 -06:00
| [SelectionShortcutsPlugin() ](./selectionshortcutsplugin/ ) | |
2020-04-21 03:41:50 -05:00
| [SelectValueEditor({ value, onChange, item, }) ](./selectvalueeditor/ ) | |
2020-02-26 03:03:53 -06:00
| [sharedSingleStatMigrationHandler(panel) ](./sharedsinglestatmigrationhandler/ ) | |
2020-04-21 03:41:50 -05:00
| [sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions) ](./sharedsinglestatpanelchangedhandler/ ) | |
2020-02-26 03:03:53 -06:00
| [SlatePrism(optsParam) ](./slateprism/ ) | A Slate plugin to highlight code syntax. |
| [SlideOutTransition(props) ](./slideouttransition/ ) | |
| [stylesFactory(stylesCreator) ](./stylesfactory/ ) | Creates memoized version of styles creator |
| [SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, }) ](./suggestionsplugin/ ) | |
| [useTheme() ](./usetheme/ ) | |
2020-04-21 03:41:50 -05:00
| [ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, }) ](./valuepicker/ ) | |
2020-02-26 03:03:53 -06:00
## Interfaces
| Interface | Description |
| --- | --- |
| [BigValueSparkline ](./bigvaluesparkline/ ) | |
| [CascaderOption ](./cascaderoption/ ) | |
| [CompletionItem ](./completionitem/ ) | |
| [CompletionItemGroup ](./completionitemgroup/ ) | |
| [ContextMenuGroup ](./contextmenugroup/ ) | |
| [ContextMenuItem ](./contextmenuitem/ ) | |
| [ContextMenuProps ](./contextmenuprops/ ) | |
| [GraphSeriesTogglerAPI ](./graphseriestogglerapi/ ) | |
| [GraphTooltipOptions ](./graphtooltipoptions/ ) | |
| [LegendBasicOptions ](./legendbasicoptions/ ) | |
| [LegendItem ](./legenditem/ ) | |
| [LegendOptions ](./legendoptions/ ) | |
| [LegendRenderOptions ](./legendrenderoptions/ ) | |
| [SingleStatBaseOptions ](./singlestatbaseoptions/ ) | |
2020-04-21 03:41:50 -05:00
| [StyleProps ](./styleprops/ ) | |
2020-02-26 03:03:53 -06:00
| [SuggestionsState ](./suggestionsstate/ ) | |
| [Themeable ](./themeable/ ) | |
2020-04-28 02:53:58 -05:00
| [Token ](./token/ ) | |
2020-02-26 03:03:53 -06:00
| [TypeaheadInput ](./typeaheadinput/ ) | |
| [TypeaheadOutput ](./typeaheadoutput/ ) | |
| [ValidationEvents ](./validationevents/ ) | |
| [ValidationRule ](./validationrule/ ) | |
2020-04-21 03:41:50 -05:00
| [VizRepeaterRenderValueProps ](./vizrepeaterrendervalueprops/ ) | |
2020-02-26 03:03:53 -06:00
## Namespaces
| Namespace | Description |
| --- | --- |
| [DOMUtil ](./domutil/ ) | |
2020-04-21 03:41:50 -05:00
| [RadioButtonGroup ](./radiobuttongroup/ ) | |
2020-02-26 03:03:53 -06:00
| [styleMixins ](./stylemixins/ ) | |
## Variables
| Variable | Description |
| --- | --- |
| [Alert ](./alert/ ) | |
| [ALERTING\_COLOR ](./alerting_color/ ) | |
| [AlphaNotice ](./alphanotice/ ) | |
| [Button ](./button/ ) | |
| [ButtonCascader ](./buttoncascader/ ) | |
| [CallToActionCard ](./calltoactioncard/ ) | |
| [Chart ](./chart/ ) | |
2020-04-21 03:41:50 -05:00
| [Checkbox ](./checkbox/ ) | |
2020-02-26 03:03:53 -06:00
| [Collapse ](./collapse/ ) | |
| [ColorPicker ](./colorpicker/ ) | |
| [colors ](./colors/ ) | |
| [ConfirmButton ](./confirmbutton/ ) | |
| [ConfirmModal ](./confirmmodal/ ) | |
2020-04-21 03:41:50 -05:00
| [Container ](./container/ ) | |
2020-02-26 03:03:53 -06:00
| [ContextMenu ](./contextmenu/ ) | |
| [ControlledCollapse ](./controlledcollapse/ ) | |
2020-04-21 03:41:50 -05:00
| [Counter ](./counter/ ) | |
2020-02-26 03:03:53 -06:00
| [DataLinkInput ](./datalinkinput/ ) | |
| [DataLinksContextMenu ](./datalinkscontextmenu/ ) | |
2020-04-21 03:41:50 -05:00
| [DataLinksInlineEditor ](./datalinksinlineeditor/ ) | |
2020-02-26 03:03:53 -06:00
| [DataSourceHttpSettings ](./datasourcehttpsettings/ ) | |
| [DEFAULT\_ANNOTATION\_COLOR ](./default_annotation_color/ ) | |
| [DeleteButton ](./deletebutton/ ) | |
| [Drawer ](./drawer/ ) | |
| [EmptySearchResult ](./emptysearchresult/ ) | |
| [ErrorWithStack ](./errorwithstack/ ) | |
2020-04-21 03:41:50 -05:00
| [Field ](./field/ ) | |
| [FieldConfigItemHeaderTitle ](./fieldconfigitemheadertitle/ ) | |
2020-02-26 03:03:53 -06:00
| [fieldMatchersUI ](./fieldmatchersui/ ) | |
| [Forms ](./forms/ ) | |
| [FullWidthButtonContainer ](./fullwidthbuttoncontainer/ ) | |
2020-04-21 03:41:50 -05:00
| [getAvailableIcons ](./getavailableicons/ ) | |
| [getButtonStyles ](./getbuttonstyles/ ) | |
| [getFormStyles ](./getformstyles/ ) | |
2020-02-26 03:03:53 -06:00
| [getLogRowStyles ](./getlogrowstyles/ ) | |
2020-04-21 03:41:50 -05:00
| [getStandardFieldConfigs ](./getstandardfieldconfigs/ ) | Returns collection of common field config properties definitions |
| [getStandardOptionEditors ](./getstandardoptioneditors/ ) | Returns collection of standard option editors definitions |
| [getStandardTransformers ](./getstandardtransformers/ ) | |
2020-02-26 03:03:53 -06:00
| [getTheme ](./gettheme/ ) | |
| [GraphContextMenu ](./graphcontextmenu/ ) | |
| [GraphLegend ](./graphlegend/ ) | |
2020-04-28 02:53:58 -05:00
| [graphTimeFormat ](./graphtimeformat/ ) | |
| [graphTimeFormatter ](./graphtimeformatter/ ) | |
2020-02-26 03:03:53 -06:00
| [GraphWithLegend ](./graphwithlegend/ ) | |
| [hasValidationEvent ](./hasvalidationevent/ ) | |
| [HorizontalGroup ](./horizontalgroup/ ) | |
| [Icon ](./icon/ ) | |
2020-04-21 03:41:50 -05:00
| [IconButton ](./iconbutton/ ) | |
2020-04-28 02:53:58 -05:00
| [InlineFormLabel ](./inlineformlabel/ ) | |
2020-04-21 03:41:50 -05:00
| [Input ](./input/ ) | |
| [Label ](./label/ ) | |
| [LegacyForms ](./legacyforms/ ) | |
| [Legend ](./legend/ ) | |
2020-02-26 03:03:53 -06:00
| [LegendList ](./legendlist/ ) | |
| [LegendTable ](./legendtable/ ) | |
| [LinkButton ](./linkbutton/ ) | |
| [linkModelToContextMenuItems ](./linkmodeltocontextmenuitems/ ) | Delays creating links until we need to open the ContextMenu |
| [LoadingPlaceholder ](./loadingplaceholder/ ) | |
| [LogLabels ](./loglabels/ ) | |
| [LogRows ](./logrows/ ) | |
| [makeFragment ](./makefragment/ ) | |
| [makeValue ](./makevalue/ ) | |
| [mockTheme ](./mocktheme/ ) | |
| [mockThemeContext ](./mockthemecontext/ ) | Enables theme context mocking |
| [Modal ](./modal/ ) | |
2020-04-21 03:41:50 -05:00
| [ModalHeader ](./modalheader/ ) | |
| [ModalRoot ](./modalroot/ ) | |
| [ModalsController ](./modalscontroller/ ) | |
| [ModalTabContent ](./modaltabcontent/ ) | |
| [ModalTabsHeader ](./modaltabsheader/ ) | |
2020-02-26 03:03:53 -06:00
| [NO\_DATA\_COLOR ](./no_data_color/ ) | |
| [NumberValueEditor ](./numbervalueeditor/ ) | |
| [OK\_COLOR ](./ok_color/ ) | |
2020-04-21 03:41:50 -05:00
| [Pagination ](./pagination/ ) | |
2020-02-26 03:03:53 -06:00
| [PALETTE\_COLUMNS ](./palette_columns/ ) | |
| [PALETTE\_ROWS ](./palette_rows/ ) | |
| [PanelOptionsGrid ](./paneloptionsgrid/ ) | |
| [PanelOptionsGroup ](./paneloptionsgroup/ ) | |
| [PENDING\_COLOR ](./pending_color/ ) | |
| [RefreshPicker ](./refreshpicker/ ) | |
| [regexValidation ](./regexvalidation/ ) | |
| [REGION\_FILL\_ALPHA ](./region_fill_alpha/ ) | |
| [SCHEMA ](./schema/ ) | |
| [selectThemeVariant ](./selectthemevariant/ ) | |
| [SeriesColorPicker ](./seriescolorpicker/ ) | |
| [SeriesColorPickerPopover ](./seriescolorpickerpopover/ ) | |
| [SeriesColorPickerPopoverWithTheme ](./seriescolorpickerpopoverwiththeme/ ) | |
| [SeriesIcon ](./seriesicon/ ) | |
2020-04-21 03:41:50 -05:00
| [Slider ](./slider/ ) | |
2020-02-26 03:03:53 -06:00
| [sortedColors ](./sortedcolors/ ) | |
| [Spinner ](./spinner/ ) | |
| [StringValueEditor ](./stringvalueeditor/ ) | |
2020-04-21 03:41:50 -05:00
| [Switch ](./switch/ ) | |
2020-02-26 03:03:53 -06:00
| [Tab ](./tab/ ) | |
| [TabContent ](./tabcontent/ ) | |
| [Table ](./table/ ) | |
| [TabsBar ](./tabsbar/ ) | |
2020-04-21 03:41:50 -05:00
| [Tag ](./tag/ ) | |
| [TagList ](./taglist/ ) | |
| [TextArea ](./textarea/ ) | |
2020-02-26 03:03:53 -06:00
| [ThemeContext ](./themecontext/ ) | |
| [TimeOfDayPicker ](./timeofdaypicker/ ) | |
2020-04-21 03:41:50 -05:00
| [TimeRangePicker ](./timerangepicker/ ) | |
2020-02-26 03:03:53 -06:00
| [ToggleButton ](./togglebutton/ ) | |
| [Tooltip ](./tooltip/ ) | |
| [validate ](./validate/ ) | |
| [VerticalGroup ](./verticalgroup/ ) | |
| [withTheme ](./withtheme/ ) | |
## Type Aliases
| Type Alias | Description |
| --- | --- |
| [AlertVariant ](./alertvariant/ ) | |
2020-04-21 03:41:50 -05:00
| [ButtonProps ](./buttonprops/ ) | |
| [ButtonVariant ](./buttonvariant/ ) | |
| [FormAPI ](./formapi/ ) | |
| [FormInputSize ](./forminputsize/ ) | |
| [IconName ](./iconname/ ) | |
| [IconSize ](./iconsize/ ) | |
| [IconType ](./icontype/ ) | |
2020-02-26 03:03:53 -06:00
| [LegendPlacement ](./legendplacement/ ) | |
| [PopoverContent ](./popovercontent/ ) | |
| [Renderable ](./renderable/ ) | |
| [RenderFunction ](./renderfunction/ ) | |