Badge

EuiBadges are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a EuiBadgeGroup so that they will wrap when width is constrained (as seen below).

Badge with Icon

Badges can use icons on the left and right (default) sides.

Badge with onClick events

Badges can have onClick events applied to the badge itself or the icon within the badge. The latter option is useful for when you might use badges in other components (like a tag system with autocomplete where you need close events).

onClick with iconOnClick

When providing both these click handlers, EuiBadge must alter the contents so that it does not contain nested button tags. Please make note that if you provide props other than those explicit to EuiBadge, they will always be applied to the main button tag which may be inside of the outer most tag.

Badge for health status

Badges can work as health status indicators in places where there are a lot of repeated statuses, e.g. in tables.

Badge with href

Badges can also be made to render anchor tags by passing an href.

Badge groups and truncation

Badges, like buttons, will only every be a single line of text. This means text will not wrap, but be truncated if the badge's width reaches that of its parent's.

For this reason, badges also auto-apply the inner text of the badge to the title attribute of the element to provide default browser tooltips with the full badge text.

To ensure proper wrapping, truncation and spacing of multiple badges, it is advisable to wrap them in a EuiBadgeGroup.

Beta badge type

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.

Notification badge type

Used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the EuiHeader and EuiFilterButton components.

Props

EuiBadge

Extends HTMLAttributes


Prop	Description and type	Default value
Prop iconType#	Description and type Accepts any string from our icon library Type: `IconType`	Default value
Prop iconSide#	Description and type The side of the badge the icon should sit Type: `"left" \| "right"`	Default value `left`
Prop color#	Description and type Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`. Type: `string`	Default value `default`
Prop isDisabled#	Description and type Will override any color passed through the `color` prop. Type: `boolean`	Default value
Prop closeButtonProps#	Description and type Props passed to the close button. Type: `Partial<Omit<EuiIconProps, "stylesMemoizer"> & RefAttributes<unknown>>`	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 iconOnClick#	Description and type Will apply an onclick to icon within the badge Type: `MouseEventHandler<HTMLButtonElement>`	Default value
Prop iconOnClickAriaLabel#	Description and type Aria label applied to the iconOnClick button Type: `string`	Default value
Prop target#	Description and type 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

EuiBadgeGroup

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 children#	Description and type Should be a list of `EuiBadge`s, but can also be any other element Type: `ReactNode`	Default value
Prop gutterSize#	Description and type Space between badges Type: `"xs" \| "s" \| "none"`	Default value `xs`
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLDivElement>`	Default value

EuiNotificationBadge

Extends HTMLAttributes


Prop	Description and type	Default value
Prop children#	Description and type ReactNode to render as this component's content Type: `ReactNode`	Default value Required
Prop size#	Description and type Type: `"s" \| "m"`	Default value `s`
Prop color#	Description and type Type: `"accent" \| "success" \| "subdued"`	Default value `accent`
Prop className#	Description and type Type: `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 css#	Description and type Type: `Interpolation<Theme>`	Default value

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`