<a href="#" title="Supprimer le compte link to somewhere" class="btn btn-danger">Supprimer le compte</a>
<a href="{{ href }}"
   {%- if title %}title="{{ text }} {{ title }}"{% endif -%}
   class="{{ class }}"
   {% if attributes %}
   {% for attribute, value in attributes %}
   {{ attribute }}="{{ value }}"
   {% endfor %}
   {% endif %}>
{%- if iconBefore %} <span class="fa {{ iconBefore }}" aria-hidden="true"></span> {% endif -%}
{{ text }}
{%- if iconAfter %} <span class="fa {{ iconAfter }}" aria-hidden="true"></span>
{% endif -%}
</a>
{
  "text": "Supprimer le compte",
  "href": "#",
  "title": "link to somewhere",
  "class": "btn btn-danger"
}
  • Content:
    @charset 'UTF-8';
    
    // Override normalize.css – because setting the font-family on `body` is not
    // specific enough for those tags
    
    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: $font-family-base;
    }
    
    button {
      border-radius: 0;
    }
    
    .btn-block {
      display: flex;
      justify-content: center;
    
      .fa {
        align-self: center;
        padding-left: $spacer;
      }
    }
    
    /**
     * Button
     */
    .btn {
      white-space: normal;
      padding-top: $input-btn-padding-y * 1.1;
      text-transform: uppercase;
      -webkit-font-smoothing: antialiased;
    
      /**
       * Fontawesome icons inside button
       *
       * 1. Icons inside a button are green
       * 2. Icons inside a secondary or success button are white
       */
      .fab,
      .fas,
      .fa,
      .far,
      .fal,
      .svg-inline--fa {
        color: $vd-primary; /* [1] */
      }
    
      &.btn-secondary,
      &.btn-success {
        .fab,
        .fas,
        .fa,
        .far,
        .fal,
        .svg-inline--fa {
          color: $white; /* [2] */
        }
      }
    
      &:hover {
        cursor: pointer;
      }
    
      &:focus {
        @include box-shadow($input-btn-focus-box-shadow);
      }
    
      @media print {
        display: none;
      }
    }
    
    a.btn {
      text-decoration: none;
    }
    
    .btn-sm {
      padding-top: $input-btn-padding-y-sm * 2;
      padding-bottom: $input-btn-padding-y-sm * 2;
      font-size: $font-size-base * 0.8;
    }
    
    .btn-link {
      font-weight: bold;
    
      &:hover {
        text-decoration: none;
        color: $link-hover-color;
      }
    }
    
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/components/01-atoms/button/_button.scss
  • Size: 1.4 KB
  • Content:
    @charset 'UTF-8';
    
    /**
     * 1. Overrides Bootstrap behavior: it's broken in IE if we don't specify
     *    shrink and basis value.
     */
    
    .input-group-btn {
      > .btn {
        flex: 1 1 auto; /* [1] */
        padding: ($input-btn-padding-y * 0.8) $input-btn-padding-x;
        box-shadow: none;
      }
    }
    
  • URL: /components/raw/button/_input-group.scss
  • Filesystem Path: src/components/01-atoms/button/_input-group.scss
  • Size: 284 Bytes

You can add a chevron icon by adding the class .vd-btn-chevron-t|r|b|l to the button and choose the direction of the chevron by setting t(top), r(right), b(bottom) or l(left).