Back to all examples

Show multiple tags together

<GoabBlock gap="xs">
      <GoabxBadge type="information" content="In progress" />
      <GoabxBadge type="important" content="Priority" />
      <GoabxBadge type="emergency" content="Past deadline" />
    </GoabBlock>
<goab-block gap="xs">
  <goabx-badge type="information" content="In progress"></goabx-badge>
  <goabx-badge type="important" content="Priority"></goabx-badge>
  <goabx-badge type="emergency" content="Past deadline"></goabx-badge>
</goab-block>
<goa-block gap="xs">
  <goa-badge version="2" type="information" content="In progress"></goa-badge>
  <goa-badge version="2" type="important" content="Priority"></goa-badge>
  <goa-badge version="2" type="emergency" content="Past deadline"></goa-badge>
</goa-block>

Display multiple badges together using GoabBlock with tight spacing to show multiple statuses or categories for a single item.

When to use

Use this pattern when:

  • An item has multiple statuses or categories
  • You need to show related metadata together
  • Visual grouping of badges improves scanning
  • Items can have multiple applicable labels

Considerations

  • Use gap="xs" for tight spacing between badges
  • Keep badge count reasonable (2-4 typically)
  • Choose badge types that provide visual contrast
  • Consider reading order and importance