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).
Components
Default
Notification badge
EuiNotificationBadge should be used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the EuiHeader and EuiFilterButton components.
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.
Colors and types
Clickable example
Placement alongside titles
New feature Beta
Usage
Color options
Accepted color names
Custom color examples
Disabled state
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.
Guidelines
Using badges in the interface allows to indicate upcoming features and product innovations available for testing and to set user expectations about the maturity, (non-)support, and stability of a feature.
Choosing pre-GA badges
When a feature becomes available for users before being officially Generally Available (GA), it is marked using a badge. A badge can have a default and a short form (with a simple icon). With both forms, a tooltip text explains what this means for the feature to help users get the correct expectations.
Features don't necessarily go through each stage defined in this document. For example, it can start with Beta, or it can start with Technical preview and be announced as GA next.
Such badges rely on the Beta badge EUI component.
| Stage | Technical preview | Beta | GA |
|---|---|---|---|
| Description | Experimental features that may not be kept or that may change fundamentally. | Features nearing GA that are not expected to fundamentally change for GA. | Features that are officially supported for production usage. |
| Default label | TECHNICAL PREVIEW | BETA | N/A |
| Short label For navigation and contextual menus | N/A | ||
| Tooltip | This functionality is experimental and not supported. It may change or be removed at any time. | This functionality is still under development and not ready for production usage. | N/A |
| User expectations and perception | Unstable. For testing an innovation. Bugs and breaking changes are perceived as normal. | Fairly stable. For evaluating or testing an awaited feature. The feature is almost ready. There might be some bugs and UX/API refinements. | Production-ready. The feature is ready for production workloads. |
Props
EuiBadge
Prop | Description and type | Default value |
|---|---|---|
iconType# | Accepts any string from our icon library IconType | |
iconSide# | The side of the badge the icon should sit "left" | "right" | left |
color# | Accepts either our palette colors (primary, success ..etc) or a hex value string | default |
isDisabled# | Will override any color passed through the boolean | |
closeButtonProps# | Props passed to the close button. Partial<Omit<EuiIconProps, "stylesMemoizer"> & RefAttributes<unknown>> | |
className# | Type: string | |
aria-label# | Defines a string value that labels the current element. string | |
data-test-subj# | Type: string | |
css# | Type: Interpolation<Theme> | |
iconOnClick# | Will apply an onclick to icon within the badge MouseEventHandler<HTMLButtonElement> | |
iconOnClickAriaLabel# | Aria label applied to the iconOnClick button string | |
target# | Type: string | |
href# | Type: string | |
onClick# | Will apply an onclick to the badge itself MouseEventHandler<HTMLButtonElement> | |
onClickAriaLabel# | Aria label applied to the onClick button string |
EuiBadgeGroup
Prop | Description and type | Default value |
|---|---|---|
className# | Type: string | |
aria-label# | Defines a string value that labels the current element. string | |
data-test-subj# | Type: string | |
css# | Type: Interpolation<Theme> | |
children# | Should be a list of ReactNode | |
gutterSize# | Space between badges "xs" | "s" | "none" | xs |
ref# | Allows getting a ref to the component instance. LegacyRef<HTMLDivElement> |
EuiNotificationBadge
Prop | Description and type | Default value |
|---|---|---|
children# | ReactNode to render as this component's content ReactNode | Required |
size# | Type: "s" | "m" | s |
color# | Type: "accent" | "success" | "subdued" | accent |
className# | Type: string | |
aria-label# | Type: string | |
data-test-subj# | Type: string | |
css# | Type: Interpolation<Theme> |
EuiBetaBadge
Prop | Description and type | Default value |
|---|---|---|
label# | One word label like "Beta" or "Lab" string | number | boolean | ReactElement | Iterable<ReactNode> | ReactPortal | (ReactElement<...> & string) | (Iterable<...> & string) | (ReactPortal & string) | Required |
className# | Type: string | |
aria-label# | Defines a string value that labels the current element. string | |
data-test-subj# | Type: string | |
css# | Type: Interpolation<Theme> | |
target# | Type: string | |
title# | Optional title will be supplied as tooltip title or title attribute string | |
href# | Type: string | |
onClick# | Will apply an onclick to the badge itself MouseEventHandler<HTMLButtonElement> | |
onClickAriaLabel# | Aria label applied to the onClick button string | |
iconType# | Supply an icon type if the badge should just be an icon IconType | |
tooltipContent# | Content for the tooltip ReactNode | |
tooltipPosition# | Custom position of the tooltip ToolTipPositions | top |
anchorProps# | Passes onto the span wrapping the badge CommonProps & HTMLAttributes<HTMLSpanElement> | |
color# | Accepts accent, subdued, hollow and warning. "accent" | "warning" | "subdued" | "hollow" | hollow |
size# | Type: "s" | "m" | m |
alignment# | Sets the "baseline" | "middle" | baseline |