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
Buttons with icons

You can combine button with our CoreUI Icons.

Normal
Active State
Disabled
Button tags

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
Buttons outline

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
Buttons ghost

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

Normal
Active State
Disabled
Button sizes

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

Button pill
Button square
Button disabled 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.

Primary link Link
Button block

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.