Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • Borders
    • Breakpoints
  • Templates
    • Page template
    • Sitewide search
    • Super date picker
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Button
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Auto refresh
    • Color selection
    • Combo box
    • Compressed forms
    • Date picker
    • Expression
    • Filter group
    • Form controls
    • Form layouts
    • Form validation
    • Inline edit
    • Range sliders
    • Search bar
    • Selectable
    • Selection controls
    • Super select
  • Tabular content
    • Data grid
    • Data grid advanced
    • Data grid cells & popovers
    • Data grid schema & columns
    • Data grid style & display
    • Data grid toolbar
    • In-memory tables
    • Tables
  • Editors & Syntax
    • Code
    • Markdown editor
    • Markdown format
    • Markdown plugins
  • Elastic Charts
    • Accessibility features
    • Categorical
    • Creating charts
    • Metric Chart
    • Part to whole comparisons
    • Sizing
    • Time series
  • EUI
  • Forms
  • Auto refresh

Auto refresh

This is a component that is used by the

EuiSuperDatePicker component to create an automatic refresh configuration. It merely provides a common UI pattern but the actual refresh counter is maintained by you. It isPaused by default and the refreshInterval is set in milliseconds.

Loading...

Auto refresh button

If you're looking for a more compact version, you can use EuiAutoRefreshButton, which is the same button that is appended to EuiSuperDatePicker. For even more compactness, add shortHand={true} to reduce the active unit to a single letter.

Loading...

Refresh interval

For even more customizablity, you can use the EuiRefreshInterval component which simply provides the form inputs.

Loading...
Edit this page
Previous
Tour
Next
Color selection
  • Auto refresh button
  • Refresh interval
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic