scinote-web/app/views/design_elements/_button.html.erb

<h1>Button</h1>
<div class="buttons flex flex-wrap">
  <div class="mb-4 primary mx-2 box-border mb-4">

    <label>Primary, large</label>

    <button type="button" class="block btn btn-primary btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary, medium</label>

    <button type="button" class="block btn btn-primary">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary, small</label>

    <button type="button" class="block btn btn-primary btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary, x-small</label>

    <button type="button" class="block btn btn-primary btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="secondary mx-2 box-border mb-4">

    <label>Secondary, large</label>

    <button type="button" class="block btn btn-secondary btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary, medium</label>

    <button type="button" class="block btn btn-secondary">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary, small</label>

    <button type="button" class="block btn btn-secondary btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary, x-small</label>

    <button type="button" class="block btn btn-secondary btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="tertiary mx-2 box-border mb-4">

    <label>Tertiary, large</label>

    <button type="button" class="block btn btn-tertiary btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary, medium</label>

    <button type="button" class="block btn btn-tertiary">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary, small</label>

    <button type="button" class="block btn btn-tertiary btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary, x-small</label>

    <button type="button" class="block btn btn-tertiary btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="delete mx-2 box-border mb-4">

    <label>Delete, large</label>

    <button type="button" class="block btn btn-danger btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete, medium</label>

    <button type="button" class="block btn btn-danger ">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete, small</label>

    <button type="button" class="block btn btn-danger btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete, x-small</label>

    <button type="button" class="block btn btn-danger btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="primary-disabled mx-2 box-border mb-4">

    <label>Primary, disabled large</label>

    <button type="button" class="block disabled btn btn-primary btn-lg" disabled>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary, disabled medium</label>

    <button type="button" class="block disabled btn btn-primary">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary, disabled small</label>

    <button type="button" class="block disabled btn btn-primary btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary, disabled x-small</label>

    <button type="button" class="block disabled btn btn-primary btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="secondary-disabled mx-2 box-border mb-4">

    <label>Secondary, disabled large</label>

    <button type="button" class="block disabled btn btn-secondary btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary, disabled medium</label>

    <button type="button" class="block disabled btn btn-secondary">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary, disabled small</label>

    <button type="button" class="block disabled btn btn-secondary btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary, disabled x-small</label>

    <button type="button" class="block disabled btn btn-secondary btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="tertiary mx-2 box-border mb-4">

    <label>Tertiary, disabled large</label>

    <button type="button" class="block disabled btn btn-tertiary btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary, disabled medium</label>

    <button type="button" class="block disabled btn btn-tertiary ">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary, disabled small</label>

    <button type="button" class="block disabled btn btn-tertiary btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary, disabled x-small</label>

    <button type="button" class="block disabled btn btn-tertiary btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="delete-disabled mx-2 box-border mb-4">

    <label>Delete, disabled large</label>

    <button type="button" class="block disabled btn btn-danger btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete, disabled medium</label>

    <button type="button" class="block disabled btn btn-danger">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete, disabled small</label>

    <button type="button" class="block disabled btn btn-danger btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete, disabled x-small</label>

    <button type="button" class="block disabled btn btn-danger btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
      <span><%= 'Button' %><span>
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="primary-icon mx-2 box-border mb-4">

    <label>Primary icon, large</label>

    <button type="button" class="block btn btn-primary icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary icon, medium</label>

    <button type="button" class="block btn btn-primary icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary icon, small</label>

    <button type="button" class="block btn btn-primary icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary icon, x-small</label>

    <button type="button" class="block btn btn-primary icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="secondary-icon mx-2 box-border mb-4">

    <label>Secondary icon, large</label>

    <button type="button" class="block btn btn-secondary icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary icon, medium</label>

    <button type="button" class="block btn btn-secondary icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary icon, small</label>

    <button type="button" class="block btn btn-secondary icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary icon, x-small</label>

    <button type="button" class="block btn btn-secondary icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="tertiary-icon mx-2 box-border mb-4">

    <label>Tertiary icon, large</label>

    <button type="button" class="block btn btn-tertiary icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary icon, medium</label>

    <button type="button" class="block btn btn-tertiary icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary icon, small</label>

    <button type="button" class="block btn btn-tertiary icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary icon, x-small</label>

    <button type="button" class="block btn btn-tertiary icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="primary-icon-disabled mx-2 box-border mb-4">

    <label>Primary icon disabled, large</label>

    <button type="button" class="block disabled btn btn-primary icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary icon disabled, medium</label>

    <button type="button" class="block disabled btn btn-primary icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary icon disabled, small</label>

    <button type="button" class="block disabled btn btn-primary icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Primary icon disabled, x-small</label>

    <button type="button" class="block disabled btn btn-primary icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="secondary-icon-disabled mx-2 box-border mb-4">

    <label>Secondary icon disabled, large</label>

    <button type="button" class="block disabled btn btn-secondary icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary icon disabled, medium</label>

    <button type="button" class="block disabled btn btn-secondary icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary icon disabled, small</label>

    <button type="button" class="block disabled btn btn-secondary icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Secondary icon disabled, x-small</label>

    <button type="button" class="block disabled btn btn-secondary icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="tertiary-icon-disabled mx-2 box-border mb-4">

    <label>Tertiary icon disabled, large</label>

    <button type="button" class="block disabled btn btn-tertiary icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary icon disabled, medium</label>

    <button type="button" class="block disabled btn btn-tertiary icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary icon disabled, small</label>

    <button type="button" class="block disabled btn btn-tertiary icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Tertiary icon disabled, x-small</label>

    <button type="button" class="block disabled btn btn-tertiary icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="delete-icon-disabled mx-2 box-border mb-4">

    <label>Delete icon disabled, large</label>

    <button type="button" class="block disabled btn btn-danger icon-btn btn-lg">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete icon disabled, medium</label>

    <button type="button" class="block disabled btn btn-danger icon-btn">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete icon disabled, small</label>

    <button type="button" class="block disabled btn btn-danger icon-btn btn-sm">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>


    <label>Delete icon disabled, x-small</label>

    <button type="button" class="block disabled btn btn-danger icon-btn btn-xs">
      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
    </button>

  </div>
  <div class="text-button mx-2 box-borders">
    <button class="block btn btn-light icon-btn sn-science-blue has-unseen">
      All
    </button>
  </div>
</div>

<style>
.has-unseen {
  &::after {
    align-items: center;
    background-color: var(--sn-science-blue);
    border-radius: .5rem;
    color: var(--sn-white);
    content: attr(data-unseen);
    display: flex;
    font-size: 10px;
    height: 1rem;
    justify-content: center;
    left: 1.25rem;
    min-width: 1rem;
    padding: 0 .25rem;
    position: absolute;
    top: 0;
    white-space: nowrap;
  }
}
</style>