Buttons

Buttons are arguably a design system’s most important component. They offer a simple label in a defined area you can press. They are prime representations of a design system’s basic attributes— color, typography, and iconography.

Element

You can create buttons by using either of these elements:

• <button>
• <a>
• <input type="button|reset|submit">

Skin

Skin controls the look and feel of the button regardless of element type(<a>, <button>, or <input>). This includes background-color, text-color, borders, shadows etc. Skins do not impact layout features like spacing and dimensions.

Buttons come in three skins:

• primary
• secondary
• flat
• link

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Primary Button</span>
    </span>
</button>

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Secondary Button</span>
    </span>
</button>

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-flat kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Flat Button</span>
    </span>
</button>

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-neutral kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Link Button</span>
    </span>
</button>

Size

Buttons come in three sizes:

• tiny
• base
• large

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-small">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Small Button</span>
    </span>
</button>

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Base Button</span>
    </span>
</button>

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Large Button</span>
    </span>
</button>

Icon Buttons

Buttons can contain icons as well as text. Icons can appear before the text, after the text, or with hidden text. Due to accessibility reasons, one shouldn’t make buttons without text. A better option is to hide the text visually if you would a button to display only the icon.

Icon before text

> Note: The icon, represented by the `...`-tag comes before the text `...`.

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
  <span class="kx-btn__inner">
    <i class="kx-icon kx-icon--size-base">
      <svg focusable="false">
          <use href="../../assets/img/icons/sprites/icons.svg#pin"></use>
      </svg>
    </i>
    <span class="kx-btn__txt">Pin to dashboard</span>
  </span>
</button>

Icon after text

Note: The text, represented by the <span class="kx-btn__txt">...</span>-tag comes before the icon <i class="kx-icon...">...</i>.

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Continue</span>
        <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
    </span>
</button>

Icon only - hidden text

Buttons should always have a text that makes them accessible for screen readers. Visually, the buttons may show only the icon.

This text is visually hidden, but still accessible through screen readers In this case, use the utility-class kx-is-vishidden on the text inside the button:

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-btn--icon" aria-label="This text is visually hidden, but still accessible through screen readers">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#attachment"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">This text is visually hidden, but still accessible through screen readers</span>
    </span>
</button>

Since icons can have many different shapes, we provide the flexibility to render a button in a specific size with an icon in a different size.

Fluid

If you like the button to fill the available width of the containing element, use the kx-btn--fluid class.

Button Groups

By wrapping buttons inside a button group, they become related - both visually and semantically. A button group uses the attribute role="group" to tie the buttons together.

<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap  " role="group" aria-label="A button group"><!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">First</span>
    </span>
</button>
        <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Second</span>
    </span>
</button>
        <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Third</span>
    </span>
</button>
</div>

You can also apply a “tight” fit to the group, removing space between the buttons: kx-btngroup--fit-tight.

Or make the group stretch the width of the containing: kx-btngroup--fit-stretch.

Or maybe both kx-btngroup--fit-tight and kx-btngroup--fit-stretch together:

Button Toolbars

By wrapping and combining several button groups, you can create a button toolbar.

<!-- BUTTON-TOOLBAR Component -->
<div class="kx-btntoolbar kx-flex kx-flex-wrap" role="toolbar" aria-label="A toolbar with 3 button groups">
    <!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap  " role="group" aria-label="First group"><!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 1A</span>
    </span>
</button>

        <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 1B</span>
    </span>
</button>
        </div>
    <!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap  " role="group" aria-label="Second group"><!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 2A</span>
    </span>
</button>
        <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 2B</span>
    </span>
</button>
        </div>
    <!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap  " role="group" aria-label="Third group"><!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 3A</span>
    </span>
</button>
        <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 3B</span>
    </span>
</button>
        <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Button 3B</span>
    </span>
</button>
        </div>
    </div>