300px
x
150px
1
2
3
4
5
6
7
8
<button class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 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 justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Default Outline</button><button class="text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-hidden focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 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 justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Success Outline</button><button class="text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-hidden focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 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 justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Failure Outline</button><button class="text-cyan-400 hover:text-white border border-cyan-400 hover:bg-cyan-500 focus:ring-4 focus:outline-hidden focus:ring-cyan-300 dark:border-cyan-300 dark:text-cyan-300 dark:hover:text-white dark:hover:bg-cyan-400 dark:focus:ring-cyan-900 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Info Outline</button><button class="text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-hidden focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 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 justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Warning Outline</button><button class="text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-hidden focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Dark Outline</button><button class="text-gray-900 hover:text-white border border-gray-300 hover:bg-gray-300 focus:ring-4 focus:outline-hidden focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Light Outline</button><button class="text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-hidden focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 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 justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit rounded-md text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Purple Outline</button>1
2
3
4
5
6
7
<% %i{default_outline success_outline failure_outline info_outline warning_outline dark_outline light_outline purple_outline}.each do |color| %> <%= fx_button( color: color, class: 'relative inline-flex mr-2 mb-5 w-36', with_content: color.to_s.titlecase ) %><% end %>No notes provided.
No params configured.