Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Buttons
    • 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
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
      • Date picker range
      • Super date picker
      • Auto refresh
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Forms
  • Date and time controls
  • 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 customizability, you can use the EuiRefreshInterval component which simply provides the form inputs.

Loading...

Props

EuiAutoRefresh

Extends InputHTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
onRefreshChange#
↦
Description and type

Passes back the updated state of isPaused, refreshInterval, and intervalUnits.

Type: ApplyRefreshInterval
↦
Default value
Required
↵
Prop
isPaused#
↦
Description and type

Is refresh paused or running.

Type: boolean
↦
Default value
true
↵
Prop
refreshInterval#
↦
Description and type

Refresh interval in milliseconds.

Type: number
↦
Default value
1000
↵
Prop
minInterval#
↦
Description and type

Allows specifying a minimum interval in milliseconds

Type: number
↦
Default value
0
↵
Prop
intervalUnits#
↦
Description and type

By default, refresh interval units will be rounded up to next largest unit of time
(for example, 90 seconds will become 2m).

If you do not want this behavior, you can manually control the rendered unit via this prop.

Type: "s" | "m" | "h"
↦
Default value
↵
Prop
isDisabled#
↦
Description and type
Type: boolean
↦
Default value
↵
Prop
readOnly#
↦
Description and type

The input is readOnly by default because the input value is handled by the popover form.

Type: boolean
↦
Default value
true
↵
Prop
append#
↦
Description and type

Creates an input group with element(s) coming after input.
string | ReactElement or an array of these

Type: PrependAppendType
↦
Default value
↵
Prop
className#
↦
Description and type
Type: string
↦
Default value
↵
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
fullWidth#
↦
Description and type

Expand to fill 100% of the parent.
Defaults to fullWidth prop of <EuiForm>.

Type: boolean
↦
Default value
false
↵
Prop
isLoading#
↦
Description and type
Type: boolean
↦
Default value
↵
Prop
aria-label#
↦
Description and type

Defines a string value that labels the current element.
@see aria-labelledby.

Type: string
↦
Default value
↵
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↵
Prop
compressed#
↦
Description and type

when true creates a shorter height input

Type: boolean
↦
Default value
↵
Prop
inputRef#
↦
Description and type
Type: Ref<HTMLInputElement>
↦
Default value
↵
Prop
isInvalid#
↦
Description and type
Type: boolean
↦
Default value
↵
𐘂𐘂

EuiAutoRefreshButton

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
onRefreshChange#
↦
Description and type

Passes back the updated state of isPaused, refreshInterval, and intervalUnits.

Type: ApplyRefreshInterval
↦
Default value
Required
↵
Prop
isPaused#
↦
Description and type

Is refresh paused or running.

Type: boolean
↦
Default value
true
↵
Prop
refreshInterval#
↦
Description and type

Refresh interval in milliseconds.

Type: number
↦
Default value
1000
↵
Prop
minInterval#
↦
Description and type

Allows specifying a minimum interval in milliseconds

Type: number
↦
Default value
0
↵
Prop
intervalUnits#
↦
Description and type

By default, refresh interval units will be rounded up to next largest unit of time
(for example, 90 seconds will become 2m).

If you do not want this behavior, you can manually control the rendered unit via this prop.

Type: "s" | "m" | "h"
↦
Default value
↵
Prop
isDisabled#
↦
Description and type

disabled is also allowed

Type: boolean
↦
Default value
↵
Prop
shortHand#
↦
Description and type

Reduces the time unit to a single letter

Type: boolean
↦
Default value
false
↵
Prop
size#
↦
Description and type
Type: "xs" | "s" | "m"
↦
Default value
s
↵
Prop
target#
↦
Description and type
Type: string
↦
Default value
↵
Prop
rel#
↦
Description and type
Type: string
↦
Default value
↵
Prop
className#
↦
Description and type
Type: string
↦
Default value
↵
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
color#
↦
Description and type

Any of the named color palette options.

Type: "primary" | "text" | "accent" | "accentSecondary" | "success" | "warning" | "danger"
↦
Default value
text
↵
Prop
isLoading#
↦
Description and type

Force disables the button and changes the icon to a loading spinner

Type: boolean
↦
Default value
↵
Prop
contentProps#
↦
Description and type

Object of props passed to the <span> wrapping the button's content

Type: CommonProps & EuiButtonDisplayContentType
↦
Default value
↵
Prop
textProps#
↦
Description and type

Object of props passed to the <span> wrapping the content's text/children only (not icon)

This span wrapper can be removed by passing textProps={false}.

Type: false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; })
↦
Default value
↵
Prop
aria-label#
↦
Description and type
Type: string
↦
Default value
↵
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↵
Prop
href#
↦
Description and type
Type: string
↦
Default value
↵
Prop
buttonRef#
↦
Description and type
Type: Ref<HTMLAnchorElement | HTMLButtonElement>
↦
Default value
↵
Prop
flush#
↦
Description and type

Ensure the text of the button sits flush to the left, right, or both sides of its container

Type: "left" | "right" | "both"
↦
Default value
↵
𐘂𐘂

EuiRefreshInterval

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
onRefreshChange#
↦
Description and type

Passes back the updated state of isPaused, refreshInterval, and intervalUnits.

Type: ApplyRefreshInterval
↦
Default value
Required
↵
Prop
isPaused#
↦
Description and type

Is refresh paused or running.

Type: boolean
↦
Default value
true
↵
Prop
refreshInterval#
↦
Description and type

Refresh interval in milliseconds.

Type: number
↦
Default value
1000
↵
Prop
minInterval#
↦
Description and type

Allows specifying a minimum interval in milliseconds

Type: number
↦
Default value
0
↵
Prop
intervalUnits#
↦
Description and type

By default, refresh interval units will be rounded up to next largest unit of time
(for example, 90 seconds will become 2m).

If you do not want this behavior, you can manually control the rendered unit via this prop.

Type: "s" | "m" | "h"
↦
Default value
↵
𐘂𐘂
Edit this page

Previous
Super date picker
Next
File picker
  • Auto refresh button
  • Refresh interval
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic