Skip to sidebar
Skip to canvas
Search for components
⌃ K
Docs overview
Intro
Theme
Icon
Buttons
Button
ConfirmButton
IconButton
Pagination
ToolbarButton
Data Display
Badge
Basic
Skip to canvas
Docs
FeatureBadge
PluginSignatureBadge
Forms
AutoSaveField
Cascader
Checkbox
Combobox
Field
FieldArray
FieldSet
FieldValidationMessage
FileDropzone
FileListItem
FileUpload
Form
InlineField
InlineFieldRow
InlineLabel
Input
Label
Legend
MultiCombobox
RadioButtonGroup
RadioButtonList
SecretInput
SecretTextArea
Select
Slider
Switch
Tags
TagsInput
TextArea
Layout
ClickOutsideWrapper
CollapsableSection
Collapse
Groups
InfoBox
PageToolbar
Tabs
Overlays
Alert
ConfirmModal
Drawer
Dropdown
Modal
Toggletip
Tooltip
Visualizations
BarGauge
BigValue
EmptySearchResult
FormattedValueDisplay
PanelChrome
Spinner
Table
VizLayout
VizLegend
VizTooltip
General
Card
ContextMenu
Divider
EmptyState
ErrorBoundary
FilterPill
Layout
LoadingBar
LoadingPlaceholder
Menu
PanelContainer
RenderUserContentAsHTML
Text
TextLink
UsersIndicator
Data Source
DataSourceHttpSettings
QueryField
Segment
Experimental
InteractiveTable
Pickers and Editors
ColorPicker
RefreshPicker
StatsPicker
TimePickers
UnitPicker
ValuePicker
Recently opened
Badge
Data Display
Controls
4
Actions
Addons
Accessibility
Code
Name
Control
text
*
Badge label
color
*
Choose option...
blue
red
green
orange
purple
darkgrey
icon
Choose option...
None
Icon: google
Icon: microsoft
Icon: github
Icon: gitlab
Icon: okta
Icon: discord
Icon: hipchat
Icon: amazon
Icon: google-hangouts-alt
Icon: pagerduty
Icon: line
Icon: anchor
Icon: adjust-circle
Icon: angle-double-down
Icon: angle-double-right
Icon: angle-double-left
Icon: angle-double-up
Icon: angle-down
Icon: angle-left
Icon: angle-right
Icon: angle-up
Icon: align-left
Icon: align-right
Icon: api-endpoint
Icon: application-observability
Icon: apps
Icon: archive-alt
Icon: arrow
Icon: arrow-down
Icon: arrow-from-right
Icon: arrow-left
Icon: arrow-random
Icon: arrow-right
Icon: arrow-to-right
Icon: arrow-up
Icon: arrows-h
Icon: arrows-v
Icon: asserts
Icon: expand-arrows
Icon: expand-arrows-alt
Icon: at
Icon: ai
Icon: backward
Icon: bars
Icon: bell
Icon: bell-slash
Icon: bolt
Icon: book
Icon: bookmark
Icon: book-open
Icon: brackets-curly
Icon: browser-alt
Icon: bug
Icon: building
Icon: calculator-alt
Icon: calendar-alt
Icon: calendar-slash
Icon: camera
Icon: capture
Icon: channel-add
Icon: chart-line
Icon: check
Icon: check-circle
Icon: check-square
Icon: circle
Icon: circle-mono
Icon: clipboard-alt
Icon: clock-nine
Icon: cloud
Icon: cloud-download
Icon: cloud-upload
Icon: code-branch
Icon: cog
Icon: columns
Icon: comment-alt
Icon: comment-alt-message
Icon: comment-alt-share
Icon: comments-alt
Icon: compass
Icon: compress-arrows
Icon: copy
Icon: corner-down-right-alt
Icon: create-dashboard
Icon: credit-card
Icon: crosshair
Icon: cube
Icon: dashboard
Icon: database
Icon: dice-three
Icon: docker
Icon: document-info
Icon: document-layout-left
Icon: download-alt
Icon: draggabledots
Icon: drilldown
Icon: edit
Icon: ellipsis-v
Icon: enter
Icon: envelope
Icon: exchange-alt
Icon: exclamation-triangle
Icon: exclamation-circle
Icon: exclamation
Icon: external-link-alt
Icon: eye
Icon: eye-slash
Icon: ellipsis-h
Icon: fa fa-spinner
Icon: favorite
Icon: file-alt
Icon: file-blank
Icon: file-copy-alt
Icon: file-download
Icon: file-edit-alt
Icon: file-landscape-alt
Icon: filter
Icon: flip
Icon: folder
Icon: font
Icon: fire
Icon: folder-open
Icon: folder-plus
Icon: folder-upload
Icon: forward
Icon: frontend-observability
Icon: gf-bar-alignment-after
Icon: gf-bar-alignment-before
Icon: gf-bar-alignment-center
Icon: gf-glue
Icon: gf-grid
Icon: gf-interpolation-linear
Icon: gf-interpolation-smooth
Icon: gf-interpolation-step-after
Icon: gf-interpolation-step-before
Icon: gf-landscape
Icon: gf-layout-simple
Icon: gf-logs
Icon: gf-ml
Icon: gf-movepane-left
Icon: gf-movepane-right
Icon: gf-portrait
Icon: gf-service-account
Icon: gf-show-context
Icon: gf-pin
Icon: gf-prometheus
Icon: gf-traces
Icon: globe
Icon: grafana
Icon: graph-bar
Icon: heart
Icon: heart-rate
Icon: heart-break
Icon: history
Icon: history-alt
Icon: home
Icon: home-alt
Icon: horizontal-align-center
Icon: horizontal-align-left
Icon: horizontal-align-right
Icon: hourglass
Icon: import
Icon: info
Icon: info-circle
Icon: k6
Icon: k6-rounded
Icon: key-skeleton-alt
Icon: keyboard
Icon: kubernetes
Icon: layer-group
Icon: layers-alt
Icon: legend-hide
Icon: legend-show
Icon: library-panel
Icon: line-alt
Icon: link
Icon: link-broken
Icon: list-ui-alt
Icon: list-ul
Icon: list-ol
Icon: lock
Icon: map-marker
Icon: map-marker-plus
Icon: map-marker-minus
Icon: message
Icon: minus
Icon: minus-circle
Icon: mobile-android
Icon: monitor
Icon: multi-step
Icon: palette
Icon: panel-add
Icon: paragraph
Icon: pathfinder-unite
Icon: pause
Icon: pause-circle
Icon: pen
Icon: percentage
Icon: play
Icon: plug
Icon: plus
Icon: plus-circle
Icon: plus-square
Icon: power
Icon: presentation-play
Icon: process
Icon: question-circle
Icon: record-audio
Icon: repeat
Icon: rocket
Icon: ruler-combined
Icon: save
Icon: search
Icon: search-minus
Icon: search-plus
Icon: share-alt
Icon: shield
Icon: shield-exclamation
Icon: signal
Icon: signin
Icon: signout
Icon: sitemap
Icon: slack
Icon: sliders-v-alt
Icon: spinner
Icon: sort-amount-down
Icon: sort-amount-up
Icon: square-shape
Icon: star
Icon: step-backward
Icon: stopwatch
Icon: stopwatch-slash
Icon: sync
Icon: sync-slash
Icon: table
Icon: table-collapse-all
Icon: table-expand-all
Icon: tag-alt
Icon: telegram-alt
Icon: text-fields
Icon: thumbs-up
Icon: times
Icon: times-circle
Icon: toggle-on
Icon: toggle-off
Icon: trash-alt
Icon: unarchive
Icon: unlock
Icon: upload
Icon: user
Icon: users-alt
Icon: user-arrows
Icon: vertical-align-bottom
Icon: vertical-align-center
Icon: vertical-align-top
Icon: web-section-alt
Icon: wrap-text
Icon: wrench
Icon: rss
Icon: x
Icon: add-user
Icon: attach
tooltip
Set string