Beta badge

The EuiBetaBadge was created specifically to call out modules that are not in GA. Generally the labels used are "Beta" or "Lab". They require an extra

tooltipContent to describe the purpose of the badge. You can pass an optional title prop to populate the tooltip title or html title attribute but by default it will use the label.

If you pass in an iconType, only the icon will be used in the badge itself and the label will be applied as the title. Only use an icon when attaching the beta badge to small components. Beta badges can also be made clickable by passing href or onClick as needed.

They can also be used in conjunction with

EuiCards and EuiKeyPadMenuItems.

Loading...

Props

EuiBetaBadge

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop label# ↦	Description and type One word label like "Beta" or "Lab" Type: string | number | boolean | ReactElement | Iterable<ReactNode> | ReactPortal | (ReactElement<...> & string) | (Iterable<...> & string) | (ReactPortal & string) ↦	Default value Required ↵
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 target# ↦	Description and type Type: string ↦	Default value ↵
Prop title# ↦	Description and type Optional title will be supplied as tooltip title or title attribute otherwise the label will be used Type: string ↦	Default value ↵
Prop href# ↦	Description and type Type: string ↦	Default value ↵
Prop onClick# ↦	Description and type Will apply an onclick to the badge itself Type: MouseEventHandler<HTMLButtonElement> ↦	Default value ↵
Prop onClickAriaLabel# ↦	Description and type Aria label applied to the onClick button Type: string ↦	Default value ↵
Prop iconType# ↦	Description and type Supply an icon type if the badge should just be an icon Type: IconType ↦	Default value ↵
Prop tooltipContent# ↦	Description and type Content for the tooltip Type: ReactNode ↦	Default value ↵
Prop tooltipPosition# ↦	Description and type Custom position of the tooltip Type: ToolTipPositions ↦	Default value top ↵
Prop anchorProps# ↦	Description and type Passes onto the span wrapping the badge Type: CommonProps & HTMLAttributes<HTMLSpanElement> ↦	Default value ↵
Prop color# ↦	Description and type Accepts accent, subdued, hollow and warning. Type: "accent" | "warning" | "subdued" | "hollow" ↦	Default value hollow ↵
Prop size# ↦	Description and type Type: "s" | "m" ↦	Default value m ↵
Prop alignment# ↦	Description and type Sets the vertical-align CSS property Type: "baseline" | "middle" ↦	Default value baseline ↵

𐘂𐘂