Button | Vanilla

Add the classname dk-btn__{primary, secondary or alternate} to a <button>, <a>, <span> or <div>. Buttons default to being inline with a margin on one side to aid in alignment and spacing. Buttons have 3 sizing, 3 color, disabled and block style options using additional classnames and attributes.

Code Example:

<button class="dk-btn__primary">Button</button>
<a href="#" class="dk-btn__primary">Link</a>
<span class="dk-btn__primary">Span</span>
<div class="dk-btn__primary">Div</div>
<button class="dk-btn__primary dk-btn--spinner">Spinner</div>

Code Preview:

Button Sizes

<h4 class="my-2">Large</h4>
    <button class="dk-btn__primary dk-btn--lg">
        Primary Large
    </button>
    <button class="dk-btn__secondary dk-btn--lg">
        Secondary Large
    </button>
    <button class="dk-btn__alternate dk-btn--lg">
        Alternate Large
    </button>
    <br />
    <h4 class="my-2">Small</h4>
    <button class="dk-btn__primary dk-btn--sm">
        Primary Small
    </button>
    <button class="dk-btn__secondary dk-btn--sm">
        Secondary Small
    </button>
    <button class="dk-btn__alternate dk-btn--sm">
        Alternate Small
    </button>
    <br />
    <h4 class="my-2">Block</h4>
    <button class="dk-btn__primary dk-btn--block">
        Primary Block
    </button>

Button Colors

<button class="dk-btn__primary">
        Primary
    </button>
    <button class="dk-btn__secondary">
        Secondary
    </button>
    <button class="dk-btn__alternate">
        Alternate
    </button>
    <button class="dk-btn__primary" disabled="">
        Disabled Attribute
    </button>
    <button class="dk-btn__primary disabled">
        Disabled Classname
    </button>

Spinner Buttons

<button class="dk-btn__primary dk-btn--spinner">
        Primary
    </button>
    <button class="dk-btn__secondary dk-btn--spinner">
        Secondary
    </button>
    <button class="dk-btn__alternate dk-btn--spinner">
        Alternate
    </button>
    <button
        class="dk-btn__primary dk-btn--spinner"
        disabled="">
        Disabled Attribute
    </button>
    <button class="dk-btn__primary disabled dk-btn--spinner">
        Disabled Classname
    </button>
    <br />
    <button class="dk-btn__primary dk-btn--spinner dk-btn--sm">
        Primary
    </button>
    <button class="dk-btn__secondary dk-btn--spinner dk-btn--sm">
        Secondary
    </button>
    <button class="dk-btn__alternate dk-btn--spinner dk-btn--sm">
        Alternate
    </button>
    <button
        class="dk-btn__primary dk-btn--spinner dk-btn--sm"
        disabled="">
        Disabled Attribute
    </button>
    <button class="dk-btn__primary disabled dk-btn--spinner dk-btn--sm">
        Disabled Classname
    </button>
    <br />
    <button class="dk-btn__primary dk-btn--spinner dk-btn--lg">
        Primary
    </button>
    <button class="dk-btn__secondary dk-btn--spinner dk-btn--lg">
        Secondary
    </button>
    <button class="dk-btn__alternate dk-btn--spinner dk-btn--lg">
        Alternate
    </button>
    <button
        class="dk-btn__primary dk-btn--spinner dk-btn--lg"
        disabled="">
        Disabled Attribute
    </button>
    <button class="dk-btn__primary disabled dk-btn--spinner dk-btn--lg">
        Disabled Classname
    </button>
    <br />
    <button class="dk-btn__primary dk-btn--block dk-btn--spinner">
        Primary Block
    </button>
    <br />
    <button class="dk-btn__primary dk-btn--spinner dk-btn--lg">
        Wrapping text <br /> buttons showing{' '}
        <br /> that the spinner is <br /> centered
        vertically
    </button>