brandv1.0
Utilities
Data Display
Data Entry
Feedback

Buttons

Use BootstrapVueNext’s custom BButton component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Default buttons

BootstrapVueNext's BButton component generates either a <button> element, <a> element, or RouterLink component with the styling of a button. 

							
                                
<template>
    <BButton variant="primary">Primary</BButton>
    <BButton variant="secondary">Secondary</BButton>
    <BButton variant="info">Info</BButton>
    <BButton variant="success">Success</BButton>
    <BButton variant="danger">Danger</BButton>
    <BButton variant="warning">Warning</BButton>
    <BButton variant="light">Light</BButton>
    <BButton variant="white">white</BButton>
    <BButton variant="dark">Dark</BButton>
</template>
Props Value Default Description
variant primary / success / warning / danger / info / light / dark 'secondary' You can use different visual variants for the button by adding variant=""
Soft buttons

You can create soft buttons using variant="soft-[Value]" prop in BButton. 

							
                                
<template>
    <BButton variant="soft-primary">Primary</BButton>
    <BButton variant="soft-secondary">Secondary</BButton>
    <BButton variant="soft-info">Info</BButton>
    <BButton variant="soft-success">Success</BButton>
    <BButton variant="soft-danger">Danger</BButton>
    <BButton variant="soft-warning">Warning</BButton>
    <BButton variant="soft-light">Light</BButton>
    <BButton variant="soft-dark">Dark</BButton>
</template>
Props Value Default Description
variant soft-primary / soft-success / soft-warning / soft-danger / soft-info / soft-light / soft-dark 'secondary' You can use different soft visual variants for the button by adding variant="soft-*"
Flush buttons

You can create buttons with a flushed style by using the variant="flush-[Value]" prop in the BButton. 

							
                                
<template>
    <BButton variant="flush-primary">Primary</BButton>
    <BButton variant="flush-secondary">Secondary</BButton>
    <BButton variant="flush-info">Info</BButton>
    <BButton variant="flush-success">Success</BButton>
    <BButton variant="flush-danger">Danger</BButton>
    <BButton variant="flush-warning">Warning</BButton>
    <BButton variant="flush-light">Light</BButton>
    <BButton variant="flush-dark">Dark</BButton>
</template>
Props Value Default Description
variant flush-primary / flush-success / flush-warning / flush-danger / flush-info / flush-light / flush-dark 'secondary' You can use different flushed visual variants for the button by adding variant="flush-*"
Flush hover

Quickly create a general button with different hover animations using the .flush-outline-hover/.flush-soft-hover/.btn-animated classes. 

							
                                
<templates>
    <BButton variant="flush-primary">Default hover</BButton>
    <BButton variant="flush-danger" class="flush-outline-hover"> Outline hover </BButton>
    <BButton variant="flush-warning" class="flush-soft-hover"> Soft hover </BButton>
    <BButton variant="flush-success" class="btn-animated"> Raised hover </BButton>
    <BButton variant="flush-light" class="btn-animated"> Raised hover </BButton>
    <BButton variant="flush-dark" class="btn-animated"> Raised hover </BButton>
</templates>
Animated buttons

use .btn-animated

							
                                
<template>
    <BButton variant="primary" class="btn-animated">Button hover</BButton>
    <BButton variant="outline-primary" class="btn-animated"> Button hover </BButton>
    <BButton variant="soft-primary" class="btn-animated"> Button hover </BButton>
    <BButton variant="flush-primary" class="btn-animated"> Button hover </BButton>
    <BButton variant="gradient-primary" class="btn-animated"> Button hover </BButton>
    <BButton variant="link" class="btn-animated">Button hover</BButton>
    <BButton variant="success" class="btn-animated">Button hover</BButton>
</template>
Outline buttons

In need of a button, but not the hefty background colors they bring? Use the outline-* variants to remove all background images and colors on any BButton. 

							
                                
<template>
    <BButton variant="outline-primary">Primary</BButton>
    <BButton variant="outline-secondary">Secondary</BButton>
    <BButton variant="outline-info">Info</BButton>
    <BButton variant="outline-success">Success</BButton>
    <BButton variant="outline-danger">Danger</BButton>
    <BButton variant="outline-warning">Warning</BButton>
    <BButton variant="outline-light">Light</BButton>
    <BButton variant="outline-dark">Dark</BButton>
</template>
Props Value Default Description
variant outline-primary / outline-success / outline-warning / outline-danger / outline-info / outline-light / outline-dark 'secondary' You can use outline buttons by adding variant="outline-*"
Pill button

Prefer buttons with a more rounded-pill style? Just set the prop pill to true. 

							
                                
<template>
    <BButton pill variant="primary">Primary</BButton>
    <BButton pill variant="secondary">Secondary</BButton>
    <BButton pill variant="info">Info</BButton>
    <BButton pill variant="success">Success</BButton>
    <BButton pill variant="outline-danger">Danger</BButton>
    <BButton pill variant="outline-warning">Warning</BButton>
    <BButton pill variant="outline-light">Light</BButton>
    <BButton pill variant="outline-dark">Dark</BButton>
</template>
Props Value Default Description
pill boolean false You can create a (pill style) rounded button using the pill boolean prop
Square button

Prefer buttons with a more square corner style? Just set the prop squared to true. 

							
                                
<template>
    <BButton squared variant="primary">Primary</BButton>
    <BButton squared variant="outline-secondary"> Secondary </BButton>
    <BButton squared variant="gradient-info">Info</BButton>
</template>
Props Value Default Description
squared boolean false Prefer buttons with a more square corner style? Just set the prop squared to true.
Gradient buttons

Use variant="gradient-*" prop to create gradient buttons.

							
                                
<template>
    <BButton variant="gradient-primary">Primary</BButton>
    <BButton variant="gradient-secondary">Secondary</BButton>
    <BButton variant="gradient-info">Info</BButton>
    <BButton variant="gradient-success">Success</BButton>
    <BButton variant="gradient-danger">Danger</BButton>
    <BButton variant="gradient-warning">Warning</BButton>
    <BButton variant="gradient-light">Light</BButton>
    <BButton variant="gradient-dark">Dark</BButton>
</template>
Floating buttons

Quickly create a raised button with .btn-floating. 

							
                                
<template>
    <BButton variant="primary" class="btn-floating">Primary</BButton>
    <BButton variant="secondary" class="btn-floating">Secondary</BButton>
    <BButton variant="info" class="btn-floating">Info</BButton>
    <BButton variant="success" class="btn-floating">Success</BButton>
    <BButton variant="danger" class="btn-floating">Danger</BButton>
    <BButton variant="warning" class="btn-floating">Warning</BButton>
    <BButton variant="light" class="btn-floating">Light</BButton>
    <BButton variant="white" class="btn-floating">white</BButton>
    <BButton variant="dark" class="btn-floating">Dark</BButton>
    <BButton variant="flush-primary" class="btn-floating"> Default hover </BButton>
    <BButton variant="outline-primary" class="btn-floating"> Default hover </BButton>
</template>
Link buttons

Quickly create a link button with variant="link" prop in BButton. 

							
                                
<template>
    <BButton variant="link">Button Link</BButton>
</template>
Sizes

Fancy larger or smaller buttons? Specify lg, sm or xs via the size prop. 

							
                                
<template>
    <BButton size="lg">large</BButton>
    <BButton>Default</BButton>
    <BButton size="sm">small</BButton>
    <BButton size="xs">mini</BButton>
</template>
Props Value Default Description
size lg / sm / xs 'md' Specifies the size of the button. Use this prop to adjust the button’s visual appearance according to your design requirements. This can make the button larger or smaller than the default size.
Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors. 

							
                                
<template>
    <div class="d-grid gap-2">
        <BButton block variant="primary">Block Level Button</BButton>
        <BButton block variant="secondary">Block Level Button</BButton>
    </div>
</template>
Disabled State

Set the disabled prop to disable button default functionality. disabled also works with buttons rendered as <a> elements and RouterLink (i.e. with the href or to prop set). 

							
                                
<template>
    <BButton variant="primary" disabled>Disabled primary</BButton>
    <BButton variant="secondary" disabled>Disabled secondary</BButton>
    <BButton variant="info" pill disabled>Disabled info</BButton>
    <BButton variant="success" pill disabled>Disabled success</BButton>
    <BButton variant="link" disabled>Disabled Link</BButton>
</template>
Dropdown & dropup buttons

Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.

ActionAnother actionSomething else here
Separated link
							
                                
<template>												
    <BButtonGroup>
        <BDropdown text="Dropdown">
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>

    <!-- Dropup -->
    <BButtonGroup>
        <BDropdown dropup text="Dropup">
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>

    <!-- Drop menu left -->
    <BButtonGroup>
        <BDropdown start text="Dropleft">
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>

    <!-- Drop menu right -->
    <BButtonGroup>
        <BDropdown end text="Dropleft">
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>

    <!-- Dropdown with icon -->
    <BButtonGroup>
        <BDropdown variant="link" toggle-class="btn-wth-icon dropdown-toggle">
        <template #button-content>
            <span class="icon">
            <feather-icon name="moon"></feather-icon>
            </span>
        </template>
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>
    <BButtonGroup>
        <BDropdown toggle-class="btn-wth-icon dropdown-toggle">
        <template #button-content>
            <span class="icon">
            <feather-icon name="user"></feather-icon>
            </span>
        </template>
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>

    <!-- Split Dropdown -->
    <BButtonGroup>
        <BDropdown split text="Split dropdown">
        <BDropdownItem>Action</BDropdownItem>
        <BDropdownItem>Another action</BDropdownItem>
        <BDropdownItem>Something else here</BDropdownItem>
        <BDropdownDivider />
        <BDropdownItem>Separated link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>
</template>
Buttons with Icons

Quickly create a Icon button with .btn-wth-icon .icon-leftor.btn-wth-icon .icon-right

							
                                
<template>
    <div>
        <BButton variant="primary">
            <span>
                <span class="icon">
                    <feather-icon name="moon"></feather-icon>
                </span>
                <span>Icon Button</span>
            </span>
        </BButton>
        <BButton variant="primary">
            <span>
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
                <span>Icon Button</span>
            </span>
        </BButton>
        <BButton variant="primary">
            <span>
                <span>Icon Button</span>
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </span>
        </BButton>
        <BButton variant="outline-primary">
            <span>
                <span class="icon">
                    <feather-icon name="moon"></feather-icon>
                </span>
                <span>Icon Button</span>
            </span>
        </BButton>
        <BButton variant="outline-primary">
            <span>
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
                <span>Icon Button</span>
            </span>
        </BButton>
        <BButton variant="outline-primary">
            <span>
                <span>Icon Button</span>
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </span>
        </BButton>
    </div>
</template>
Buttons with Icons sizes

Quickly create a general button with several predefined button styles, each serving its own semantic purpose. 

							
                                
<template>
    <div>
        <BButton size="lg" variant="primary">
          <span>
            <span class="icon">
              <feather-icon name="moon"></feather-icon>
            </span>
            <span>Icon Button</span>
          </span>
        </BButton>
        <BButton variant="primary">
          <span>
            <span class="icon">
              <i class="fa fa-bell"></i>
            </span>
            <span>Icon Button</span>
          </span>
        </BButton>
        <BButton size="sm" variant="primary">
          <span>
            <span>Icon Button</span>
            <span class="icon">
              <i class="fa fa-bell"></i>
            </span>
          </span>
        </BButton>
        <BButton size="xs" variant="primary">
          <span>
            <span>Icon Button</span>
            <span class="icon">
              <i class="fa fa-bell"></i>
            </span>
          </span>
        </BButton>
    </div>
</template>
Icons buttons

Quickly create a icon button with .btn .btn-icon

							
                                
<template>
    <div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="primary" class="btn-icon">
                <span class="icon">
                    <feather-icon name="grid"></feather-icon>
                </span>
            </BButton>
            <BButton pill variant="danger" class="btn-icon">
                <span class="icon">
                    <feather-icon name="user"></feather-icon>
                </span>
            </BButton>
            <BButton size="sm" variant="primary" class="btn-icon">
                <span class="icon">
                    <feather-icon name="grid"></feather-icon>
                </span>
            </BButton>
            <BButton pill size="xs" variant="danger" class="btn-icon">
                <span class="icon">
                    <feather-icon name="grid"></feather-icon>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="outline-primary" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill variant="outline-danger" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="outline-primary" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill size="xs" variant="outline-danger" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="soft-primary" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill variant="soft-danger" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="soft-primary" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill size="xs" variant="soft-danger" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="flush-primary" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton variant="flush-danger" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="flush-primary" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="xs" variant="flush-danger" class="btn-icon">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="flush-primary" class="btn-icon btn-rounded">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton variant="flush-danger" class="btn-icon btn-rounded">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="flush-primary" class="btn-icon btn-rounded">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="xs" variant="flush-danger" class="btn-icon btn-rounded">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="flush-primary" class="btn-icon btn-rounded flush-soft-hover">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton variant="flush-danger" class="btn-icon btn-rounded flush-soft-hover">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="flush-primary" class="btn-icon btn-rounded flush-soft-hover">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="xs" variant="flush-danger" class="btn-icon btn-rounded flush-soft-hover">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
            <BButton size="lg" variant="outline-primary" class="btn-icon btn-floating">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill variant="danger" class="btn-icon btn-floating">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="soft-primary" class="btn-icon btn-floating">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill size="xs" variant="flush-danger" class="btn-icon btn-rounded btn-floating">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
        <div class="hstack flex-wrap gap-3 p-4 pt-3">
            <BButton size="lg" variant="outline-primary" class="btn-icon btn-animated">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill variant="danger" class="btn-icon btn-animated">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton size="sm" variant="soft-primary" class="btn-icon btn-animated">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
            <BButton pill size="xs" variant="flush-danger" class="btn-icon btn-rounded btn-animated">
                <span class="icon">
                    <i class="fa fa-bell"></i>
                </span>
            </BButton>
        </div>
    </div>
</template>
Custom Buttons with Icons

use .btn .btn-custom .btn-[value]

							
                                
<template>
    <BButton variant="primary" size="lg" class="btn-custom">
        <span>
            <span class="icon">
                <feather-icon name="moon"></feather-icon>
            </span>
            <span>Buy Jampack</span>
        </span>
    </BButton>
    <BButton class="btn-custom btn-rounded">
        <span>
            <span>Know More</span>
            <span class="icon">
                <feather-icon name="arrow-right-circle"></feather-icon>
            </span>
        </span>
    </BButton>
    <BButton variant="dark" size="lg" class="btn-custom btn-wth-icon btn-rounded">
        <span>
            <span>View all demos</span>
            <span class="icon">
                <feather-icon name="arrow-right"></feather-icon>
            </span>
        </span>
    </BButton>
    <BButton variant="warning" size="sm" class="btn-custom btn-rounded">
        <span>
            <span>settings</span>
            <span class="icon">
                <i class="fa fa-times"></i>
            </span>
        </span>
    </BButton>
    <BButton variant="success" class="btn-custom btn-rounded">
        <span>
            <span>Next</span>
            <span class="icon">
                <i class="fa fa-angle-right"></i>
            </span>
        </span>
    </BButton>
    <BButton variant="danger" size="sm" class="btn-custom">
        <span>
            <span class="icon">
                <i class="fa fa-exclamation-triangle"></i>
            </span>
            <span>caution</span>
        </span>
    </BButton>
    <BButton variant="danger" size="xs" class="btn-custom">
        <span>
            <span class="icon">
                <i class="fa fa-exclamation-triangle"></i>
            </span>
            <span>caution</span>
        </span>
    </BButton>
    <BButton variant="info" class="btn-custom btn-block">
        <span>
            <span class="icon">
                <i class="fa fa-facebook"></i>
            </span>
            <span>Login with facebook</span>
        </span>
    </BButton>
    <BButton variant="primary" class="btn-custom btn-block">
        <span>
            <span class="icon">
                <i class="fa fa-twitter"></i>
            </span>
            <span>Login with Twitter</span>
        </span>
    </BButton>
    <BButton variant="danger" class="btn-custom btn-block">
        <span>
            <span class="icon">
                <i class="fa fa-envelope"></i>
            </span>
            <span>Login with gmail</span>
        </span>
    </BButton>
</template>
Social buttons

Social buttons are same as icon buttons with .btn-social. 

							
                                
<template>
    <div>
        <BButton class="btn-social btn-social-facebook">facebook</BButton>
        <BButton class="btn-icon btn-social btn-social-facebook">
            <span class="icon">
                <font-awesome-icon icon="fab fa-facebook" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-twitter">twitter</BButton>
        <BButton class="btn-icon btn-social btn-social-twitter">
            <span class="icon">
                <font-awesome-icon icon="fab fa-twitter" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-linkedin">linkedin</BButton>
        <BButton class="btn-icon btn-social btn-social-linkedin">
            <span class="icon">
                <font-awesome-icon icon="fab fa-linkedin" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-github">github</BButton>
        <BButton class="btn-icon btn-social btn-social-github">
            <span class="icon">
                <font-awesome-icon icon="fab fa-github" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-youtube">youtube</BButton>
        <BButton class="btn-icon btn-social btn-social-youtube">
            <span class="icon">
                <font-awesome-icon icon="fab fa-youtube" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-gplus">google plus</BButton>
        <BButton class="btn-icon btn-social btn-social-gplus">
            <span class="icon">
                <font-awesome-icon icon="fab fa-google-plus" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-instagram">instagram</BButton>
        <BButton class="btn-icon btn-social btn-social-instagram">
            <span class="icon">
                <font-awesome-icon icon="fab fa-instagram" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-dribbble">dribbble</BButton>
        <BButton class="btn-icon btn-social btn-social-dribbble">
            <span class="icon">
                <font-awesome-icon icon="fab fa-dribbble" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-behance">behance</BButton>
        <BButton class="btn-icon btn-social btn-social-behance">
            <span class="icon">
                <font-awesome-icon icon="fab fa-behance" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-tumblr">tumblr</BButton>
        <BButton class="btn-icon btn-social btn-social-tumblr">
            <span class="icon">
                <font-awesome-icon icon="fab fa-tumblr" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-pinterest">pinterest</BButton>
        <BButton class="btn-icon btn-social btn-social-pinterest">
            <span class="icon">
                <font-awesome-icon icon="fab fa-pinterest" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-dropbox">dropbox</BButton>
        <BButton class="btn-icon btn-social btn-social-dropbox">
            <span class="icon">
                <font-awesome-icon icon="fab fa-dropbox" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-skype">skype</BButton>
        <BButton class="btn-icon btn-social btn-social-skype">
            <span class="icon">
                <font-awesome-icon icon="fab fa-skype" />
            </span>
        </BButton>
        <BButton class="btn-social btn-social-flickr">flickr</BButton>
        <BButton class="btn-icon btn-social btn-social-flickr">
            <span class="icon">
                <font-awesome-icon icon="fab fa-flickr" />
            </span>
        </BButton>
    </div>
</template>
Badge on buttons

.position-top-end-overflow, .position-top-end-overflow-1.

1212
							
                                
<template>
    <div>
        <BButton class="btn-social btn-social-flickr position-relative">
          flickr <HkBadge sm pill variant="success" placement="top-end">12</HkBadge>
        </BButton>
        <BButton class="btn-social btn-social-flickr position-relative">
          flickr <HkBadge sm pill variant="success" placement="top-end">123+</HkBadge>
        </BButton>
        <BButton class="btn-social btn-rounded btn-social-flickr position-relative">
          flickr
          <HkBadge sm pill variant="success" placement="top-end" mr="1">123+</HkBadge>
        </BButton>
        <BButton class="btn-social btn-social-flickr position-relative">
          flickr <HkBadge sm pill variant="success" placement="bottom-end">12</HkBadge>
        </BButton>
        <BButton variant="primary" class="btn-icon position-relative" href="#">
          <span class="icon">
            <feather-icon name="bell"></feather-icon>
          </span>
          <HkBadge sm pill variant="success" placement="top-end">12</HkBadge>
        </BButton>
        <BButton pill variant="primary" class="btn-icon position-relative" href="#">
          <span class="icon">
            <feather-icon name="bell"></feather-icon>
          </span>
          <HkBadge sm pill variant="success" placement="top-end" mr="1">12</HkBadge>
        </BButton>
        <BButton variant="primary" class="btn-icon position-relative" href="#">
          <span class="icon">
            <feather-icon name="bell"></feather-icon>
          </span>
          <HkBadge indicator variant="success" placement="top-end" />
        </BButton>
        <BButton
          variant="primary"
          class="btn-icon btn-rounded position-relative"
          href="#"
        >
          <span class="icon">
            <feather-icon name="bell"></feather-icon>
          </span>
          <HkBadge indicator variant="success" placement="top-end" mr="1" />
        </BButton>
        <BButton variant="flush-primary" class="btn-icon btn-rounded" href="#">
          <span class="icon">
            <span class="position-relative">
              <font-awesome-icon icon="fab fa-github" />
              <HkBadge indicator variant="success" placement="top-end" />
            </span>
          </span>
        </BButton>
    </div>
</template>
Button Group Horizontal

Wrap button with BButtonGroup

Dropdown linkDropdown link
Dropdown linkDropdown link
							
                                
<template>
    <div class="hstack flex-wrap gap-3 p-4">
        <BButtonGroup>
          <BButton>Left</BButton>
          <BButton>Middle</BButton>
          <BButton>Right</BButton>
        </BButtonGroup>

        <BButtonGroup>
          <BButton variant="outline-secondary">today</BButton>
          <BButton variant="outline-secondary">week</BButton>
          <BButton variant="outline-secondary">month</BButton>
          <BButton variant="outline-secondary">quater</BButton>
          <BButton variant="outline-secondary">year</BButton>
        </BButtonGroup>

        <BButtonGroup>
          <BButton variant="outline-secondary">1H</BButton>
          <BButton variant="outline-secondary">AR</BButton>
          <BButton variant="outline-secondary">TD</BButton>
          <BButton variant="outline-secondary">2K</BButton>
          <BButton variant="outline-secondary">6M</BButton>
        </BButtonGroup>

        <BButtonGroup>
          <BButton>1</BButton>
          <BButton>2</BButton>
          <BDropdown text="Dropdown" wrapperClass="btn-group">
            <BDropdownItem>Dropdown link</BDropdownItem>
            <BDropdownItem>Dropdown link</BDropdownItem>
          </BDropdown>
        </BButtonGroup>

        <BButtonGroup>
          <BDropdown text="Roboto" variant="outline-secondary" wrapperClass="btn-group">
            <BDropdownItem>Dropdown link</BDropdownItem>
            <BDropdownItem>Dropdown link</BDropdownItem>
          </BDropdown>
          <BButton variant="outline-secondary">
            <i class="fa fa-user"></i>
          </BButton>
          <BButton variant="outline-secondary">
            <i class="fa fa-bell"></i>
          </BButton>
        </BButtonGroup>
    </div>
</template>
Sizing

Social buttons are same as icon buttons with social icons. Create many styles using icon button classes. 




							
                                
<template>
    <div>
        <BButtonGroup size="lg">
          <BButton>Left</BButton>
          <BButton>Middle</BButton>
          <BButton>Right</BButton>
        </BButtonGroup>
        <br />
        <BButtonGroup>
          <BButton>Left</BButton>
          <BButton>Middle</BButton>
          <BButton>Right</BButton>
        </BButtonGroup>
        <br />
        <BButtonGroup size="sm">
          <BButton>Left</BButton>
          <BButton>Middle</BButton>
          <BButton>Right</BButton>
        </BButtonGroup>
        <br />
        <BButtonGroup size="xs">
          <BButton>Left</BButton>
          <BButton>Middle</BButton>
          <BButton>Right</BButton>
        </BButtonGroup>
    </div>
</template>
Button Group Vertical

Wrap button with .btn-group-vertical

Dropdown linkDropdown link
Dropdown linkDropdown link
							
                                
<template>
    <BButtonGroup vertical>
        <BButton>button</BButton>
        <BButton>button</BButton>
        <BDropdown text="Dropdown" wrapperClass="btn-group">
            <BDropdownItem>Dropdown link</BDropdownItem>
            <BDropdownItem>Dropdown link</BDropdownItem>
        </BDropdown>
        <BButton>button</BButton>
        <BButton>button</BButton>
        <BDropdown text="Dropdown" wrapperClass="btn-group">
            <BDropdownItem>Dropdown link</BDropdownItem>
            <BDropdownItem>Dropdown link</BDropdownItem>
        </BDropdown>
    </BButtonGroup>
</template>