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