CoreUI Button has been created as an extension of Bootstrap Button. Button is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.

For more information please visit our official documentation.
Buttons

CoreUI includes a bunch of predefined Bootstrap buttons, each serving its own semantic purpose. CoreUI also offers some unique buttons styles.

Buttons show what action will happen when the user clicks or touches it. Bootstrap buttons are used to initialize operations, both in the background or foreground of an experience.

Normal
Active State
Disabled
Buttonswith icons

You can combine button with our CoreUI Icons.

Normal
Active State
Disabled
Buttontags

The .btn classes are designed for <button> , <a> or <input> elements (though some browsers may apply a slightly different rendering).

If you’re using .btn classes on <a> elements that are used to trigger functionality ex. collapsing content, these links should be given a role="button" to adequately communicate their meaning to assistive technologies such as screen readers.

Link
Buttonsoutline

If you need a button, but without the strong background colors. Replace the default modifier classes with the .btn-outline-* ones to remove all background colors on any element with .btn class.

Normal
Active State
Disabled
Buttonsghost

Use .btn-ghost-* class for ghost buttons.

Normal
Active State
Disabled
Buttonsizes

Larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Buttonpill
Buttonsquare
Buttondisabled state

Add the disabled boolean attribute to any <button> element to make buttons look inactive. Disabled button has pointer-events: none applied to, disabling hover and active states from triggering.

Disabled buttons using the <a> element act a little different:

<a>s don’t support the disabled attribute, so you have to add .disabled class to make buttons look inactive. The disabled bootstrap button must have the aria-disabled="true" attribute to show the state of the element to assistive technologies.

Buttonblock

Create buttons that span the full width of a parent—by using utilities.

Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too.

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.