SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors py-2 border border-transparent bg-accent text-accent-ink hover:bg-accent-hover" >
    Primary
  </button>
  <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors py-2 border border-line bg-surface-sunk text-ink hover:border-line-strong" >
    Secondary
  </button>
  <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors py-2 border border-line-strong text-ink hover:bg-surface-subtle" >
    Outline
  </button>
  <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors py-2 border border-transparent bg-danger text-danger-ink hover:bg-danger-hover" >
    Danger
  </button>
</div>
1
2
3
4
5
<div class="flex flex-wrap items-center gap-3">
  <% ButtonComponent::VARIANTS.each_key do |variant| %>
    <%= render ButtonComponent.new(variant: variant).with_content(variant.to_s.capitalize) %>
  <% end %>
</div>

No notes provided.

No params configured.