DSO Component Library

# Buttons

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes
- WCAG

`

    <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>

    <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>

    <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 fa fa-angle-right" aria-hidden="true"></span>
          Button
        </button>
        </div>
        <div class="col-md-3">
            <a href="#" class="btn btn-link">
            <span class="icon fa 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 fa 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 fa fa-angle-right" aria-hidden="true"></span>
            Lees verder
        </a>
        </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 fa 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 fa 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 fa 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 fa 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>

    <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>

    <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 fa fa-angle-right' }}
      </div>
      <div class="col-md-3">
        {{> '@anchor' label='Anchor' modifier='btn btn-link' icon='icon fa fa-angle-right' url='#' }}
      </div>
      <div class="col-md-3">
        {{> '@anchor' label='Downloaden' modifier='btn btn-link download' icon='icon fa fa-angle-right' url='#' }}
      </div>
      <div class="col-md-3">
        {{> '@anchor' label='Lees verder' modifier='btn btn-link extern' icon='icon fa fa-angle-right' url='#' }}
      </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 fa fa-angle-right
      - example-label: Hover/Focus
        label: Lees verder
        type: button
        modifier: link
        icon: icon fa fa-angle-right
        state: hover
      - example-label: Active
        label: Lees verder
        type: button
        modifier: link
        icon: icon fa fa-angle-right
        state: active
      - example-label: Disabled
        label: Lees verder
        type: button
        modifier: link
        icon: icon fa fa-angle-right
        disabled: true

`
File:

- 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

- Handle: @buttons
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\10-misc\01-buttons\buttons.hbs
- References (2): @button, @anchor

There are no notes for this item.

### WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H42

Heading markup should be used if this content is intended as a heading.

`<p><i>Standard</i></p>`

### WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

`<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>`

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Default`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

`<a href="#" class="btn btn-primary"> Anchor </a>`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<button type="button" class="btn btn-primary"> Button </button>`