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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">solid Style</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 Style</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 Style</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 Style</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>
  <h3 class="text-lg font-semibold mb-4 mt-8">Pill vs Rounded</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">
      Pill (solid)
    </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">
      Rounded (solid)
    </span>
    <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">
      Pill (outline)
    </span>
    <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-md">
      Rounded (outline)
    </span>
    <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">
      Pill (soft)
    </span>
    <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-md">
      Rounded (soft)
    </span>
    <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">
      Pill (ghost)
    </span>
    <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-md">
      Rounded (ghost)
    </span>
  </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
<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 %> Style</h3>
      <div class="flex flex-wrap gap-3 items-center">
        <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
          <%= render BetterUi::BadgeComponent.new(variant: variant, style: style) do %>
            <%= variant.to_s.capitalize %>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
  <h3 class="text-lg font-semibold mb-4 mt-8">Pill vs Rounded</h3>
  <div class="flex flex-wrap gap-3 items-center">
    <% (@styles || [:solid, :outline, :soft, :ghost]).each do |style| %>
      <%= render BetterUi::BadgeComponent.new(style: style, pill: true) do %>
        Pill (<%= style %>)
      <% end %>
      <%= render BetterUi::BadgeComponent.new(style: style, pill: false) do %>
        Rounded (<%= style %>)
      <% end %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.