Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
    • Badge
    • Aspect ratio
    • Avatar
    • Beacon
    • Callout
    • Code
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icon
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Display
  • Beacon

Beacon

Use the

EuiBeacon component to draw visual attention to a specific location or element.

Component

It is strongly encouraged to use EuiBeacon in conjunction with

EuiTour. Standalone, the beacon is a visual cue that may lack context.

Loading...

Props

EuiBeacon

Extends HTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
className#
↦
Description and type
Type: string
↦
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
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
size#
↦
Description and type

Height and width of the center circle. Value is passed directly to the style attribute

Type: string | number
↦
Default value
12
↵
Prop
color#
↦
Description and type

Any of the named color palette options.

Type: "primary" | "accent" | "success" | "warning" | "danger" | "subdued"
↦
Default value
success
↵
𐘂𐘂
Edit this page

Previous
Avatar
Next
Callout
  • Component
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic