Rahvusarhiiv

disainisüsteem

Nupud

Esmatähtis

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center text-sm py-2 px-4
      font-medium text-center text-white bg-gray-900 rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-700 focus:active:bg-gray-800
  ">
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center text-base py-3 px-5
      font-medium text-center text-white bg-gray-900 rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-700 focus:active:bg-gray-800
  ">
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 px-6 text-lg
      font-medium text-center text-white bg-gray-900 rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-700 focus:active:bg-gray-800
  ">
    Large
  </button>
</div>

Esmatähtis ikooniga

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center py-2 pl-2 pr-3 text-sm
      font-medium text-center text-white bg-gray-900 rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-700 focus:active:bg-gray-800
  ">
    <svg class="h-3 w-3 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 pl-3 pr-4
      font-medium text-base text-center text-white bg-gray-900 rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-700 focus:active:bg-gray-800
  ">
    <svg class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 pr-4 pl-5 pr-6 text-lg
      font-medium text-center text-white bg-gray-900 rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-700 focus:active:bg-gray-800
  ">
    <svg class="h-5 w-5 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Large
  </button>
</div>

Teisejärguline

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center py-2 text-sm px-4
      font-medium text-center text-gray-900 bg-white rounded cursor-pointer
      border border-solid border-gray-200 focus:active:border-gray-900
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100 focus:active:bg-gray-200
  ">
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 px-5
      font-medium text-base text-center text-gray-900 bg-white rounded cursor-pointer
      border border-solid border-gray-200 focus:active:border-gray-900
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100 focus:active:bg-gray-200
  ">
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 px-6 text-lg
      font-medium text-center text-gray-900 bg-white rounded cursor-pointer
      border border-solid border-gray-200 focus:active:border-gray-900
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100 focus:active:bg-gray-200
  ">
    Large
  </button>
</div>

Teisejärguline ikooniga

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center py-2 pl-2 pr-3 text-sm
      font-medium text-center text-gray-900 bg-white rounded cursor-pointer
      border border-solid border-gray-200 focus:active:border-gray-900
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100 focus:active:bg-gray-200
  ">
    <svg class="h-3 w-3 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 pl-3 pr-4 text-base
      font-medium text-center text-gray-900 bg-white rounded cursor-pointer
      border border-solid border-gray-200 focus:active:border-gray-900
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100 focus:active:bg-gray-200
  ">
    <svg class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 pl-4 pr-5 text-lg
      font-medium text-center text-gray-900 bg-white rounded cursor-pointer
      border border-solid border-gray-200 focus:active:border-gray-900
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100 focus:active:bg-gray-200
  ">
    <svg class="h-5 w-5 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Large
  </button>
</div>

Kolmandane

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center py-2 px-4 text-sm
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 px-5 text-base
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 px-6 text-lg
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    Large
  </button>
</div>

Kolmandane ikooniga

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 pl-2 pr-3 text-sm
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-3 w-3 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 pl-3 pr-4 text-base
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 pl-2 pr-3 text-lg
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-5 w-5 mr-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"/>
    </svg>
    Large
  </button>
</div>

Kolmandane tumedal taustal

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      inline-flex flex-nowrap items-center py-2 text-sm px-4
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    Small
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-3 px-4
      font-medium text-base text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    Base
  </button>
  <button type="button" class="
      inline-flex flex-nowrap items-center py-4 px-6 text-lg
      font-medium text-center text-gray-900 bg-transparent rounded cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    Large
  </button>
</div>

Ikoon

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      rounded p-2 text-base font-medium cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded p-2.5 text-base font-medium cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded p-3 text-base font-medium cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"></path>
    </svg>
  </button>
</div>

Ikoon (ümmarguse kursoritaustaga)

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      rounded-full p-2 text-base font-medium cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded-full p-2.5 text-base font-medium cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded-full p-3 text-base font-medium cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-gray-100/60 focus:active:bg-gray-100/80
  ">
    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
    </svg>
  </button>
</div>

Ikoon tumedal taustal

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      rounded p-2 font-medium bg-transparent cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h6v-6h2v6h6v-8h3L19,9.3z M17,18h-2v-6H9v6H7v-7.81l5-4.5l5,4.5V18z"></path>
      <path d="M10,10h4c0-1.1-0.9-2-2-2S10,8.9,10,10z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded p-2.5 font-medium bg-transparent cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h6v-6h2v6h6v-8h3L19,9.3z M17,18h-2v-6H9v6H7v-7.81l5-4.5l5,4.5V18z"></path>
      <path d="M10,10h4c0-1.1-0.9-2-2-2S10,8.9,10,10z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded p-3 font-medium bg-transparent cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h6v-6h2v6h6v-8h3L19,9.3z M17,18h-2v-6H9v6H7v-7.81l5-4.5l5,4.5V18z"></path>
      <path d="M10,10h4c0-1.1-0.9-2-2-2S10,8.9,10,10z"></path>
    </svg>
  </button>
</div>

Ikoon tumedal taustal (ümmarguse kursoritaustaga)

HTML 
<div class="flex items-center space-x-10">
  <button type="button" class="
      rounded-full p-2 font-medium bg-transparent cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded-full p-2.5 font-medium bg-transparent cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"></path>
    </svg>
  </button>
  <button type="button" class="
      rounded-full p-3 font-medium bg-transparent cursor-pointer border-none
      no-underline hover:focus:active:no-underline focus:active:ring-2 focus:active:ring-green-300
      hover:bg-white/60 focus:active:bg-white
  ">
    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
      <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"></path>
    </svg>
  </button>
</div>