Lookbook
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
<div class='button-container'>
  <button name="button" type="button" class="primary-button regular-button     " onclick="displayAnimation(this, 'regular-button-loading-animation')" id="regular-button"><span class="primary-button-icon left-button-icon  "><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
        <path d="M9.76764 0.232287C9.45824 -0.0775267 8.95582 -0.0773313 8.646 0.232287L3.59787 5.28062L1.35419 3.03696C1.04438 2.72714 0.542174 2.72714 0.23236 3.03696C-0.0774534 3.34677 -0.0774534 3.84897 0.23236 4.15879L3.03684 6.96326C3.19165 7.11807 3.39464 7.19567 3.59765 7.19567C3.80067 7.19567 4.00386 7.11827 4.15867 6.96326L9.76764 1.3541C10.0775 1.0445 10.0775 0.542081 9.76764 0.232287Z" fill="var(--primary-color)"></path>
      </svg></span>
    <div>Login</div>
    <span class="primary-button-icon right-button-icon hide"></span></button>
</div>
<div class="animation-container   " id="regular-button-loading-animation">
  <div class="lds-ellipsis">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<script type='text/javascript'>
  //<![CDATA[
    function displayAnimation(element, loadingId){
        const loading = document.getElementById(loadingId)
        element.style.display = 'none';
        loading.style.display = 'flex';
    }
    document.addEventListener('turbo:submit-end', function(event) {
         const loading = document.getElementById('regular-button-loading-animation')
         const button = document.getElementById('regular-button')
         button.style.display = 'flex';
         loading.style.display = 'none';
    });
  //]]>
</script>
1
2
3
4
5
render Buttons::RegularButtonComponent.new(id:'regular-button', value: "Login", variant: "primary") do |btn|
  btn.icon_left do
    inline_svg_tag "check.svg"
  end
end

No notes provided.

No params configured.