@lit-element-bootstrap/button

An implementation of Bootstrap v4.3.1 breadcrumb components in LitElement.

Live demo

Go to live demo

Installation

Install via npm:

npm install @lit-element-bootstrap/button

Install via yarn:

yarn add @lit-element-bootstrap/button

Install via unpkg:

https://unpkg.com/@lit-element-bootstrap/button@latest/unpkg/index.bundled.js

Import

import all modules:

import '@lit-element-bootstrap/button';

import specific module (preferred):

import '@lit-element-bootstrap/button/bs-button.js';

import specific class:

// import specific class from all modules
import { BsButton } from '@lit-element-bootstrap/button';

// import specific class
import { BsButton } from '@lit-element-bootstrap/button/bs-button.js';

All buttons share common functionality via a mixin

import { BsButtonMixin } from "@lit-element-bootstrap/button/bs-button-mixin.js";

To use context themes import the appropiated CSS and include it to the styles array:

import { BsButtonPrimaryCss } from '@lit-element-bootstrap/button/css/bs-button-primary.css.js';

static get styles() {
    return [
        BsButtonPrimaryCss
    ];
}

For button sizes and block behaviour import appropiated CSS and include it to the styles array:

import { BsButtonSizeCss } from '@lit-element-bootstrap/button/css/bs-button-size.css.js';
import { BsButtonBlockCss } from '@lit-element-bootstrap/button/css/bs-button-block.css.js';

static get styles() {
    return [
        BsButtonSizeCss,
        BsButtonBlockCss
    ];
}

Examples

Buttons with context

<bs-button context="primary">Primary</bs-button>
<bs-button context="secondary">Secondary</bs-button>
<bs-button context="success">Success</bs-button>
<bs-button context="danger">Danger</bs-button>
<bs-button context="warning">Warning</bs-button>
<bs-button context="info">Info</bs-button>
<bs-button context="light">Light</bs-button>
<bs-button context="dark">Dark</bs-button>
<bs-button context="link">Link</bs-button>

Button variations

<bs-button-link context="primary">Link</bs-button-link>
<bs-button context="primary" type="submit">Button</bs-button>
<bs-button-input context="primary" label="Input"></bs-button-input>
<bs-button-input context="primary" label="Submit"></bs-button-input>
<bs-button-input context="primary" label="Reset"></bs-button-input>

Outline buttons

<bs-button context="primary" outline>Primary</bs-button>
<bs-button context="secondary" outline>Secondary</bs-button>
<bs-button context="success" outline>Success</bs-button>
<bs-button context="danger" outline>Danger</bs-button>
<bs-button context="warning" outline>Warning</bs-button>
<bs-button context="info" outline>Info</bs-button>
<bs-button context="light" outline>Light</bs-button>
<bs-button context="dark" outline>Dark</bs-button>

Button sizes

<bs-button context="primary" size="large">Large button</bs-button>
<bs-button context="secondary" size="large">Large button</bs-button>
<bs-button context="primary" size="small">Small button</bs-button>
<bs-button context="secondary" size="small">Small button</bs-button>

Block buttons

<bs-button context="primary" size="large" block>Block level button</bs-button>
<bs-button context="secondary" size="large" block>Block level button</bs-button>

Active state

<bs-button-link context="primary" active>Primary</bs-button-link>
<bs-button-link context="secondary" active>Secondary</bs-button-link>
<bs-button-link context="success" active>Success</bs-button-link>
<bs-button-link context="danger" active>Danger</bs-button-link>
<bs-button-link context="warning" active>Warning</bs-button-link>
<bs-button-link context="info" active>Info</bs-button-link>
<bs-button-link context="light" active>Light</bs-button-link>
<bs-button-link context="dark" active>Dark</bs-button-link>
<bs-button-link link active>Link</bs-button-link>

Disabled state

<bs-button context="primary" disabled>Primary</bs-button>
<bs-button context="secondary" disabled>Secondary</bs-button>
<bs-button context="success" disabled>Success</bs-button>
<bs-button context="danger" disabled>Danger</bs-button>
<bs-button context="warning" disabled>Warning</bs-button>
<bs-button context="info" disabled>Info</bs-button>
<bs-button context="light" disabled>Light</bs-button>
<bs-button context="dark" disabled>Dark</bs-button>
<bs-button link disabled>Link</bs-button>

Toggle state

<bs-button context="primary" toggle>Primary toggle</bs-button>

Toggle state

<bs-button context="primary" toggle>Primary toggle</bs-button>

Components

Tag | Class | --- | --- | <bs-button> | BsButton | <bs-button-link> | BsButtonLink | <bs-button-input> | BsButtonInput |

Methods

Method | Returns | Description --- | --- | --- | activate() | void | asynchronously sets the button in activate state deactivate() | void | asynchronously removes activate state disable() | void | asynchronously sets the button in disable state enable() | void | asynchronously removes disable state

Events

Event | Description --- | --- | bs-button-click | Fired when button is clicked | bs-button-focusout | Fired button loses focus |

Slots

Component | Name | Description | --- | --- | --- | bs-button | slot | Place button content | bs-button-link | slot | Place link content |

Theming

bs-button-common.css

Property | Description | Default value --- | --- | --- | --btn-text-color | button text color | - --btn-bg-color | button background color | - --btn-bd-width | button border width | 1px --btn-bd-style | button border style | solid --btn-bd-color | button border color | transparent --btn-bd-top-left-radius | button border top left radius | 0.25rem --btn-bd-top-right-radius | button border top right radius | 0.25rem --btn-bd-bottom-right-radius | button border bottom right radius | 0.25rem --btn-bd-bottom-left-radius | button border bottom left radius | 0.25rem --btn-display | button display | inline-block --btn-font-weight | button font weight | 400 --btn-text-align | button text align | center --btn-white-space | button white space | nowrap --btn-vertical-align | button vertical align | middle --btn-width | button width | - --btn-height | button height | - --btn-flex | button flex | - --btn-pd-top | button padding top | 0.375rem --btn-pd-bottom | button padding bottom | 0.375rem --btn-pd-left | button padding left | 0.75rem --btn-pd-right | button padding right | 0.75rem --btn-font-size | button font size | 1rem --btn-line-height | button line height | 1.5 --btn-position | button position | - --btn-mg-top | button margin top | - --btn-mg-right | button margin right | - --btn-mg-left | button margin left | - --btn-mg-bottom | button margin bottom | - --btn-display-after | button ::after display | - --btn-width-after | button ::after width | - --btn-height-after | button ::after height | - --btn-margin-left-after | button ::after margin left | - --btn-vertical-align-after | button ::after vertical align | - --btn-content-after | button ::after content | - --btn-border-top-after | button ::after border top | - --btn-border-right-after | button ::after border right after | - --btn-border-bottom-after | button ::after border bottom | - --btn-border-left-after | button ::after border left | - --btn-margin-left-empty-after | button ::after:empty margin left | - --btn-display-before | button ::before display | - --btn-width-before | button ::before width | - --btn-height-before | button ::before height | - --btn-margin-left-before | button ::before margin left | - --btn-vertical-align-before | button ::before vertical align | - --btn-content-before | button ::before content | - --btn-border-top-before | button ::before border top | - --btn-border-right-before | button ::before border right | - --btn-border-bottom-before | button ::before border bottom | - --btn-border-left-before | button ::before border left | - --btn-text-color-hover | button hover text color | #212529 --btn-text-decoration-hover | button hover text decoration | none --btn-z-index-hover | button hover z-index | - --btn-bd-color-hover | button hover border color | - --btn-box-shadow-hover | button hover box shadow | - --btn-bg-color-hover | button hover background color | - --btn-box-shadow-focus | button focus box-shadow | 0 0 0 0.2rem rgba(0, 123, 255, 0.25) --btn-text-color-focus | button focus text color | - --btn-z-index-focus | button focus z-index | - --btn-bg-color-focus | button focus background color | - --btn-bd-color-focus | button focus border color | - --btn-text-color-disabled | button disabled text color | - --btn-bg-color-disabled | button disabled background color | - --btn-bd-color-disabled | button disabled border color | - --btn-opacity-disabled | button disabled opacity | 0.65 --btn-pointer-events-disabled | button disabled pointer-events | none --btn-text-color-active | button active text color | - --btn-bg-color-active | button active background color | - --btn-bd-color-active | button active border color | - --btn-box-shadow-active-focus | button active focus box-shadow | - --btn-z-index-active | button active z-index | -

bs-button-primary.css

Property | Description | Default value --- | --- | --- | --primary-color | primary color to use | --primary if present, otherwise #007bff --btn-primary-text-color | primary text color | #fff --btn-primary-bg-color | primary background color | --primary-color --btn-primary-bd-color | primary border color | --primary-color --btn-primary-text-color-hover | primary hover text color | #fff --btn-primary-bg-color-hover | primary hover background color | #0069d9 --btn-primary-bd-color-hover | primary hover border color | #0062cc --btn-primary-bd-color-focus | primary focus border color | #0062cc --btn-primary-bg-color-focus | primary focus background color | #0069d9 --btn-primary-text-color-focus | primary focus text color |#fff --btn-primary-box-shadow-focus | primary focus box shadow | 0 0 0 0.2rem rgba(38, 143, 255, 0.5) --btn-primary-text-color-disabled | primary disabled text color | #fff --btn-primary-bg-color-disabled | primary disabled background color | --primary-color --btn-primary-bd-color-disabled | primary disabled border color | --primary-color --btn-primary-text-color-active | primary active text color | #fff --btn-primary-bg-color-active | primary active background color | #0062cc --btn-primary-bd-color-active | primary active border color | #005cbf --btn-primary-box-shadow-active-focus | primary active focus box shadow | 0 0 0 0.2rem rgba(0, 123, 255, 0.5) --btn-outline-primary-text-color | primary outline text color | --primary-color --btn-outline-primary-bg-color | primary outline background color | transparent --btn-outline-primary-bd-color | primary outline border color | --primary-color --btn-outline-primary-text-color-hover | primary outline hover text color | #fff --btn-outline-primary-bg-color-hover | primary outline hover background color | --primary-color --btn-outline-primary-bd-color-hover | primary outline hover border color | --primary-color --btn-outline-primary-box-shadow-focus | primary outline focus box shadow | 0 0 0 0.2rem rgba(0, 123, 255, 0.5) --btn-outline-primary-text-color-disabled | primary outline disabled text color | --primary-color --btn-outline-primary-bg-color-disabled | primary outline disabled background color | transparent --btn-outline-primary-text-color-active | primary outline active text color | #fff --btn-outline-primary-bg-color-active | primary outline active background color | --primary-color --btn-outline-primary-bd-color-active | primary outline active border color | --primary-color --btn-outline-primary-box-shadow-active-focus | primary outline active focus box shadow | 0 0 0 0.2rem rgba(0, 123, 255, 0.5)

bs-button-secondary.css

Property | Description | Default value --- | --- | --- | --secondary-color | secondary color to use | --secondary if present, otherwise #6c757d --btn-secondary-text-color | secondary text color | #fff --btn-secondary-bg-color | secondary background color | --secondary-color --btn-secondary-bd-color | secondary border color | --secondary-color --btn-secondary-text-color-hover | secondary hover text color | #fff --btn-secondary-bg-color-hover | secondary hover background color | #5a6268 --btn-secondary-bd-color-hover | secondary hover border color | #545b62 --btn-secondary-bd-color-focus | secondary focus border color | #545b62 --btn-secondary-bg-color-focus | secondary focus background color | #5a6268 --btn-secondary-text-color-focus | secondary focus text color | #fff --btn-secondary-box-shadow-focus | secondary focus box-shadow | 0 0 0 0.2rem rgba(108, 117, 125, 0.5) --btn-secondary-text-color-disabled | secondary disabled text color | #fff --btn-secondary-bg-color-disabled | secondary disable background color | --secondary-color --btn-secondary-bd-color-disabled | secondary disabled border color | --secondary-color --btn-secondary-text-color-active | secondary active text color | #fff --btn-secondary-bg-color-active | secondary active background color | #545b62 --btn-secondary-bd-color-active | secondary active border color | #4e555b --btn-secondary-box-shadow-active-focus | secondary active focus box-shadow | 0 0 0 0.2rem rgba(108, 117, 125, 0.5) --btn-outline-secondary-text-color | secondary outline text color | --secondary-color --btn-outline-secondary-bg-color | secondary outline background color | transparent --btn-outline-secondary-bd-color | secondary outline border color | --secondary-color --btn-outline-secondary-text-color-hover | secondary outline hover text color | #fff --btn-outline-secondary-bg-color-hover | secondary outline hover background color | --secondary-color --btn-outline-secondary-bd-color-hover | secondary outline hover border color | --secondary-color --btn-outline-secondary-box-shadow-focus | secondary outline focus box-shadow | 0 0 0 0.2rem rgba(108, 117, 125, 0.5) --btn-outline-secondary-text-color-disabled | secondary outline disabled text color | --secondary-color --btn-outline-secondary-bg-color-disabled | secondary outline disabled background color | #transparent --btn-outline-secondary-text-color-active | secondary outline active text color | #fff --btn-outline-secondary-bg-color-active | secondary outline active background color | --secondary-color --btn-outline-secondary-bd-color-active | secondary outline active border color | --secondary-color --btn-outline-secondary-box-shadow-active-focus | secondary outline active focus box-shadow | 0 0 0 0.2rem rgba(108, 117, 125,0.5)

bs-button-success.css

Property | Description | Default value --- | --- | --- | --success-color | success color to use | --success if present, otherwise #28a745 --btn-success-text-color | success text color | #fff --btn-success-bg-color | success background color | --success-color --btn-success-bd-color | success border color | --success-color --btn-success-text-color-hover | success hover text color | #fff --btn-success-bg-color-hover | success hover background color | #218838 --btn-success-bd-color-hover | success hover border color | #1e7e34 --btn-success-bd-color-focus | success focus border color | #1e7e34 --btn-success-bg-color-focus | success focus background color | #218838 --btn-success-text-color-focus | success focus text color | #fff --btn-success-box-shadow-focus | sucess focus box-shadow | 0 0 0 0.2rem rgba(40, 167, 69, 0.5) --btn-success-text-color-disabled | success disabled text color | #fff --btn-success-bg-color-disabled | success disabled background color | --success-color --btn-success-bd-color-disabled | success disabled border color | --success-color --btn-success-text-color-active | success active text color | #fff --btn-success-bg-color-active | success active background color | #1e7e34 --btn-success-bd-color-active | success active border color | #1c7430 --btn-success-box-shadow-active-focus | success active focus box-shadow | 0 0 0 0.2rem rgba(40, 167, 69, 0.5) --btn-outline-success-text-color | success outline text color | --success-color --btn-outline-success-bg-color | success outline background color | transparent --btn-outline-success-bd-color | success outline border color | --success-color --btn-outline-success-text-color-hover | success outline hover text color | #fff --btn-outline-success-bg-color-hover | success outline hover background color | --success-color --btn-outline-success-bd-color-hover | success outline hover border color | --success-color --btn-outline-success-box-shadow-focus | success outline focus box-shadow | 0 0 0 0.2rem rgba(40, 167, 69, 0.5) --btn-outline-success-text-color-disabled | success outline disabled text color | --success-color --btn-outline-success-bg-color-disabled | success outline disabled background color | #transparent --btn-outline-success-text-color-active | success outline active text color | #fff --btn-outline-success-bg-color-active | success outline active background color | --success-color --btn-outline-success-bd-color-active | success outline active border color | --success-color --btn-outline-success-box-shadow-active-focus | success outline active focus box-shadow | 0 0 0 0.2rem rgba(40, 167, 69, 0.5)

bs-button-danger.css

Property | Description | Default value --- | --- | --- | --danger-color | danger color to use | --danger if present, otherwise #dc3545 --btn-danger-text-color | danger text color | #fff --btn-danger-bg-color | danger background color | --danger-color --btn-danger-bd-color | danger border color | --danger-color --btn-danger-text-color-hover | danger hover text color | #fff --btn-danger-bg-color-hover | danger hover background color | #c82333 --btn-danger-bd-color-hover | danger hover border color | #bd2130 --btn-danger-bd-color-focus | danger focus border color | #bd2130 --btn-danger-bg-color-focus | danger focus background color | #c82333 --btn-danger-text-color-focus | danger focus text color | #fff --btn-danger-box-shadow-focus | sucess focus box-shadow | 0 0 0 0.2rem rgba(220, 53, 69, 0.5) --btn-danger-text-color-disabled | danger disabled text color | #fff --btn-danger-bg-color-disabled | danger disabled background color | --danger-color --btn-danger-bd-color-disabled | danger disabled border color | --danger-color --btn-danger-text-color-active | danger active text color | #fff --btn-danger-bg-color-active | danger active background color | #bd2130 --btn-danger-bd-color-active | danger active border color | #b21f2d --btn-danger-box-shadow-active-focus | danger active focus box-shadow | 0 0 0 0.2rem rgba(220, 53, 69, 0.5) --btn-outline-danger-text-color | danger outline text color | --danger-color --btn-outline-danger-bg-color | danger outline background color | transparent --btn-outline-danger-bd-color | danger outline border color | --danger-color --btn-outline-danger-text-color-hover | danger outline hover text color | #fff --btn-outline-danger-bg-color-hover | danger outline hover background color | --danger-color --btn-outline-danger-bd-color-hover | danger outline hover border color | --danger-color --btn-outline-danger-box-shadow-focus | danger outline focus box-shadow | 0 0 0 0.2rem rgba(220, 53, 69, 0.5) --btn-outline-danger-text-color-disabled | danger outline disabled text color | --danger-color --btn-outline-danger-bg-color-disabled | danger outline disabled background color | #transparent --btn-outline-danger-text-color-active | danger outline active text color | #fff --btn-outline-danger-bg-color-active | danger outline active background color | --danger-color --btn-outline-danger-bd-color-active | danger outline active border color | --danger-color --btn-outline-danger-box-shadow-active-focus | danger outline active focus box-shadow | 0 0 0 0.2rem rgba(220, 53, 69, 0.5)

bs-button-warning.css

Property | Description | Default value --- | --- | --- | --warning-color | warning color to use | --warning if present, otherwise #ffc107 --btn-warning-text-color | warning text color | #212529 --btn-warning-bg-color | warning background color | --warning-color --btn-warning-bd-color | warning border color | --warning-color --btn-warning-text-color-hover | warning hover text color | #212529 --btn-warning-bg-color-hover | warning hover background color | #e0a800 --btn-warning-bd-color-hover | warning hover border color | #d39e00 --btn-warning-bd-color-focus | warning focus border color | #d39e00 --btn-warning-bg-color-focus | warning focus background color | #e0a800 --btn-warning-text-color-focus | warning focus text color | #fff --btn-warning-box-shadow-focus | sucess focus box-shadow | 0 0 0 0.2rem rgba(255, 193, 7, 0.5) --btn-warning-text-color-disabled | warning disabled text color | #212529 --btn-warning-bg-color-disabled | warning disabled background color | --warning-color --btn-warning-bd-color-disabled | warning disabled border color | --warning-color --btn-warning-text-color-active | warning active text color | #212529 --btn-warning-bg-color-active | warning active background color | #d39e00 --btn-warning-bd-color-active | warning active border color | #c69500 --btn-warning-box-shadow-active-focus | warning active focus box-shadow | 0 0 0 0.2rem rgba(255, 193, 7, 0.5) --btn-outline-warning-text-color | warning outline text color | --warning-color --btn-outline-warning-bg-color | warning outline background color | transparent --btn-outline-warning-bd-color | warning outline border color | --warning-color --btn-outline-warning-text-color-hover | warning outline hover text color | #212529 --btn-outline-warning-bg-color-hover | warning outline hover background color | --warning-color --btn-outline-warning-bd-color-hover | warning outline hover border color | --warning-color --btn-outline-warning-box-shadow-focus | warning outline focus box-shadow | 0 0 0 0.2rem rgba(255, 193, 7, 0.5) --btn-outline-warning-text-color-disabled | warning outline disabled text color | --warning-color --btn-outline-warning-bg-color-disabled | warning outline disabled background color | #transparent --btn-outline-warning-text-color-active | warning outline active text color | #212529 --btn-outline-warning-bg-color-active | warning outline active background color | --warning-color --btn-outline-warning-bd-color-active | warning outline active border color | --warning-color --btn-outline-warning-box-shadow-active-focus | warning outline active focus box-shadow | 0 0 0 0.2rem rgba(255, 193, 7, 0.5)

bs-button-info.css

Property | Description | Default value --- | --- | --- | --info-color | info color to use | --info if present, otherwise #17a2b8 --btn-info-text-color | info text color | #fff --btn-info-bg-color | info background color | --info-color --btn-info-bd-color | info border color | --info-color --btn-info-text-color-hover | info hover text color | #fff --btn-info-bg-color-hover | info hover background color | #138496 --btn-info-bd-color-hover | info hover border color | #117a8b --btn-info-bd-color-focus | info focus border color | #117a8b --btn-info-bg-color-focus | info focus background color | #138496 --btn-info-text-color-focus | info focus text color | #fff --btn-info-box-shadow-focus | sucess focus box-shadow | 0 0 0 0.2rem rgba(23, 162, 184, 0.5) --btn-info-text-color-disabled | info disabled text color | #fff --btn-info-bg-color-disabled | info disabled background color | --info-color --btn-info-bd-color-disabled | info disabled border color | --info-color --btn-info-text-color-active | info active text color | #fff --btn-info-bg-color-active | info active background color | #117a8b --btn-info-bd-color-active | info active border color | #10707f --btn-info-box-shadow-active-focus | info active focus box-shadow | 0 0 0 0.2rem rgba(23, 162, 184, 0.5) --btn-outline-info-text-color | info outline text color | --info-color --btn-outline-info-bg-color | info outline background color | transparent --btn-outline-info-bd-color | info outline border color | --info-color --btn-outline-info-text-color-hover | info outline hover text color | #fff --btn-outline-info-bg-color-hover | info outline hover background color | --info-color --btn-outline-info-bd-color-hover | info outline hover border color | --info-color --btn-outline-info-box-shadow-focus | info outline focus box-shadow | 0 0 0 0.2rem rgba(23, 162, 184, 0.5) --btn-outline-info-text-color-disabled | info outline disabled text color | --info-color --btn-outline-info-bg-color-disabled | info outline disabled background color | #transparent --btn-outline-info-text-color-active | info outline active text color | #fff --btn-outline-info-bg-color-active | info outline active background color | --info-color --btn-outline-info-bd-color-active | info outline active border color | --info-color --btn-outline-info-box-shadow-active-focus | info outline active focus box-shadow | 0 0 0 0.2rem rgba(23, 162, 184, 0.5)

bs-button-light.css

Property | Description | Default value --- | --- | --- | --light-color | light color to use | --light if present, otherwise #f8f9fa --btn-light-text-color | light text color | #212529 --btn-light-bg-color | light background color | --light-color --btn-light-bd-color | light border color | --light-color --btn-light-text-color-hover | light hover text color | #212529 --btn-light-bg-color-hover | light hover background color | #e2e6ea --btn-light-bd-color-hover | light hover border color | #dae0e5 --btn-light-bd-color-focus | light focus border color | #dae0e5 --btn-light-bg-color-focus | light focus background color | #e2e6ea --btn-light-text-color-focus | light focus text color | #212529 --btn-light-box-shadow-focus | sucess focus box-shadow | 0 0 0 0.2rem rgba(216, 217, 219, 0.5) --btn-light-text-color-disabled | light disabled text color | #212529 --btn-light-bg-color-disabled | light disabled background color | --light-color --btn-light-bd-color-disabled | light disabled border color | --light-color --btn-light-text-color-active | light active text color | #212529 --btn-light-bg-color-active | light active background color | #dae0e5 --btn-light-bd-color-active | light active border color | #d3d9df --btn-light-box-shadow-active-focus | light active focus box-shadow | 0 0 0 0.2rem rgba(216, 217, 219, 0.5) --btn-outline-light-text-color | light outline text color | --light-color --btn-outline-light-bg-color | light outline background color | transparent --btn-outline-light-bd-color | light outline border color | --light-color --btn-outline-light-text-color-hover | light outline hover text color | #212529 --btn-outline-light-bg-color-hover | light outline hover background color | --light-color --btn-outline-light-bd-color-hover | light outline hover border color | --light-color --btn-outline-light-box-shadow-focus | light outline focus box-shadow | 0 0 0 0.2rem rgba(248, 249, 250, 0.5) --btn-outline-light-text-color-disabled | light outline disabled text color | --light-color --btn-outline-light-bg-color-disabled | light outline disabled background color | #transparent --btn-outline-light-text-color-active | light outline active text color | #212529 --btn-outline-light-bg-color-active | light outline active background color | --light-color --btn-outline-light-bd-color-active | light outline active border color | --light-color --btn-outline-light-box-shadow-active-focus | light outline active focus box-shadow | 0 0 0 0.2rem rgba(248, 249, 250, 0.5)

bs-button-dark.css

Property | Description | Default value --- | --- | --- | --dark-color | dark color to use | --dark if present, otherwise #343a40 --btn-dark-text-color | dark text color | #fff --btn-dark-bg-color | dark background color | --dark-color --btn-dark-bd-color | dark border color | --dark-color --btn-dark-text-color-hover | dark hover text color | #fff --btn-dark-bg-color-hover | dark hover background color | #23272b --btn-dark-bd-color-hover | dark hover border color | #1d2124 --btn-dark-bd-color-focus | dark focus border color | #1d2124 --btn-dark-bg-color-focus | dark focus background color | #23272b --btn-dark-text-color-focus | dark focus text color | #fff --btn-dark-box-shadow-focus | sucess focus box-shadow | 0 0 0 0.2rem rgba(52, 58, 64, 0.5) --btn-dark-text-color-disabled | dark disabled text color | #fff --btn-dark-bg-color-disabled | dark disabled background color | --dark-color --btn-dark-bd-color-disabled | dark disabled border color | --dark-color --btn-dark-text-color-active | dark active text color | #fff --btn-dark-bg-color-active | dark active background color | #1d2124 --btn-dark-bd-color-active | dark active border color | #171a1d --btn-dark-box-shadow-active-focus | dark active focus box-shadow | 0 0 0 0.2rem rgba(52, 58, 64, 0.5) --btn-outline-dark-text-color | dark outline text color | --dark-color --btn-outline-dark-bg-color | dark outline background color | transparent --btn-outline-dark-bd-color | dark outline border color | --dark-color --btn-outline-dark-text-color-hover | dark outline hover text color | #fff --btn-outline-dark-bg-color-hover | dark outline hover background color | --dark-color --btn-outline-dark-bd-color-hover | dark outline hover border color | --dark-color --btn-outline-dark-box-shadow-focus | dark outline focus box-shadow | 0 0 0 0.2rem rgba(40, 167, 69, 0.5) --btn-outline-dark-text-color-disabled | dark outline disabled text color | --dark-color --btn-outline-dark-bg-color-disabled | dark outline disabled background color | #transparent --btn-outline-dark-text-color-active | dark outline active text color | #fff --btn-outline-dark-bg-color-active | dark outline active background color | --dark-color --btn-outline-dark-bd-color-active | dark outline active border color | --dark-color --btn-outline-dark-box-shadow-active-focus | dark outline active focus box-shadow | 0 0 0 0.2rem rgba(52, 58, 64, 0.5)

bs-button-link.css

Property | Description | Default value --- | --- | --- | --btn-link-text-color | link text color | #007bff --btn-link-bg-color | link background color | transparent --btn-link-font-weight | link font weight | 400 --btn-link-text-color-hover | link hover text color | #0056b3 --btn-link-bg-color-hover | link hover background color | transparent --btn-link-bd-color-hover | link hover border color | transparent --btn-link-text-decoration-hover | link hover text decoration | underline --btn-link-text-color-disabled | link disabled text color | #6c757d --btn-link-pointer-events-disabled | link pointer-events-disabled | none --btn-link-text-decoration-focus | link focus text decoration | underline --btn-link-box-shadow-focus | link focus box-shadow | none --btn--link-bd-color-focus | link focus border color | transparent

bs-button-size.css

Property | Description | Default value --- | --- | --- | --bs-btn-small-top-pd | small padding top | 0.25rem --bs-btn-small-bottom-pd | small padding bottom | 0.25rem --bs-btn-small-left-pd | small padding left | 0.5rem --bs-btn-small-right-pd | small padding right | 0.5rem --bs-btn-small-font-size | small font size | 0.875rem --bs-btn-small-line-height | small line-height | 1.5 --bs-btn-small-bd-top-left-radius | small top left border radius | 0.2rem --bs-btn-small-bd-top-right-radius | small top right border radius | 0.2rem --bs-btn-small-bd-bottom-right-radius | small bottom right radius | 0.2rem --bs-btn-small-bd-bottom-left-radius | small bottom left radius | 0.2rem --bs-btn-large-top-pd | large padding top | 0.5rem --bs-btn-large-bottom-pd | large padding bottom | 0.5rem --bs-btn-large-left-pd | large padding left | 1rem --bs-btn-large-right-pd | large padding right | 1rem --bs-btn-large-font-size | large font size | 1.25rem --bs-btn-large-line-height | large line-height | 1.5 --bs-btn-large-bd-top-left-radius | large top left border radius | 0.3rem --bs-btn-large-bd-top-right-radius | large top right border radius | 0.3rem --bs-btn-large-bd-bottom-right-radius | large bottom right border radius | 0.3rem --bs-btn-large-bd-bottom-left-radius | large bottom left border radius | 0.3rem