Badge
Badges 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 FlexGroup so that they will wrap when width is constrained (as is done artificially in the example 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 later option is useful for when you might use badges in other components (like a tag system with autocomplete where you need close events).
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 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.
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 like the EuiKeyPadMenuItem.
They can also be used in conjunction with EuiCards and EuiKeyPadMenuItems.
Beta badges will also line up nicely with titles Lab
Notification badge type
Used to showcase the number of notifications, alerts or hidden selections. Typically used in EuiHeader or (eventually) EuiFilterButtons.