Skip to content

[EuiBadge] Update styles to match latest design changes #9299

@tkajtoch

Description

@tkajtoch

Summary

As part of the EuiBadge design update, we need to update the styles of the EuiBadge component to match the latest changes.

Image

Style changes

  • Set the border-radius to euiTheme.size.l (24px) - while this value is seemingly too high, it protects existing Kibana customizations
  • Add an inline padding of to the text (children) wrapper to euiTheme.size.xxs (2px)
  • Set the inline left/right margin between the text and icon elements to euiTheme.size.xxs (2px); this should not be applied for icon-only badges
  • Any additional CSS changes necessary to match the design

Acceptance criteria

  • All style changes listed above should be implemented
  • The updated EuiBadge component should match the new design
  • VRT snapshots and tests should be updated

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No fields configured for Task.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions