> For the complete documentation index, see [llms.txt](https://bootstrapbay.gitbook.io/grace-ui-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bootstrapbay.gitbook.io/grace-ui-kit/components/buttons.md).

# Buttons

### Overview

The basic buttons used throughout the kit are white, black, pink and navy.

![](https://1052164137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0REpuu2Ew27TzR1Mm%2F-LG5NxIZjq7ETdb7lXGP%2F-LG5PHFmW87RG4CHeAxA%2FScreen%20Shot%202018-06-28%20at%2015.40.33.png?alt=media\&token=505bbbc0-ed1f-430b-8cdb-3ac981286f1e)

```markup
<button type="#button" class="btn btn-white">White</button>
<button type="#button" class="btn">Black</button>
<button type="#button" class="btn btn-pink">Pink</button>
<button type="#button" class="btn btn-navy">Navy</button>
```

### Style

The style for the button can be normal, bordered or with an icon.

![](https://1052164137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0REpuu2Ew27TzR1Mm%2F-LG5SIbLt70NtPwa8piU%2F-LG5SKIQoqLb3Ysztfay%2FScreen%20Shot%202018-06-28%20at%2015.53.45.png?alt=media\&token=6fea6171-5fd0-4873-852c-03a05003449d)

```markup
<button type="#button" class="btn btn-navy">Regular</button>
<button type="#button" class="btn btn-border btn-navy">Bordered</button>
<button type="#button" class="btn btn-navy"><i class="fas fa-heart"></i> With Icon</button>
<button type="#button" class="btn btn-icon btn-navy"><i class="fas fa-heart"></i></button>
```

### Sizes

The sizes for the button are: large, regular, small and extra small.

![](https://1052164137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0REpuu2Ew27TzR1Mm%2F-LG5SIbLt70NtPwa8piU%2F-LG5SQbig5-UiUCoIevG%2FScreen%20Shot%202018-06-28%20at%2015.53.53.png?alt=media\&token=d58a48a3-154b-4c66-ae85-fb8f9d53f229)

```markup
<button type="#button" class="btn btn-navy btn-lg">Large</button>
<button type="#button" class="btn btn-navy">Regular</button>
<button type="#button" class="btn btn-navy btn-sm">Small</button>
<button type="#button" class="btn btn-navy btn-xs">Very Small</button>
```

### Social Buttons

In order to be easier for you to add social share buttons, we have created special classes for them.

![](https://1052164137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0REpuu2Ew27TzR1Mm%2F-LG5SIbLt70NtPwa8piU%2F-LG5SjwqCkb6DkgOOYcr%2FScreen%20Shot%202018-06-28%20at%2015.55.48.png?alt=media\&token=593496b1-9dcb-4f59-93ac-3665dd35473c)

```markup
<div class="row social">
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-facebook"><i class="fab fa-facebook-f"></i> Facebook</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-twitter"><i class="fab fa-twitter"></i> Twitter</a> 
    </div>
    <div class="col-md-3">   
    	<a href="#a" class="btn btn-block btn-google"><i class="fab fa-google"></i> Google</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-pinterest"><i class="fab fa-pinterest-p"></i> Pinterest</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-linkedin"><i class="fab fa-linkedin-in"></i> Linkedin</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-dribbble"><i class="fab fa-dribbble"></i> Dribbble</a>   
    </div>
    <div class="col-md-3"> 
    	<a href="#a" class="btn btn-block btn-github"><i class="fab fa-github"></i> Github</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-youtube"><i class="fab fa-youtube"></i> Youtube</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-instagram"><i class="fab fa-instagram"></i> Instagram</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-reddit"><i class="fab fa-reddit"></i> Reddit</a>  
    </div>
    <div class="col-md-3">  
    	<a href="#a" class="btn btn-block btn-tumblr"><i class="fab fa-tumblr"></i> Tumblr</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-behance"><i class="fab fa-behance"></i> Behance</a>
    </div>	            
</div>

```

### Disabled State

You can make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

![](https://1052164137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0REpuu2Ew27TzR1Mm%2F-LG5T7FK-iPAuXLcBxjn%2F-LG5Tc7WSc_16l54tq8i%2FScreen%20Shot%202018-06-28%20at%2015.59.39.png?alt=media\&token=d0c923c6-11f0-4906-acaa-6afa30f74eaa)

```markup
<button type="#button" class="btn btn-white disabled">White</button>
<button type="#button" class="btn disabled">Black</button>
<button type="#button" class="btn btn-pink disabled">Pink</button>
<button type="#button" class="btn btn-navy disabled">Navy</button>	
```

If you want to see more examples and properties please check the official [Bootstrap Documentation](http://getbootstrap.com/docs/4.0/components/buttons/).