x
1
2
3
4
5
6
7
8
9
10
<div class="flex flex-wrap items-center gap-3"> <form class="button_to" method="post" action="#"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" type="submit">Default</button><input type="hidden" name="authenticity_token" value="l5pyznd14WM1InW6b1hi56YAh1j5gsz1M2jM_sjxyb9_1OqXTbnxy9X9W3VfCt6os8vfuj6pSGIFkJe9Ai8brQ" /></form> <form class="button_to" method="post" action="#"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" disabled="disabled" aria-busy="true" type="submit"><span class="sr-only">Loading, please wait</span><span role="status" aria-live="polite" class="inline-flex items-center"><span class="sr-only">Loading</span><i data-lucide="loader" class="inline-block shrink-0 w-4 h-4 animate-spin" aria-hidden="true"></i> </span> Loading</button><input type="hidden" name="authenticity_token" value="ukBebD99sAsvIej9VbghSCSqLrWEkqaAH37Kvta_7-xSDsY1BbGgo8_-xjJl6p0HMWF2V0O5IhcphpH9HGE9_g" /></form> <form class="button_to" method="post" action="#"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" disabled="disabled" type="submit">Disabled</button><input type="hidden" name="authenticity_token" value="UlsAOexicrDzKW2EFDpMTroJWUZy2lL7hVw_5vEL9yC6FZhg1q5iGBP2Q0skaPABr8IBpLXx1myzpGSlO9UlMg" /></form></div><div class="mt-6 max-w-xs"> <form class="w-full" method="post" action="#"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed w-full" type="submit">Full width</button><input type="hidden" name="authenticity_token" value="42nhbQmQrLWqf0stv_ljvGahcxpAGlIWGkZla0L2K3wLJ3k0M1y8HUqgZeKPq9_zc2or-Icx1oEsvj4oiCj5bg" /></form></div>1
2
3
4
5
6
7
8
<div class="flex flex-wrap items-center gap-3"> <%= render(UI::ButtonTo.new("#")) { "Default" } %> <%= render(UI::ButtonTo.new("#", loading: true)) { "Loading" } %> <%= render(UI::ButtonTo.new("#", disabled: true)) { "Disabled" } %></div><div class="mt-6 max-w-xs"> <%= render(UI::ButtonTo.new("#", variant: :outline, full_width: true, form_class: "w-full")) { "Full width" } %></div>No notes provided.
No params configured.