SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="space-y-6">
  <div>
    <p class="mb-3 text-xs text-ink-muted">Default</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-danger text-badge-danger-ink">Required</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-neutral text-badge-neutral-ink">Optional</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-warning text-badge-warning-ink">Quota</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-success text-badge-success-ink">Verified</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-info text-badge-info-ink">Info</span>
    </div>
  </div>
  <div>
    <p class="mb-3 text-xs text-ink-muted">Pill</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-danger text-badge-danger-ink uppercase tracking-wider">Required</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-neutral text-badge-neutral-ink uppercase tracking-wider">Optional</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink uppercase tracking-wider">New</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-warning text-badge-warning-ink uppercase tracking-wider">Quota</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-success text-badge-success-ink uppercase tracking-wider">Verified</span>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-info text-badge-info-ink uppercase tracking-wider">Info</span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%# The catalog's meanings, minus the one the badge does not render: method_get
    is assigned the method-get role, which RequestBarComponent draws and
    BadgeComponent::ROLE_CLASSES deliberately has no pair for. Filtering on the
    pair rather than naming the exception keeps this scenario honest when a
    meaning is added on either side. %>
<% drawn = BadgeComponent::MEANINGS.select { |_, role| BadgeComponent::ROLE_CLASSES.key?(role) } %>
<div class="space-y-6">
  <div>
    <p class="mb-3 text-xs text-ink-muted">Default</p>
    <div class="flex flex-wrap items-center gap-2">
      <% drawn.each_key do |meaning| %>
        <%= render BadgeComponent.new(meaning: meaning).with_content(meaning.to_s.humanize) %>
      <% end %>
    </div>
  </div>
  <div>
    <p class="mb-3 text-xs text-ink-muted">Pill</p>
    <div class="flex flex-wrap items-center gap-2">
      <% drawn.each_key do |meaning| %>
        <%= render BadgeComponent.new(meaning: meaning, pill: true).with_content(meaning.to_s.humanize) %>
      <% end %>
    </div>
  </div>
</div>

Every meaning the catalog assigns, drawn from Design::Components::MEANINGS rather than listed here. A meaning added to the catalog appears in this scenario without anyone editing it; a colour picked at a call site is not possible, because there is no colour parameter to pick.

No params configured.