<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-primary">
            Button
        </button>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary">
            Anchor
        </a>
    </div>
    <div class="col-md-6">
        <a href="#" class="btn btn-primary download">
            Aanvraagformulier downloaden
        </a>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-primary" disabled>
            Disabled
        </button>
    </div>
</div>

<div class="row example">
    <div class="col-md-3 example-standard">
        <p><i>Standard</i></p>
        <button type="button" class="btn btn-primary">
            Call to action
        </button>
    </div>
    <div class="col-md-3 example-hover">
        <p><i>Hover/Focus</i></p>
        <button type="button" class="btn btn-primary">
            Call to action
        </button>
    </div>
    <div class="col-md-3 example-active">
        <p><i>Active</i></p>
        <button type="button" class="btn btn-primary">
            Call to action
        </button>
    </div>
    <div class="col-md-3 example-">
        <p><i>Disabled</i></p>
        <button type="button" class="btn btn-primary" disabled>
            Call to action
        </button>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <label>Gebruik:</label>
        <p>De oranje kleur is een intense kleur om de aandacht te trekken. Maar teveel oranje is overweldigend voor de gebruiker en vermindert het gewenste effect van de button.</p>
        <p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
    </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Secundaire button</h2>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-default">
            Button
        </button>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default">
            Anchor
        </a>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default download">
            Downloaden
        </a>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default extern">
            Lees verder
        </a>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-default" disabled>
            Disabled
        </button>
    </div>
</div>

<div class="row example">
    <div class="col-md-3 example-standard">
        <p><i>Standard</i></p>
        <button type="button" class="btn btn-default">
            Volgende
        </button>
    </div>
    <div class="col-md-3 example-hover">
        <p><i>Hover/Focus</i></p>
        <button type="button" class="btn btn-default">
            Volgende
        </button>
    </div>
    <div class="col-md-3 example-active">
        <p><i>Active</i></p>
        <button type="button" class="btn btn-default">
            Volgende
        </button>
    </div>
    <div class="col-md-3 example-">
        <p><i>Disabled</i></p>
        <button type="button" class="btn btn-default" disabled>
            Volgende
        </button>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <label>Gebruik:</label>
        <p>O.A. secundaire acties in formulieren</p>
    </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-link">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Button
        </button>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Anchor
        </a>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link download">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Downloaden
        </a>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link extern">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Lees verder
        </a>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-link" disabled>
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Disabled
        </button>
    </div>
</div>

<div class="row example">
    <div class="col-md-3 example-standard">
        <p><i>Standard</i></p>
        <button type="button" class="btn btn-link">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Lees verder
        </button>
    </div>
    <div class="col-md-3 example-hover">
        <p><i>Hover/Focus</i></p>
        <button type="button" class="btn btn-link">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Lees verder
        </button>
    </div>
    <div class="col-md-3 example-active">
        <p><i>Active</i></p>
        <button type="button" class="btn btn-link">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Lees verder
        </button>
    </div>
    <div class="col-md-3 example-">
        <p><i>Disabled</i></p>
        <button type="button" class="btn btn-link" disabled>
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            Lees verder
        </button>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <label>Gebruik:</label>
        <p>Lage prioriteit interacties</p>
    </div>
</div>
<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>
<div class="row">
  <div class="col-md-3">
    {{> '@button' label='Button' type='button' modifier='primary' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' }}
  </div>
  <div class="col-md-6">
    {{> '@anchor' label='Aanvraagformulier downloaden' modifier='btn btn-primary download' url='#' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {{> '@button' label='Disabled' type='button' modifier='primary' disabled=true }}
  </div>
</div>

<div class="row example">
  {{#each primary-buttons }}
    <div class="col-md-3 example-{{ state }}">
      <p><i>{{ example-label }}</i></p>
      {{> '@button' }}
    </div>
  {{/each}}
</div>

<div class="row">
  <div class="col-md-6">
    <label>Gebruik:</label>
    <p>De oranje kleur is een intense kleur om de aandacht te trekken. Maar teveel oranje is overweldigend voor de gebruiker en vermindert het gewenste effect van de button.</p>
    <p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
  </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Secundaire button</h2>
<div class="row">
  <div class="col-md-3">
    {{> '@button' label='Button' type='button' modifier='default' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Downloaden' modifier='btn btn-default download' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Lees verder' modifier='btn btn-default extern' url='#' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {{> '@button' label='Disabled' type='button' modifier='default' disabled=true }}
  </div>
</div>

<div class="row example">
  {{#each secundary-buttons }}
    <div class="col-md-3 example-{{ state }}">
      <p><i>{{ example-label }}</i></p>
      {{> '@button' }}
    </div>
  {{/each}}
</div>

<div class="row">
  <div class="col-md-6">
    <label>Gebruik:</label>
    <p>O.A. secundaire acties in formulieren</p>
  </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
  <div class="col-md-3">
    {{> '@button' label='Button' type='button' modifier='link' icon='icon fas fa-angle-right' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link' icon='icon fas fa-angle-right' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Downloaden' modifier='btn btn-link download' icon='icon fas fa-angle-right' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Lees verder' modifier='btn btn-link extern' icon='icon fas fa-angle-right' url='#' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {{> '@button' label='Disabled' type='button' modifier='link' icon='icon fas fa-angle-right' disabled=true }}
  </div>
</div>

<div class="row example">
  {{#each tertiary-buttons }}
    <div class="col-md-3 example-{{ state }}">
      <p><i>{{ example-label }}</i></p>
      {{> '@button' }}
    </div>
  {{/each}}
</div>

<div class="row">
  <div class="col-md-6">
    <label>Gebruik:</label>
    <p>Lage prioriteit interacties</p>
  </div>
</div>
primary-buttons:
  - example-label: Standard
    label: Call to action
    type: button
    modifier: primary
    state: standard
  - example-label: Hover/Focus
    label: Call to action
    type: button
    modifier: primary
    state: hover
  - example-label: Active
    label: Call to action
    type: button
    modifier: primary
    state: active
  - example-label: Disabled
    label: Call to action
    type: button
    modifier: primary
    disabled: true
secundary-buttons:
  - example-label: Standard
    label: Volgende
    type: button
    modifier: default
    state: standard
  - example-label: Hover/Focus
    label: Volgende
    type: button
    modifier: default
    state: hover
  - example-label: Active
    label: Volgende
    type: button
    modifier: default
    state: active
  - example-label: Disabled
    label: Volgende
    type: button
    modifier: default
    disabled: true
tertiary-buttons:
  - example-label: Standard
    label: Lees verder
    type: button
    modifier: link
    state: standard
    icon: icon fas fa-angle-right
  - example-label: Hover/Focus
    label: Lees verder
    type: button
    modifier: link
    icon: icon fas fa-angle-right
    state: hover
  - example-label: Active
    label: Lees verder
    type: button
    modifier: link
    icon: icon fas fa-angle-right
    state: active
  - example-label: Disabled
    label: Lees verder
    type: button
    modifier: link
    icon: icon fas fa-angle-right
    disabled: true
  • Content:
    .example {
      border-bottom: 2px solid $grijs-10;
      border-top: 2px solid $grijs-10;
      margin-bottom: $u3;
      margin-top: $u3;
      padding-bottom: $u3;
      padding-top: $u2;
    
      .btn {
        &.btn-primary {
          &:hover,
          &:focus {
            background-color: $btn-primary-bg;
            border-color: $btn-primary-bg;
          }
    
          &[disabled] {
            &,
            &:hover {
              background-color: $dso-button-primary-disabled-color;
              border-color: $dso-button-primary-disabled-color;
              color: $wit;
              opacity: 1;
            }
          }
        }
    
        &.btn-default {
          &:hover,
          &:focus {
            background-color: $wit;
            border-color: $grasgroen;
            color: $grasgroen;
          }
    
          &[disabled] {
            &,
            &:hover {
              background-color: $wit;
              border-color: $grasgroen-40;
              color: $grasgroen-40;
              opacity: 1;
            }
          }
        }
    
        &.btn-link {
          &:hover,
          &:focus {
            color: $grasgroen;
    
            .icon {
              background-color: $wit;
              border-color: $grasgroen;
              color: $grasgroen;
            }
          }
    
          &[disabled] {
            &,
            &:hover {
              color: $grasgroen-40;
              opacity: 1;
    
              .icon {
                background-color: $wit;
                border-color: $grasgroen-40;
                color: $grasgroen-40;
              }
            }
          }
        }
      }
    
      .example-hover .btn.btn-primary {
        background-color: $dso-button-primary-hover-color;
        border-color: $dso-button-primary-hover-color;
        color: $wit;
      }
    
      .example-active .btn.btn-primary {
        background-color: $dso-button-primary-active-color;
        border-color: $dso-button-primary-active-color;
        color: $wit;
      }
    
      .example-hover .btn.btn-default {
        background-color: $grasgroen;
        border-color: $grasgroen;
        color: $wit;
      }
    
      .example-active .btn.btn-default {
        background-color: $bosgroen;
        border-color: $bosgroen;
        color: $wit;
      }
    
      .example-hover .btn.btn-link {
        .icon {
          background-color: $grasgroen;
          border-color: $grasgroen;
          color: $wit;
        }
      }
    
      .example-active .btn.btn-link {
        color: $bosgroen;
    
        .icon {
          background-color: $bosgroen;
          border-color: $bosgroen;
          color: $wit;
        }
      }
    }
    
  • URL: /components/raw/buttons/_buttons.scss
  • Filesystem Path: components\03-forms\10-misc\01-buttons\_buttons.scss
  • Size: 2.4 KB

There are no notes for this item.