DSO Toolkit | Component Library

Buttons 

<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">
            <span>Button</span>
        </button>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary" disabled>
            <span>Disabled</span>
        </button>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary"><span>Anchor</span></a>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm">
            <span>Small</span>
        </button>
    </div>
</div>

<div class="row example">
    <div class="col-md-6">
        <div class="dso-rich-content">
            <label>Gebruik:</label>
            <p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
        </div>
    </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">
            <span>Button</span>
        </button>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default" disabled>
            <span>Disabled</span>
        </button>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default"><span>Anchor</span></a>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm">
            <span>Small</span>
        </button>
    </div>
</div>

<div class="row example">
    <div class="col-md-6">
        <div class="dso-rich-content">
            <label>Gebruik:</label>
            <p>O.A. secundaire acties in formulieren</p>
        </div>
    </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">
            <svg class="di di-angle-right">
                <use href="../../dso-icons.svg#angle-right" />
            </svg><span>Button</span>
        </button>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link" disabled>
            <svg class="di di-angle-right">
                <use href="../../dso-icons.svg#angle-right" />
            </svg><span>Disabled</span>
        </button>
    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link"><svg class="di di-angle-right">
                <use href="../../dso-icons.svg#angle-right" />
            </svg><span>Anchor</span></a>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-2">
        <button type="button" class="btn btn-default">
            <span>.btn-default</span>
        </button>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn btn-link btn-align">
            <span>.btn-link.btn-align</span>
        </button>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-6">
        <button type="button" class="btn btn-link">
            <span>Link button</span>
        </button>
        <button type="button" title="Link button" class="btn btn-link">
            <span class="sr-only">Link button</span><svg class="di di-info">
                <use href="../../dso-icons.svg#info" />
            </svg>
        </button>
        <button type="button" class="btn btn-link">
            <svg class="di di-angle-left">
                <use href="../../dso-icons.svg#angle-left" />
            </svg><span>Link button</span>
        </button>
        <button type="button" class="btn btn-link">
            <span>Link button</span><svg class="di di-angle-right">
                <use href="../../dso-icons.svg#angle-right" />
            </svg>
        </button>
    </div>
</div>

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

<div class="row example">
  <div class="col-md-6">
    <div class="dso-rich-content">
      <label>Gebruik:</label>
      <p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
    </div>
  </div>
</div>

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

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

<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
  <div class="col-md-3">
    {{> '@button' type='button' label='Button' modifier='link' icon='angle-right' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='link' icon='angle-right' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link' icon='angle-right' url='#' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-2">
    {{> '@button' type='button' label='.btn-default' modifier='default' url='#' }}
  </div>
  <div class="col-md-2">
    {{> '@button' type='button' label='.btn-link.btn-align' modifier='link btn-align' url='#' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-6">
    {{> '@button' type='button' label='Link button' modifier='link' url='#' }}
    {{> '@button' type='button' label='Link button' modifier='link' icon='info' iconOnly=true url='#' }}
    {{> '@button' type='button' label='Link button' modifier='link' icon='angle-left' url='#' }}
    {{> '@button' type='button' label='Link button' modifier='link' iconAfter='angle-right' url='#' }}
  </div>
</div>

<div class="row example">
  <div class="col-md-6">
    <div class="dso-rich-content">
      <label>Gebruik:</label>
      <p>Lage prioriteit interacties</p>
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • 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 {
        background-color: $dso-button-primary-hover-color;
        border-color: $dso-button-primary-hover-color;
      }

      &[disabled] {
        &,
        &:hover {
          background-color: $dso-button-primary-disabled-color;
          border-color: $dso-button-primary-disabled-color;
          color: $wit;
          opacity: 1;
        }
      }
    }

    &.btn-default {
      &:hover {
        background-color: $dso-button-default-color;
        border-color: $dso-button-default-hover-color;
        color: $dso-button-default-hover-color;
      }

      &[disabled] {
        &,
        &:hover {
          background-color: $wit;
          border-color: $grasgroen-40;
          color: $grasgroen-40;
          opacity: 1;
        }
      }
    }

    &.btn-link {
      &:hover {
        color: $grasgroen;

        > svg.di {
          background-color: $wit;
          border-color: $grasgroen;
          color: $grasgroen;
        }
      }

      &[disabled] {
        &,
        &:hover {
          color: $grasgroen-40;
          opacity: 1;

          > svg.di {
            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: $dso-button-default-active-color;
  border-color: $dso-button-default-active-color;
  color: $wit;
}

.example-hover .btn.btn-link {
  > svg.di {
    background-color: $grasgroen;
    border-color: $grasgroen;
    color: $wit;
  }
}

.example-active .btn.btn-link {
  color: $bosgroen;

  > svg.di {
    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.3 KB

There are no notes for this item.