x
1
2
3
4
5
6
7
8
9
<button class="text-slate-500 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Transparent</button><button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Default</button><button class="text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Success</button><button class="text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Failure</button><button class="text-white bg-cyan-700 border border-transparent enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Info</button><button class="text-white bg-yellow-400 border border-transparent enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Warning</button><button class="text-white bg-gray-800 border border-transparent enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Dark</button><button class="text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Light</button><button class="text-white bg-purple-700 border border-transparent enabled:hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:enabled:hover:bg-purple-700 dark:focus:ring-purple-900 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-full text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Purple</button>1
2
3
4
5
6
7
8
<% %i{transparent default success failure info warning dark light purple}.each do |color| %> <%= fx_button( color: color, pill: true, class: 'relative inline-flex mr-2 mb-5 w-36', with_content: color.to_s.titlecase ) %><% end %>No notes provided.
No params configured.