BetterUi Components

Previews

No matching results.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Counter Badges (Solid)</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        2
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-secondary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        44
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-accent-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        39
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-success-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        56
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        4
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-warning-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        19
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-info-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        71
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-grayscale-100 text-grayscale-900 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        41
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-grayscale-900 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        24
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Counter Badges (Outline)</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-primary-600 text-primary-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        34
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-secondary-600 text-secondary-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        99
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-accent-600 text-accent-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        96
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-success-600 text-success-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        65
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-danger-600 text-danger-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        1
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-warning-600 text-warning-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        6
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-info-600 text-info-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        72
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-grayscale-400 text-grayscale-400 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        80
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-grayscale-700 text-grayscale-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        49
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Counter Sizes</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-1.5 py-0.5 text-xs gap-1 rounded-full">
        3
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-2 py-0.5 text-xs gap-1 rounded-full">
        12
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        42
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-3 py-1.5 text-base gap-2 rounded-full">
        99
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Pill vs Rounded Counters</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        7
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-md">
        7
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        99
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-md">
        99
      </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
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Counter Badges (Solid)</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
        <%= render BetterUi::BadgeComponent.new(variant: variant, counter: rand(1..99)) %>
      <% end %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Counter Badges (Outline)</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
        <%= render BetterUi::BadgeComponent.new(variant: variant, style: :outline, counter: rand(1..99)) %>
      <% end %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Counter Sizes</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <%= render BetterUi::BadgeComponent.new(size: :xs, variant: :danger, counter: 3) %>
      <%= render BetterUi::BadgeComponent.new(size: :sm, variant: :danger, counter: 12) %>
      <%= render BetterUi::BadgeComponent.new(size: :md, variant: :danger, counter: 42) %>
      <%= render BetterUi::BadgeComponent.new(size: :lg, variant: :danger, counter: 99) %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Pill vs Rounded Counters</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <%= render BetterUi::BadgeComponent.new(variant: :primary, counter: 7, pill: true) %>
      <%= render BetterUi::BadgeComponent.new(variant: :primary, counter: 7, pill: false) %>
      <%= render BetterUi::BadgeComponent.new(variant: :danger, counter: 99, pill: true) %>
      <%= render BetterUi::BadgeComponent.new(variant: :danger, counter: 99, pill: false) %>
    </div>
  </div>
</div>

No notes provided.

No params configured.