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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="space-y-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Default</span>
    <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>
  <div class="flex flex-wrap items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Disabled</span>
    <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-disabled text-accent-ink cursor-not-allowed" disabled="disabled" aria-disabled="true">
      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-faint bg-surface-sunk text-ink-faint cursor-not-allowed" disabled="disabled" aria-disabled="true">
      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 text-ink-faint cursor-not-allowed" disabled="disabled" aria-disabled="true">
      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-line-faint bg-surface-sunk text-ink-faint cursor-not-allowed" disabled="disabled" aria-disabled="true">
      Danger
    </button>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <span class="w-20 text-xs text-ink-muted">Loading</span>
    <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-disabled text-accent-ink cursor-not-allowed" disabled="disabled" aria-disabled="true">
      <span class="size-3.5 animate-spin rounded-full border-2 border-accent-disabled border-t-accent-ink" aria-hidden="true"></span>
      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-faint bg-surface-sunk text-ink-faint cursor-not-allowed" disabled="disabled" aria-disabled="true">
      <span class="size-3.5 animate-spin rounded-full border-2 border-accent-disabled border-t-accent-ink" aria-hidden="true"></span>
      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 text-ink-faint cursor-not-allowed" disabled="disabled" aria-disabled="true">
      <span class="size-3.5 animate-spin rounded-full border-2 border-accent-disabled border-t-accent-ink" aria-hidden="true"></span>
      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-line-faint bg-surface-sunk text-ink-faint cursor-not-allowed" disabled="disabled" aria-disabled="true">
      <span class="size-3.5 animate-spin rounded-full border-2 border-accent-disabled border-t-accent-ink" aria-hidden="true"></span>
      Danger
    </button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="space-y-4">
  <% { "Default" => {}, "Disabled" => { disabled: true }, "Loading" => { loading: true } }.each do |state, options| %>
    <div class="flex flex-wrap items-center gap-3">
      <span class="w-20 text-xs text-ink-muted"><%= state %></span>
      <% ButtonComponent::VARIANTS.each_key do |variant| %>
        <%= render ButtonComponent.new(variant: variant, **options).with_content(variant.to_s.capitalize) %>
      <% end %>
    </div>
  <% end %>
</div>

Disabled and loading are states rather than a fourth and fifth variant: each composes with all three, which is what this scenario shows.

No params configured.