Button - Midone - Tailwind HTML Admin Template

Basic Buttons

Show example code

  HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Button Sizes

Show example code

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="button button--sm w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button button--lg w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="button button--sm w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button button--lg w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Working with Links

Show example code

Link Button Input Submit Reset Metal

  HTMLOpenTaga href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagLinkHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagButtonHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagInputHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagSubmitHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagResetHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagMetalHTMLOpenTag/aHTMLCloseTag

Elevated Buttons

Show example code

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Social Media Buttons

Show example code

  HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-32 text-white"HTMLCloseTag HTMLOpenTagi data-feather="facebook" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Facebook HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-33 text-white"HTMLCloseTag HTMLOpenTagi data-feather="twitter" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Twitter HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-34 text-white"HTMLCloseTag HTMLOpenTagi data-feather="instagram" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Instagram HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-35 text-white"HTMLCloseTag HTMLOpenTagi data-feather="linkedin" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Linkedin HTMLOpenTag/buttonHTMLCloseTag

Outline Buttons

Show example code

  HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10"HTMLCloseTagLinkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"HTMLCloseTagButtonHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9"HTMLCloseTagInputHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12"HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6"HTMLCloseTagResetHTMLOpenTag/buttonHTMLCloseTag

Loading State Buttons

Show example code

  HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white inline-flex items-center"HTMLCloseTag Saving HTMLOpenTagi data-loading-icon="oval" data-color="white" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white inline-flex items-center"HTMLCloseTag Adding HTMLOpenTagi data-loading-icon="spinning-circles" data-color="white" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white inline-flex items-center"HTMLCloseTag Loading HTMLOpenTagi data-loading-icon="three-dots" data-color="white" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white inline-flex items-center"HTMLCloseTag Deleting HTMLOpenTagi data-loading-icon="puff" data-color="white" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag

Rounded Buttons

Show example code

  HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Soft Color Buttons

Show example code

  HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-14 text-theme-10"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-18 text-theme-9"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-17 text-theme-11"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-31 text-theme-6"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Icon Buttons

Show example code

  HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagi data-feather="activity" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Activity HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700 dark:border-dark-5 dark:text-gray-300"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Hard Drive HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagi data-feather="calendar" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Calendar HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagi data-feather="share-2" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Share HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagi data-feather="trash" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Trash HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagi data-feather="image" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Image HTMLOpenTag/buttonHTMLCloseTag

Icon Only Buttons

Show example code

  HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="activity" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="calendar" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="share-2" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="trash" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="image" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag