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 iconOnClickWhen 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.
Props
EuiBadge
Prop | Description and type | Default value |
|---|---|---|
Prop iconType# | Description and type Accepts any string from our icon library IconType | Default value |
Prop iconSide# | Description and type The side of the badge the icon should sit "left" | "right" | Default value left |
Prop color# | Description and type Accepts either our palette colors (primary, success ..etc) or a hex value string | Default value default |
Prop isDisabled# | Description and type Will override any color passed through the boolean | Default value |
Prop closeButtonProps# | Description and type Props passed to the close button. 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. 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 MouseEventHandler<HTMLButtonElement> | Default value |
Prop iconOnClickAriaLabel# | Description and type Aria label applied to the iconOnClick button 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 MouseEventHandler<HTMLButtonElement> | Default value |
Prop onClickAriaLabel# | Description and type Aria label applied to the onClick button string | Default value |
EuiBadgeGroup
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. 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 ReactNode | Default value |
Prop gutterSize# | Description and type Space between badges "xs" | "s" | "none" | Default value xs |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<HTMLDivElement> | Default value |