Previews

No matching results.

x
1
2
3
4
5
6
7
8
<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="1Eh16h-ja3-zZhstmyN3Pca71QOD0ZTcprAbYtwUw3oEwhZMylRwS5Zn5m0Scy7Eo_1NX59yODModi-s68MI4A" /></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-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-destructive text-white hover:bg-destructive/90 focus:ring-destructive h-9 px-4 py-2 disabled:cursor-not-allowed" type="submit">Destructive</button><input type="hidden" name="authenticity_token" value="-ynCZ3VGqJDfr_N2hikNmu65v3tL9xR0sb4D8vtBsAIro6HBoLGzpPquDjYPeVRji_8nJ1dUuJs_eDc8zJZ7mA" /></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! 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" type="submit">Outline</button><input type="hidden" name="authenticity_token" value="CHCJ18k_HfDIM84UHLthevPlTwZnQRZB-6rzJexueeHY-upxHMgGxO0yM1SV6ziDlqPXWnviuq51bMfr27myew" /></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-secondary text-secondary-foreground hover:bg-secondary/80 h-9 px-4 py-2 disabled:cursor-not-allowed" type="submit">Secondary</button><input type="hidden" name="authenticity_token" value="YOtublQIHRy1r42UcigYQLn-KwX0cMflaUQMmFBigG6wYQ3Igf8GKJCucNT7eEG53LizWejTawrngjhWZ7VL9A" /></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:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-9 px-4 py-2 disabled:cursor-not-allowed" type="submit">Ghost</button><input type="hidden" name="authenticity_token" value="raEEFCZV5b1JP1Xqwlpp0yAGEekheCkzhnAAxe41XIp9K2ey86L-iWw-qKpLCjAqRUCJtT3bhdwItjQL2eKXEA" /></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:text-muted-foreground! text-primary underline-offset-4 hover:underline disabled:bg-transparent! disabled:no-underline! h-9 px-4 py-2 disabled:cursor-not-allowed" type="submit">Link</button><input type="hidden" name="authenticity_token" value="LoMK1WCsZHmN37cOlf4WXqOj10vLlWkhIrFsopbOpQ7-CWlztVt_TajeSk4crk-nxuVPF9c2xc6sd1hsoRlulA" /></form>
</div>
1
2
3
4
5
<div class="flex flex-wrap items-center gap-3">
<% %i[default destructive outline secondary ghost link].each do |v| %>
<%= render(UI::ButtonTo.new("#", variant: v)) { v.to_s.capitalize } %>
<% end %>
</div>