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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">solid Badges</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">
        Primary
      </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">
        Secondary
      </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">
        Accent
      </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">
        Success
      </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">
        Danger
      </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">
        Warning
      </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">
        Info
      </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">
        Light
      </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">
        Dark
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">outline Badges</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">
        Primary
      </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">
        Secondary
      </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">
        Accent
      </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">
        Success
      </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">
        Danger
      </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">
        Warning
      </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">
        Info
      </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">
        Light
      </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">
        Dark
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">soft Badges</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-100 text-primary-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Primary
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-secondary-100 text-secondary-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Secondary
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-accent-100 text-accent-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Accent
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-success-100 text-success-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Success
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-danger-100 text-danger-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Danger
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-warning-100 text-warning-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Warning
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-info-100 text-info-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Info
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-grayscale-100 text-grayscale-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Light
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-grayscale-800 text-grayscale-100 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Dark
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">ghost Badges</h3>
    <div class="flex flex-wrap gap-3 items-center">
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-primary-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Primary
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-secondary-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Secondary
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-accent-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Accent
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-success-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Success
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-danger-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Danger
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-warning-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Warning
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-info-600 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Info
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-grayscale-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Light
      </span>
      <span  class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-grayscale-700 px-2.5 py-1 text-sm gap-1.5 rounded-full">
        Dark
      </span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8 space-y-8">
  <% (@styles || [:solid, :outline, :soft, :ghost]).each do |style| %>
    <div>
      <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Badges</h3>
      <div class="flex flex-wrap gap-3 items-center">
        <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
          <%= render BetterUi::BadgeComponent.new(variant: variant, style: style) do %>
            <%= variant.to_s.capitalize %>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.