LoopOS UI v1.1.26.2

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<div data-controller="modal" class="inline-flex">
  <div class="lui-modal__trigger" data-action="click->modal#open">
    <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
      <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
        <div class="lui-tooltip__title">
          Modal test
        </div>
      </div>
      <span class="lui-button__text" data-lui--button-target="text">
        Modal template
      </span>
    </button>
  </div>
  <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
    <div class="lui-modal__wrapper">
      <div class="lui-modal__header">
        <div class="lui-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            Confirm User Detach
          </span>
        </div>
        <div class="-mt-1" >
          <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
            <div class="lui-icon h-[10px] w-[10px]">
              <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
            </div>
          </button>
        </div>
      </div>
      <div class="lui-modal__content">
        Are you sure you want to detach? 
      </div>
      <div class="lui-modal__footer">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-action="click->modal#close">
          <span class="lui-button__text" data-lui--button-target="text">
            Cancel
          </span>
        </button>
        <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button" data-action="click->form-submit#submitForm" data-form-id="test1">
          <span class="lui-button__text" data-lui--button-target="text">
            Primary
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>
<div data-controller="modal" class="inline-flex">
  <div class="lui-modal__trigger" data-action="click->modal#open">
    <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
      <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
        <div class="lui-tooltip__title">
          Modal test
        </div>
      </div>
      <span class="lui-button__text" data-lui--button-target="text">
        Modal custom
      </span>
    </button>
  </div>
  <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
    <div class="lui-modal__wrapper">
      <div class="lui-modal__header">
        <div class="lui-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            hello
          </span>
        </div>
        <div class="-mt-1" >
          <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
            <div class="lui-icon h-[10px] w-[10px]">
              <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
            </div>
          </button>
        </div>
      </div>
      <div class="lui-modal__content">
        <form id="test1" data-form-submit-target="form" action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="de_Ome325B7Wjggosi8g8SVTYdAJuznrnozDPJZAqyY6V0sjHr6rLSeQIlVF0shWqOgF2OuCMjbxU_N6jtNCJw" autocomplete="off" />
          <input label="Name" value="form 1" type="text" name="name" id="name" />
        </form>
      </div>
      <div class="lui-modal__footer">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-action="click->modal#close">
          <span class="lui-button__text" data-lui--button-target="text">
            Cancel
          </span>
        </button>
        <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button" form="test1" data-action="click->form-submit#submitForm" data-form-id="test1">
          <span class="lui-button__text" data-lui--button-target="text">
            Primary
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>
<div data-controller="modal" class="inline-flex">
  <div class="lui-modal__trigger" data-action="click->modal#open">
    <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
      <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
        <div class="lui-tooltip__title">
          Modal test
        </div>
      </div>
      <span class="lui-button__text" data-lui--button-target="text">
        Modal template
      </span>
    </button>
  </div>
  <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
    <div class="lui-modal__wrapper">
      <div class="lui-modal__header">
        <div class="lui-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            Custom header
            <span class="lui-icon_tooltip">
              <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                <div class="lui-tooltip__title">
                  Yep it's a tooltip
                </div>
              </div>
              <div class="lui-icon h-[12px] w-[12px]">
                <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
              </div>
            </span>
          </span>
        </div>
        <div class="-mt-1" >
          <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
            <div class="lui-icon h-[10px] w-[10px]">
              <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
            </div>
          </button>
        </div>
      </div>
      <div class="lui-modal__content">
        <div>
          <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="true"
  >
            <div class="lui-tooltip__title">
              Tooltips work here too
            </div>
            <div class="lui-tooltip__description">
              <div>
                Choose your animal
              </div>
            </div>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-turtle" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-horse" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-dog" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-cat" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-bird" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-fish" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-rabbit" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--neutral--primary lui-button--size-small w-fit w-fit" data-controller="lui--button">
              <i class="lui-button__icon lui-button__icon--small fa-regular fa-snake" data-lui--button-target="leadingIcon"></i>
            </button>
          </div>
          Hover me
        </div>
      </div>
      <div class="lui-modal__footer">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-action="click->modal#close">
          <span class="lui-button__text" data-lui--button-target="text">
            Cancel
          </span>
        </button>
        <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button" data-action="click->form-submit#submitForm" data-form-id="test1">
          <span class="lui-button__text" data-lui--button-target="text">
            Primary
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>
<div data-controller="modal" class="inline-flex">
  <div class="lui-modal__trigger" data-action="click->modal#open">
    <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
      <span class="lui-button__text" data-lui--button-target="text">
        Super long modal content
      </span>
    </button>
  </div>
  <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
    <div class="lui-modal__wrapper">
      <div class="lui-modal__header">
        <div class="lui-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            Super long modal content
          </span>
        </div>
        <div class="-mt-1" >
          <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
            <div class="lui-icon h-[10px] w-[10px]">
              <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
            </div>
          </button>
        </div>
      </div>
      <div class="lui-modal__content">
        Super long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal content
      </div>
      <div class="lui-modal__footer">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-action="click->modal#close">
          <span class="lui-button__text" data-lui--button-target="text">
            Cancel
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>
<div data-controller="modal" class="inline-flex">
  <div class="lui-modal__trigger" data-action="click->modal#open">
    <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
      <span class="lui-button__text" data-lui--button-target="text">
        Super long modal content
      </span>
    </button>
  </div>
  <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
    <div class="lui-modal__wrapper">
      <div class="lui-modal__header">
        <div class="lui-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            Super long modal content
          </span>
        </div>
        <div class="-mt-1" >
          <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
            <div class="lui-icon h-[10px] w-[10px]">
              <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
            </div>
          </button>
        </div>
      </div>
      <div class="lui-modal__content">
        <div class="lui-accordion" data-controller="accordion" data-accordion-open-value="false">
          <div class="lui-accordion__header" >
            <button class="cursor-pointer flex justify-start gap-1 flex-1" type="button" data-action="click->accordion#toggle"
              data-accordion-target="trigger"
              aria-controls="accordion_f391de7f3f1d">
              <div class="lui-accordion__icon mt-1">
                <div class="lui-icon h-[8px] w-[8px]">
                  <i class="fa-regular fa-chevron-down lui-icon__icon" style="font-size: 8px; color: black;"></i>
                </div>
              </div>
              <span class="lui-accordion__title flex justify-start gap-1">
                <div class="lui-title_description lui-title_description--normal">
                  <span class="lui-title_description__title">
                    Super long modal content
                  </span>
                </div>
              </span>
            </button>
            <div aria-controls="accordion_0debccb533aa" class="lui-accordion__buttons">
            </div>
          </div>
          <div 
    id="accordion_3e94701879d4"
    class="lui-accordion__content"
    data-accordion-target="content"
  >
            <div class="lui-accordion__content-inner">
              <div class="pb-4">
                Super long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal contentSuper long modal content
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lui-modal__footer">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-action="click->modal#close">
          <span class="lui-button__text" data-lui--button-target="text">
            Cancel
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>
<div data-controller="modal" class="inline-flex">
  <div class="lui-modal__trigger" data-action="click->modal#open">
    <button class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button">
      <span class="lui-button__text" data-lui--button-target="text">
        With a table inside
      </span>
    </button>
  </div>
  <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
    <div class="lui-modal__wrapper">
      <div class="lui-modal__header">
        <div class="lui-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            With a table inside
          </span>
        </div>
        <div class="-mt-1" >
          <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
            <div class="lui-icon h-[10px] w-[10px]">
              <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
            </div>
          </button>
        </div>
      </div>
      <div class="lui-modal__content">
        <div id="table_5793709857">
          <div class="lui-table" id="table_5793709857" data-controller="table" data-table-data-source-id-value="_data_source" data-table-float-bar-outlet="#table_5793709857 .lui-table__floating_bar .lui-float_bar">
            <div data-react-class="Table" data-react-props="{"uniqueId":"table_5793709857","id":"","lang":"en","columns":[{"title":"ID","dataIndex":"id","key":"id","type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true},{"title":"Name","dataIndex":"name","key":"name","filters":[{"type":"tag","text":"Tag 0","value":"name$0"},{"type":"tag","text":"Tag 1","value":"name$1"},{"type":"tag","text":"Tag 2","value":"name$2"},{"type":"tag","text":"Tag 3","value":"name$3"},{"type":"tag","text":"Tag 4","value":"name$4"}],"type":"html","className":"lui-table__cell lui-table__cell--n1","hidable":true,"filterMode":"tree","filterSearch":true},{"title":"Life story","dataIndex":"life_story","key":"life_story","width":"30px","type":"html","className":"lui-table__cell lui-table__cell--n2","hidable":true},{"title":"Age","dataIndex":"age","key":"age","type":"html","className":"lui-table__cell lui-table__cell--n3 lui-table__cell--last","hidable":true}],"dataSource":[{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9912568611\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          1\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_2322156580\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          John Doe is a software engineer at Google.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_6597424226\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          John Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_8670528836\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          30\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":1,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9451751915\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          2\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_5215854990\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jane Doe is a software engineer at Facebook.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1569762617\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jane Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_5005363814\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          25\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":2,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9404554452\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          3\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_5703447052\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jim Doe is a software engineer at Amazon.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_3999329769\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jim Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_3139447488\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          25\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":3,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_7821441232\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          4\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_2902670536\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jill Doe is a software engineer at Apple.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1475808767\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jill Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1514812509\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          25\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":4,"_lui_data":{"delete_action":null}}],"pagination":{"current":1,"pageSize":15,"total":0},"searchQuery":null,"globalFiltersHtml":null,"tableHeader":"\u003cdiv class=\"lui-table_header\" data-controller=\"table-filters\"\u003e\n    \u003cdiv class=\"hidden\" data-table-filters-target=\"button\"\u003e\n        \u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit\" data-controller=\"lui--button\" data-action=\"click-\u0026gt;table-filters#clearAllFilters\"\u003e\n  \n    \u003ci class=\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n  \u003cspan class=\"lui-button__text\" data-lui--button-target=\"text\"\u003e\n    Clear all filters\n\u003c/span\u003e  \n    \n\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n","footerHtml":null,"filterCounterTemplateHtml":"\n  \u003cspan class=\"lui-counter lui-counter--tinny\" style=\"color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);\"\u003e\n    \u003cspan class=\"lui-counter__text\"\u003e:count:\u003c/span\u003e\n\u003c/span\u003e\n","sortingEnabled":false,"view_more":10,"viewMoreHtml":"\u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-default w-fit w-fit\" data-controller=\"lui--button\"\u003e\n  \n    \n  \u003cspan class=\"lui-button__text\" data-lui--button-target=\"text\"\u003e\n    View more\n\u003c/span\u003e  \n    \n\u003c/button\u003e","fetchUrl":null,"selectable":null,"selectableType":null,"showPagination":true,"showPaginationSizeChanger":true,"showResultCount":false,"searchable":false,"theme":{"token":{"fontFamily":"Satoshi","borderRadius":4,"colorLink":"#212529","colorActive":"#212529","colorHover":"#212529","colorText":"#212529"},"components":{"Table":{"footerBg":"#ffffff","headerBg":"#F8F9FA","headerColor":"#495057","headerSortActiveBg":"#F8F9FA","headerSortHoverBg":"#F8F9FA","headerSortSortBg":"#F8F9FA","bodySortBg":"#ffffff","rowHoverBg":"#F8F9FA","borderColor":"#ECEFF2","headerBorderRadius":4,"rowSelectedBg":"#F8F9FA","rowSelectedHoverBg":"#F8F9FA","selectionColumnWidth":32,"headerSplitColor":"#ECEFF2","cellPaddingInlineSM":16},"Pagination":{"itemActiveBg":"transparent"}}},"treeIndentSize":15,"expandableConfig":{"defaultExpandAllRows":false}}" data-react-cache-id="Table-0"></div>
          </div>
        </div>
        <div id="_data_source" class="hidden">
          [{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9912568611\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          1\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_2322156580\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          John Doe is a software engineer at Google.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_6597424226\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          John Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_8670528836\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          30\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":1,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9451751915\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          2\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_5215854990\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jane Doe is a software engineer at Facebook.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1569762617\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jane Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_5005363814\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          25\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":2,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9404554452\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          3\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_5703447052\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jim Doe is a software engineer at Amazon.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_3999329769\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jim Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_3139447488\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          25\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":3,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_7821441232\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          4\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","life_story":"\u003cspan class=\"lui-table__cell-content\" style=\"width: 30px;\" id=\"table_5793709857_cell_2902670536\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jill Doe is a software engineer at Apple.\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1475808767\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          Jill Doe\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","age":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1514812509\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \n          25\n\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":4,"_lui_data":{"delete_action":null}}]
        </div>
        <div id="_pagination" class="hidden">
          {"current":1,"pageSize":15,"total":0}
        </div>
      </div>
      <div class="lui-modal__footer">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-action="click->modal#close">
          <span class="lui-button__text" data-lui--button-target="text">
            Cancel
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>

Modal

Modals are used in LoopOS Apps — they interrupt the main flow to communicate important information or request user input. To ensure clarity and usability, the copy within a modal must be consistent by following a defined structure, precise, user-focused, and action-oriented.

Types of Modals

  • Confirmation Modals – Ask the user to confirm or cancel an action (e.g., deleting, submitting, or exiting without saving).
  • Generic Modals – Present information, guide a user through a process, or collect input (e.g., feature announcements, forms, or other important information).

Guidelines for All Modals

  • Clear Button Labels

    • Avoid generic buttons like "Yes" / "No".
    • Use specific action verbs that match the user's intent.
    • The primary button (usually the confirming action) should be most visually prominent and have a clear, specific label (e.g., "Delete", "Save changes", "Continue").
    • The secondary button (usually the cancel action) should clearly cancel or close the modal (e.g., "Cancel", "Go back").

  • Limit Buttons to 1–2

    • Most modals only need one main action.
    • Only add a second button when a clear alternative exists.

  • Visual Hierarchy

    • The confirm button should stand out (primary/secondary button).
    • The cancel button should be more subtle (neutral secondary/tertiary button).

  • Consistent Tone of Voice

    • Adjust tone based on the context and risk level.
    • Follow brandbook tone of voice guidelines.

Confirmation Modals

  1. Title

    • Clear, action-oriented.
    • Use a short, direct phrase describing the action to be confirmed.
    • Avoid vague questions like "Are you sure?" or generic titles like "Confirmation."
    • Prefer action verbs such as:
      • "Delete this file?"
      • "Cancel subscription?"
      • "Leave without saving?"
    • ✅ Yes: "Delete project?" ❌ No: "Confirmation"

  2. Support text (optional)

    • Briefly explain the consequence of the action.
    • Be objective and transparent about what will happen.
    • Use plain, non-technical language.
    • If the action is irreversible, clearly state that.
    • ✅ Example: "This action is permanent and cannot be undone."
    • ✅ Example: "If you cancel, all unsaved changes will be lost."

  3. Tone of Voice

    • Adjust tone based on risk level:
      • Neutral tone for trivial actions.
      • More careful or serious tone for irreversible or destructive actions.

Full Example

  • Title: "Delete file?"
  • Supporting Text: "This file will be permanently removed. This action cannot be undone."
  • Buttons: Cancel | Delete

Generic Modals

  1. Title

    • Straightforward, informative.
    • Clearly state the purpose of the modal in a short sentence.
    • Use active verbs when possible.
    • Avoid vague or overly technical titles.
    • ✅ Yes: "Update your password"; "New feature available"; "Enter billing information" ❌ No: "Info"; "Important notice"; "Form"

  2. Support text

    • Provide context and answer "why" or "what happens next".
    • Use human, simple, empathetic language.
    • Break content into short paragraphs or bullet points if needed.
    • Avoid repetition or technical jargon.
    • ✅ Example: "We've updated our security policy. To keep your account safe, you'll need to choose a new password with at least 12 characters."

  3. Tone of Voice

    • Informational modal? Be clear and neutral.
    • Onboarding modal? Be upbeat and motivational.
    • Minor alert? Be calm and explanatory.

Full Example

  • Title: "New Feature: Dark Mode"
  • Supporting Text: "You can now switch between light and dark mode in your settings. A more comfortable experience for night-time browsing!"
  • Buttons: Explore later | Enable dark mode

Usage rules

  • ✅ Do

    • Use clear, concise, and action-oriented language in modal copy.
    • Use confirmation modals for actions that are destructive or require explicit user consent.
    • Use generic modals to present important information or collect user input without navigating away from the current context.
    • Ensure modals are easy to dismiss or complete, providing clear actions (e.g., Cancel, Confirm).
    • Keep modal content focused and avoid overloading with unnecessary information.

  • ❌ Don't

    • Don't use modals for non-essential information or minor notifications (use toasts or banners instead).
    • Don't stack multiple modals on top of each other.
    • Don't use vague or confusing language in modal actions.
    • Don't block the user from dismissing a modal unless absolutely necessary.
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
<%= render LooposUi::Modal.for_detach(model_name: "User") do |modal| %>
  <% modal.with_trigger do %>
    <%= render LooposUi::Button.new(
        text: "Modal template",
        tooltip_text: "Modal test",
        ) %>
  <% end %>
  <% modal.with_primary_action(text: "Primary", tag_options: { "data-action": "click->form-submit#submitForm", "data-form-id": "test1" }) %>
<% end %>
<%= render LooposUi::Modal.new(title: "hello", form_id: "test1") do |modal| %>
  <% modal.with_trigger do %>
    <%= render LooposUi::Button.new(
            text: "Modal custom",
            tooltip_text: "Modal test",
            ) %>
  <% end %>
  <% modal.with_custom_content do %>
    <%= form_with url: "/", method: :post, id: "test1", data: { form_submit_target: "form" } do |form| %>
      <%= form.text_field :name, label: "Name", value: "form 1" %>
    <% end %>
  <% end %>
  <% modal.with_primary_action(text: "Primary", tag_options: { "data-action": "click->form-submit#submitForm", "data-form-id": "test1" }) %>
<% end %>
<%= render LooposUi::Modal.new do |modal| %>
  <% modal.with_header(title: "Custom header", tooltip: "Yep it's a tooltip") %>
  <% modal.with_trigger do %>
    <%= render LooposUi::Button.new(
        text: "Modal template",
        tooltip_text: "Modal test",
        ) %>
  <% end %>
  <% modal.with_primary_action(text: "Primary", tag_options: { "data-action": "click->form-submit#submitForm", "data-form-id": "test1" }) %>
  <div>
    <%= render LooposUi::Tooltip.new(
        title: "Tooltips work here too",
        interactive: true
        ) do |tt|%>
      <% tt.with_button(icon: :turtle, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :horse, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :dog, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :cat, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :bird, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :fish, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :rabbit, size: :small, kind: :neutral) %>
      <% tt.with_button(icon: :snake, size: :small, kind: :neutral) %>
      <div>
        Choose your animal
      </div>
    <% end %>
    Hover me
  </div>
<% end %>
<%= render LooposUi::Modal.new do |modal| %>
  <% modal.with_header(title: "Super long modal content") %>
  <% modal.with_trigger_button(text: "Super long modal content") %>
  <%= "Super long modal content" * 100 %>
<% end %>
<%= render LooposUi::Modal.new do |modal| %>
  <% modal.with_header(title: "Super long modal content") %>
  <% modal.with_trigger_button(text: "Super long modal content") %>
  <%= render LooposUi::Accordion.new(title: "Super long modal content") do |accordion| %>
    <%= "Super long modal content" * 1_000 %>
  <% end %>
<% end %>
<%
  columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      { 
        title: 'Name', 
        dataIndex: 'name', key: 'name',
        filters: 5.times.each_with_index.map do |i|
          {
            type: :tag,
            text: "Tag #{i}",
            value: i,
          }
        end
      },
      {
        title: "Life story",
        dataIndex: 'life_story',
        key: 'life_story',
        width: "30px",
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      },
    ]
    data = [
      { id: 1, name: "John Doe", age: 30, 
        life_story: "John Doe is a software engineer at Google." }, 
      { id: 2, name: "Jane Doe", age: 25, 
        life_story: "Jane Doe is a software engineer at Facebook." },
      { id: 3, name: "Jim Doe", age: 25, 
        life_story: "Jim Doe is a software engineer at Amazon." },
      { id: 4, name: "Jill Doe", age: 25, 
        life_story: "Jill Doe is a software engineer at Apple." }
    ]
    table_config = {
      columns: columns,
      show_header: true,
      searchable: false,
      show_result_count: false,
    }
    
  %>
<% dummy_table = capture do %>
  <%= render LooposUi::V2::Table.new(**table_config) do |table|%>
    <% data.each do |person| %>
      <%= table.with_row(key: person[:id]) do |row| %>
        <%= row.with_cell(property: :id) do %>
          <%= person[:id] %>
        <% end %>
        <%= row.with_cell(property: :life_story) do %>
          <%= person[:life_story] %>
        <% end %>
        <%= row.with_cell(property: :name) do %>
          <%= person[:name] %>
        <% end %>
        <%= row.with_cell(property: :age) do %>
          <%= person[:age] %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
<%# dummy_table %>
<%= render LooposUi::Modal.new do |modal| %>
  <% modal.with_header(title: "With a table inside") %>
  <% modal.with_trigger_button(text: "With a table inside") %>
  <%= dummy_table %>
<% end %>

No notes provided.

No params configured.

Description

The LooposUi::Modal component is used to render a modal. This modal is divided into three parts; a header that contains the title/description, as well as an X icon to turn off the modal; a custom content area that will include hte content of the Modal; and the footer, that includes a cancel button and up to two actions. Only one cancel mechanic will be up at the same time.

Arguments

Property Default Description
title The title of the modal.
description nil The description of the modal that'll appear below title.
model_name nil Model that will be used for the Modal presets.
template_name nil Symbol of template that was used in the preset, to generate the correct custom content.
show_footer true Property to show the buttons on the footer
modal_width 480 Width of the modal. It is defined as an integer
form_id Optional. Id of a form. It's used for automatic insertion of the form id into the primary action.

Slots

Property Arguments Description
header - TitleDescription. Will be used instead of title and description properties if provided
primary_action Attributes of LooposUi Button, except size and type Primary button that will appear in the bottom right corner of the modal.
secondary_action Attributes of LooposUi Button, except size and type Secondary button that will appear next to the primary button.
custom_content nil Content that will appear inside the modal.
trigger nil Button that will trigger the opening of the Modal.
trigger_button Attributes of LooposUi Button Button that will trigger the opening of the Modal.

Note: You can use with_trigger or with_trigger_button to add a trigger to the modal. Not both.

Examples

<%= render LooposUi::Modal.new(title: "Modal Title") do |modal| %>
  <% modal.with_trigger_button(text: "Manual Button", icon: :smile) %>
<% end %>
<%= render LooposUi::Modal.new(title: "Modal Title") do |modal| %>
  <% modal.with_trigger do %>
    <%= render LooposUi::Button.new(text: "Manual Button", icon: :smile) %>
  <% end %>
<% end %>

If you want a button to trigger the modal, prefer the shorter with_trigger_button method.

You can also use the helper methods Duplicate, Delete, Export, Detach and Unassign, using the method for_{insert helper name here} to create a generic modal related to what you want.