Skip to content
Docs
🎨 | Design Systems
Button

📒 Developer style guide for Buttons

Buttons are clickable elements that take actions. They can submit a form, reset a form, or perform a JavaScript function. Buttons are defined with a <button> tag.


image

Types of button 🔽

  1. Primary
    • Blue
    • Black
    • White
  2. Secondary
    • Blue
    • Black
    • White
  3. Success
  4. Error / Red
  5. Warning / Yellow
  6. Animated ( Coming Soon)

General must known design system guideline :

Color 🎨

ColorBlueBlackWhiteAlertErrorDisabled
Code in Tailwindbg-blue-600bg-slate-900bg-whitebg-yellow-500bg-red-500bg-gray-400
Hover Statebg-blue-700bg-blackbg-white/90
Text Sizetext-smtext-lgtext-2xl

Font

For all buttons font is : font-normal

Transition ( transition-all )

whenever there is a hover effect, one must use transition-all class with it.

Border Radius 🔲

For Rectangular Button : rounded-md For Rounded button : rounded-full

The normal border-radius for the components are rounded-2xl. However this does not apply in many cases like buttons, input boxes and all.

Primary Button ✅

Every type of button has two variants Normal and Rounded.

Text color

BlueBlackWhite
Text Colortext-whitetext-whitetext-black
Hover Statetext-whitetext-whitetext-black

Normal button guidelines :

PaddingBorder RadiusText Size
Smallpx-4 & py-2rounded-mdtext-sm
Mediumpx-8 & py-2.5rounded-mdtext-lg
Largepx-10 & py-3rounded-mdtext-2xl

Rounded button guidelines :

PaddingBorder RadiusText Size
Smallpx-4 & py-2rounded-fulltext-sm
Mediumpx-8 & py-2.5rounded-fulltext-lg
Largepx-10 & py-3rounded-fulltext-2xl

Exceptions : The square button and only icon/ SVG button has a padding x and y same and, it equals the padding Y ( py ) of the normal buttons of the same size.

Secondary Button ✅

Every type of button has two variants Normal and Rounded.

Border : The border for all secondary button is border-2

Text color

BlueBlackWhite
Text Colortext-blue-600text-slate-900text-white
Hover Statetext-whitetext-whitetext-black

Background

BlueBlackWhite
Backgroundbg-transparentbg-transparentbg-transparent
Hover Statebg-blue-600bg-blackbg-white

Secondary Normal button guidelines :

PaddingBorder RadiusText Size
Smallpx-4 & py-2rounded-mdtext-sm
Mediumpx-8 & py-2.5rounded-mdtext-md
Largepx-10 & py-3rounded-mdtext-lg

Secondary Rounded button guidelines :

PaddingBorder RadiusText Size
Smallpx-4 & py-2rounded-fulltext-sm
Mediumpx-8 & py-2.5rounded-fulltext-md
Largepx-10 & py-3rounded-fulltext-lg

Exceptions : The square button and only icon/ SVG button has a padding x and y same and, it equals the padding Y ( py ) of the normal buttons of the same size.

Success, Error and Warning âž•

This buttons has all the versions of previous . This just follows the general color scheme.

Hover Effect :

For the hover effect on the button it is just one shade darker than the original button.

Example : For success the normal background color is bg-green-600 so the hover effect of this will be bg-green-700

Example of Primary Button file 👇

This is the way we have all the buttons.

Like in the Primary/button.html file you can find all the buttons of different size like this which maintains the design system above and also have a disabled state.

Want to see this buttons in action? Try copy pasting this code in Tailwind Playground (opens in a new tab). 💥

<!-- Small -->
 
<button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-normal text-white transition-all hover:bg-black disabled:bg-gray-400">Button</button>
 
<!-- Medium -->
 
<button class="rounded-full bg-slate-900 px-8 py-2.5 text-lg font-normal text-white transition-all hover:bg-black disabled:bg-gray-400">Button</button>
 
<!-- Large -->
 
<button class="rounded-full bg-slate-900 px-10 py-3 text-2xl font-normal text-white transition-all hover:bg-black disabled:bg-gray-400">Button</button>

Icon guidelines:

Mostly all the icons are taken from → Hero Icons (opens in a new tab)

Icon-text-gap : We follow a convention of equal margin between the text and the icon as padding in y axis py. and always the margin is given from the side of icon.

WidthType
Smallw-4 & h-4Hero Icons mini
Mediumw-5 & h-5Hero Icons mini
Largew-6 & h-6Hero Icons filled

Example :

This is the Secondary/text_icon_front_button.html .
Want to see this buttons in action? Try copy pasting this code in Tailwind Playground (opens in a new tab). 💥

<button class="flex text-sm items-center rounded-md border-2 border-blue-600 px-4 py-2 font-medium text-blue-600 transition-all hover:bg-blue-600 hover:text-white">
    <svg 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 20 20" 
    fill="currentColor" 
    class="h-4 w-4 mr-2"
    >
      <path d="M10 3.75a2 2 0 10-4 0 2 2 0 004 0zM17.25 4.5a.75.75 0 000-1.5h-5.5a.75.75 0 000 1.5h5.5zM5 3.75a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75zM4.25 17a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM17.25 17a.75.75 0 000-1.5h-5.5a.75.75 0 000 1.5h5.5zM9 10a.75.75 0 01-.75.75h-5.5a.75.75 0 010-1.5h5.5A.75.75 0 019 10zM17.25 10.75a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM14 10a2 2 0 10-4 0 2 2 0 004 0zM10 16.25a2 2 0 10-4 0 2 2 0 004 0z" />
    </svg>
 
    <span>Settings</span>
</button>
    
    
This is the `primary/icon_button.html` . <br />
 
    
  <!-- small -->
 
  <button class="rounded bg-blue-600 p-2 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
    <svg class="w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="{1.5}" stroke="currentColor" className="w-4 h-4">
      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
    </svg>
  </button>
 
  <!-- medium -->
 
  <button class="rounded bg-blue-600 p-3 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="{1.5}" stroke="currentColor" className="w-5 h-5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
    </svg>
  </button>
 
  <!-- large -->
 
  <button class="rounded bg-blue-600 p-4 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
    <svg class="w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="{1.5}" stroke="currentColor" className="w-6 h-6">
      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
    </svg>
  </button>

Having some problem ? 😕

If you still have a problem understanding this please join our discord server (opens in a new tab) to get help.

BreadrumbFeature Card