Back to all examples

Show multiple tags together

ReactAngularWeb Components
<GoabBlock gap="xs">
      <GoabBadge type="information" content="In progress" />
      <GoabBadge type="important" content="Priority" />
      <GoabBadge type="emergency" content="Past deadline" />
    </GoabBlock>

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