package.docs.components.buttons.mdx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
title: Buttons
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
bootstrapLink: components/buttons/
---

## Button tag

As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `



```

## Default button

The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.

```html example code centered separated height="7rem"
Link
```

## Button variations

Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.

```html code example vertical centered separated scrollable height="15rem"
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
```

## Disabled buttons

Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.

```html code example vertical centered separated scrollable height="15rem"
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
```

## Color variations

Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.

```html code example vertical centered separated scrollable height="15rem"
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
```

## Ghost buttons

Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action.

```html example vertical centered separated scrollable height="15rem"
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
```

```html
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
```

## Square buttons

Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.

```html example centered separated height="7rem"
Square button
```

```html

  Square button

```

## Pill buttons

Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.

```html example centered separated height="7rem"
Pill button
```

```html

  Pill button

```

## Outline buttons

Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.

```html example vertical centered separated scrollable height="15rem"
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
```

```html

  Primary


  Secondary


  Success


  Warning


  Danger


  Info


  Dark


  Light

```

## Button size

Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.

```html code example centered separated height="8rem"


```

```html code example centered separated height="7rem"


```

## Buttons with icons

Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.

Icons can be found [**here**](/docs/components/icons)

```html example centered separated height="7rem"






```

```html






```

## Social buttons

You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.

```html example vertical centered separated scrollable height="15rem"
 Facebook
 Twitter
 Google
 Youtube
 Vimeo
 Dribbble
 Github
 Instagram
 Pinterest
 VK
 RSS
 Flickr
 Bitbucket
 Tabler
```

```html

  
  
  Facebook


  
  
  Twitter


  
  
  Google


  
  
  Youtube


  
  
  Vimeo


  
  
  Dribbble


  
  
  Github


  
  
  Instagram


  
  
  Pinterest


  
  
  VK


  
  
  RSS


  
  
  Flickr


  
  
  Bitbucket


  
  
  Tabler

```

You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.

```html example separated scrollable height="7rem"

  


  


  


  


  


  


  


  


  


  


  


  


  


  

```

```html

  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  


  
  

```

## Icon buttons

Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.

```html example centered separated height="7rem"

  


  


  


  


  


  


  

```

```html

  
  


  
  


  
  


  
  


  
  


  
  


  
  

```

## Dropdown buttons

Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.

```html example centered separated height="7rem"

  
  
    Action
    Another action
  


  
  
    Action
    Another action
  


  
  
    Action
    Another action
  

```

```html

  
  
    
      Action
    
    
      Another action
    
  


  
  
    
      Action
    
    
      Another action
    
  


  
  
    
      Action
    
    
      Another action
    
  

```

## Loading buttons

Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.

```html example centered separated height="7rem"
Button
Loading button with loooong content
```

```html

  Button


  Loading button with loooong content

```

```html example centered height="7rem"
 Button
```

```html

  
  Button

```

## List of buttons

Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users' attention on a particular action or suggest the result.

```html code example vertical centered columns={3} height="7rem"

  Save changes
  Save and continue
  Cancel

```

If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.

```html code example centered

  One
  Two
  Three
  Four
  Five
  Six
  Seven
  Eight
  Nine
  Ten
  Eleven
  Twelve
  Thirteen
  Fourteen
  Fifteen
  Sixteen
  Seventeen
  Eighteen
  Nineteen

```

Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.

```html code example vertical centered columns={3} height="7rem"

  Save and continue
  Save changes

```

```html code example vertical centered columns={3} height="7rem"

  Save and continue
  Save changes

```

```html code example vertical centered columns={3} height="7rem"

  Delete
  Save and continue
  Save changes

```

## Buttons with avatars

Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.

```html example centered separated height="7rem"
 Avatar
 Avatar
 Avatar
```

```html

   Avatar


   Avatar


   Avatar

```