Kalong—Styleguide, v0.0.1-alpha.1

Button 

<!-- Default -->
<button type="button" class="button">
    <span class="button__text">
      Button
    </span>
  </button>


<!-- Link -->
<a href="#" role="button" class="button" title="Click here!">
    <span class="button__text">
      Button as link
    </span>
  </a>


{% if type == 'link' %}
  <a href="{{ href }}" role="button" class="button{% if modifiers %}  {{ modifiers }}{% endif %}" title="{{ title }}">
    <span class="button__text">
      {{ label }}
    </span>
  </a>
{% else %}
  <button type="{{ type }}" class="button{% if modifiers %}  {{ modifiers }}{% endif %}">
    <span class="button__text">
      {{ label }}
    </span>
  </button>
{% endif %}
 
/* Default */
debug: true
styleguide: true
shared:
  breakpoints:
    s: 480
    m: 640
    l: 720
    xl: 960
    xxl: 1100
    xxxl: 1400
    custom: '(max-width: 30em)'
  fonts:
    default:
      family: Roboto
      fallback: sans-serif
      weight: 400
      style: normal
      fontface: true
      file: roboto-regular
site:
  lang: en
  dir: ltr
  title: 'Kalong—Styleguide, v0.0.1-alpha.1'
  description: null
  themecolor: '#000000'
  modifiers: null
globals:
  nav:
    main:
      - href: '#somepage'
        label: Somepage
type: button
label: Button



/* Link */
debug: true
styleguide: true
shared:
  breakpoints:
    s: 480
    m: 640
    l: 720
    xl: 960
    xxl: 1100
    xxxl: 1400
    custom: '(max-width: 30em)'
  fonts:
    default:
      family: Roboto
      fallback: sans-serif
      weight: 400
      style: normal
      fontface: true
      file: roboto-regular
site:
  lang: en
  dir: ltr
  title: 'Kalong—Styleguide, v0.0.1-alpha.1'
  description: null
  themecolor: '#000000'
  modifiers: null
globals:
  nav:
    main:
      - href: '#somepage'
        label: Somepage
type: link
label: Button as link
href: '#'
title: Click here!
  • Content: 
    .button {
  @include padding(a 1/2);
  @include color(default);
  @include background-color(background);
  border: 1px solid currentColor;

  @include attention {
    @include color(main);
    text-decoration: none; // for links
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 235 Bytes

A button can be an actual button, or a link that should look like a button. If you want to use the button as a submit-button you should add the attribute type="submit" to the button, instead of type="button".