# 📒 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> or an <input> tag.
    ![image](https://user-images.githubusercontent.com/98400348/216774468-e52b5157-7d3c-4a04-9962-6bf8fe127293.png)

<!-- <img width="605" alt="Screenshot 2022-10-25 at 8 32 40 PM" src="https://user-images.githubusercontent.com/91758830/197834178-e1f3b49b-5f5e-40e3-99cb-630ef6d4517d.png"> -->

## 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 🎨

| Color | Blue | Black | White | Alert | Error | Disabled |
| --- | --- | --- | --- | --- | --- | --- |
| Code in Tailwind | bg-blue-600 | bg-slate-900 | bg-white | bg-yellow-500 | bg-red-500 | bg-gray-400 |
| Hover State | bg-blue-700 | bg-black | bg-white/90 |
| Text Size | text-sm | text-lg | text-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
|  | Blue | Black | White |
| --- | --- | --- | --- |
| Text Color | text-white | text-white | text-black |
| Hover State | text-white | text-white | text-black |

### Normal button guidelines :

|  | Padding | Border Radius | Text Size |
| --- | --- | --- | --- |
| Small | px-4 & py-2 | rounded-md | text-sm |
| Medium | px-8 & py-2.5 | rounded-md | text-lg |
| Large | px-10 & py-3 | rounded-md | text-2xl |

### Rounded button guidelines :

|  | Padding | Border Radius | Text Size |
| --- | --- | --- | --- |
| Small | px-4 & py-2 | rounded-full | text-sm |
| Medium | px-8 & py-2.5 | rounded-full | text-lg |
| Large | px-10 & py-3 | rounded-full | text-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
|  | Blue | Black | White |
| --- | --- | --- | --- |
| Text Color | text-blue-600 | text-slate-900 | text-white |
| Hover State | text-white | text-white | text-black |
    
### Background
|  | Blue | Black | White |
| --- | --- | --- | --- |
| Background | bg-transparent | bg-transparent | bg-transparent |
| Hover State | bg-blue-600 | bg-black | bg-white |
      

### Secondary Normal button guidelines :

|  | Padding | Border Radius | Text Size |
| --- | --- | --- | --- |
| Small | px-4 & py-2 | rounded-md | text-sm |
| Medium | px-8 & py-2.5 | rounded-md | text-md |
| Large | px-10 & py-3 | rounded-md | text-lg |

### Secondary Rounded button guidelines :

|  | Padding | Border Radius | Text Size |
| --- | --- | --- | --- |
| Small | px-4 & py-2 | rounded-full | text-sm |
| Medium | px-8 & py-2.5 | rounded-full | text-md |
| Large | px-10 & py-3 | rounded-full | text-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](https://play.tailwindcss.com/). 💥

```html
<!-- 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](https://heroicons.com/)

`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.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

### Example :

This is the `Secondary/text_icon_front_button.html` . <br />
Want to see this buttons in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html
<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](https://discord.gg/zrVMjGW8sB) to get help.
