<!-- Einfach -->
<button class="button button--simple" id="button-14af" type="button">Das ist ein Button.
</button>

<!-- Rot -->
<button class="button button--red" id="button-5471" type="button">Das ist ein Button.
</button>

<!-- Rot (Outline) -->
<button class="button button--red button--outline" id="button-6f0d" type="button">Das ist ein Button.
</button>

<!-- Rot (Icon) -->
<button class="button button--red" id="button-3292" type="button">
<svg class="icon button__icon icon--user" id="icon-5816" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>Das ist ein Button.
</button>

<!-- Rot (Outline, Icon) -->
<button class="button button--red button--outline" id="button-c546" type="button">
<svg class="icon button__icon icon--user" id="icon-49cf" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-user"></use>
</svg>Das ist ein Button.
</button>

<!-- Blau -->
<a class="button button--blue" id="button-0109" href="#">Das ist ein Button.
</a>

<!-- Blau (Inaktiv) -->
<a class="button button--blue button--inactive" id="button-2909" href="#">Das ist ein Button.
</a>

<!-- Blau (Icon Only) -->
<a class="button button--blue button--icon" id="button-c4d6" href="#">
    <svg class="icon button__icon icon--internal-link" id="icon-2e1f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
</a>

<!-- Blau (Outline) -->
<a class="button button--blue button--outline" id="button-c18c" href="#">Das ist ein Button.
</a>

<!-- Blau (Transparent Outline) -->
<a class="button button--blue button--transparent" id="button-e036" href="#">Das ist ein Button.
</a>

<!-- Weiß-Rot -->
<button class="button button--white-red" id="button-27ca" type="button">Das ist ein Button.
</button>

<!-- Weiß-Rot (Outline) -->
<button class="button button--white-red button--outline" id="button-8298" type="button">Das ist ein Button.
</button>

<!-- Weiß-Blau -->
<a class="button button--white-blue" id="button-a942" href="#">Das ist ein Button.
</a>

<!-- Weiß-Blau (Outline) -->
<a class="button button--white-blue button--outline" id="button-d23a" href="#">Das ist ein Button.
</a>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `button-${randomString()}`;

  //- Tag
  tag = link ? 'a' : 'button';

  //- Process options
  if (color || modifier) {
    attr.class.push(`button--${color || modifier}`);
  }

  if (outline) {
    attr.class.push('button--outline');
  }
  
  if (transparent) {
    attr.class.push('button--transparent');
  }

  if (inactive) {
    attr.class.push('button--inactive');
  }

  if (link) {
    attr.href = link;
  } else {
    attr.type = submit ? 'submit' : 'button';
  }

  // Icon only
  if (!text && icon) {
    attr.class.push('button--icon');
  }

//- Render atom
#{tag}.button&attributes(attr)
  if icon
    != include('@icon', {icon, attr: {class: 'button__icon'}})
  | #{content || text}
/* Einfach */
{
  "text": "Das ist ein Button.",
  "modifier": "simple"
}

/* Rot */
{
  "text": "Das ist ein Button.",
  "modifier": "red"
}

/* Rot (Outline) */
{
  "text": "Das ist ein Button.",
  "modifier": "red",
  "outline": true
}

/* Rot (Icon) */
{
  "text": "Das ist ein Button.",
  "modifier": "red",
  "icon": "user"
}

/* Rot (Outline, Icon) */
{
  "text": "Das ist ein Button.",
  "modifier": "red",
  "icon": "user",
  "outline": true
}

/* Blau */
{
  "text": "Das ist ein Button.",
  "modifier": "blue",
  "link": "#"
}

/* Blau (Inaktiv) */
{
  "text": "Das ist ein Button.",
  "modifier": "blue",
  "link": "#",
  "inactive": true
}

/* Blau (Icon Only) */
{
  "text": null,
  "modifier": "blue",
  "link": "#",
  "icon": "internal-link"
}

/* Blau (Outline) */
{
  "text": "Das ist ein Button.",
  "modifier": "blue",
  "link": "#",
  "outline": true
}

/* Blau (Transparent Outline) */
{
  "text": "Das ist ein Button.",
  "modifier": "blue",
  "link": "#",
  "transparent": true
}

/* Weiß-Rot */
{
  "text": "Das ist ein Button.",
  "modifier": "white-red"
}

/* Weiß-Rot (Outline) */
{
  "text": "Das ist ein Button.",
  "modifier": "white-red",
  "outline": true
}

/* Weiß-Blau */
{
  "text": "Das ist ein Button.",
  "modifier": "white-blue",
  "link": "#"
}

/* Weiß-Blau (Outline) */
{
  "text": "Das ist ein Button.",
  "modifier": "white-blue",
  "outline": true,
  "link": "#"
}

  • Content:
    // Default button
    .button {
      background-color: $color-steelgrey-dark;
      border: 2px solid transparent;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 1.4rem;
      font-weight: bold;
      line-height: 1;
      margin: 0 auto;
      max-width: 100%;
      padding: calc(3.1rem / 2 - 2px) calc(3rem - 2px);
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition-duration: $default-transition-duration;
      transition-property: background-color, color, border-color, text-decoration;
      user-select: none;
      width: auto;
    
      // If buttons are grouped, add some spacing between them
      & + & {
        margin-left: $spacer;
      }
    
      // Default focus, hover
      &:hover,
      &:focus {
        background-color: $color-steelgrey-xdark;
        text-decoration: underline;
      }
    }
    
    // Simple
    .button--simple {
      padding: calc(1.8rem / 2 - 2px) calc(1.5rem - 2px);
      text-transform: none;
    }
    
    // Colors
    .button--red {
      background-color: $color-red;
    
      &:focus,
      &:hover {
        background-color: $color-red-dark;
      }
    
      &.button--outline {
        background-color: #fff;
        border-color: $color-red;
        color: $color-red;
      }
    
      &.button--outline:hover,
      &.button--outline:focus, {
        background-color: $color-red;
        color: #fff;
      }
    }
    
    .button--blue {
      background-color: $color-blue-light;
    
      &:focus,
      &:hover {
        background-color: $color-blue;
      }
    
      &.button--outline {
        background-color: #fff;
        border-color: $color-blue-light;
        color: $color-blue-light;
      }
    
      &.button--outline:hover,
      &.button--outline:focus, {
        background-color: $color-blue-light;
        color: #fff;
      }
    
      &.button--transparent {
        background-color: transparent;
        border-color: $color-blue-light;
        color: $color-blue-light;
      }
    
      &.button--transparent:focus,
      &.button--transparent:hover {
        background-color: $color-blue-light;
        color: #fff;
      }
    
      &.button--inactive {
        background-color: $color-steelgrey-dark;
        color: #fff;
        pointer-events: none;
      }
    }
    
    .button--white-red {
      background-color: #fff;
      color: $color-red;
    
      &:focus,
      &:hover {
        background-color: #fff;
      }
    
      &.button--outline {
        background-color: $color-red;
        border-color: #fff;
        color: #fff;
      }
    
      &.button--outline:hover,
      &.button--outline:focus, {
        background-color: #fff;
        color: $color-red;
      }
    }
    
    .button--white-blue {
      background-color: #fff;
      color: $color-blue;
    
      &:focus,
      &:hover {
        background-color: $color-blue-light;
        color: #fff;
      }
    
      &.button--outline {
        background-color: $color-blue;
        border-color: #fff;
        color: #fff;
      }
    
      &.button--outline:hover,
      &.button--outline:focus, {
        background-color: #fff;
        color: $color-blue;
      }
    }
    
    .button--icon {
      padding: calc(1.5rem - 2px);
    
      .button__icon {
        margin: 0;
      }
    }
    
    .button__icon {
      margin-right: 1rem;
    }
    
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/atoms/button/button.scss
  • Size: 2.9 KB

There are no notes for this item.