Button

Button allows user to perform action with a click or a tap.

Default

The default style of the button

Code


                                  <button class="button button-primary button-text">Default</button>
                                  <button class="button button-text button-disabled">Disabled</button>

Colors

The Color style of the button

Code


                                  <button class="button button-primary button-text">Primary</button>
<button class="button button-Secondary button-text">Secondary</button>
<button class="button button-text button-Success">Success</button>
<button class="button button-Warning button-text">Warning</button>
<button class="button button-Error button-text">Error</button>

Color Shadows

The Color Shadow style of the button

Code


                                  <button class="button button-primary button-text primary-shadow">
    Primary
  </button>
  <button class="button button-Secondary button-text secondary-shadow">
    Secondary
  </button>
  <button class="button button-text button-Success success-shadow">
    Success
  </button>
  <button class="button button-Warning button-text warning-shadow">
    Warning
  </button>
  <button class="button button-Error button-text error-shadow">
    Error
  </button>

Outline

The Outline style of the button

Code


                                  <button class="button primary-outline">Primary</button>
        <button class="button secondary-outline">Secondary</button>
        <button class="button success-outline">Success</button>
        <button class="button warning-outline">Warning</button>
        <button class="button error-outline">Error</button>

Link Style Buttons

The Link style of the button

Google SubLink ImportantLink

Code


                                  <a class="button-link link-primary" href="google.com">Google</a>
                                  <a class="button-link link-secondary" href="google.com">SubLink</a>
                                  <a class="button-link link-error" href="google.com">ImportantLink</a>

Icon and FAB Buttons

The Icon and Floating action style of the button

Code


                                  <button class="button button-text button-Warning">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="14"
      fill="currentColor"
    >
      <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
      <path
        fill-rule="evenodd"
        d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
        clip-rule="evenodd"
      />
    </svg>
    Archive
  </button>
  <button class="button button-Error button-text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
  <button class="button-fab button-Error button-text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
        clip-rule="evenodd"
      />
    </svg>
  </button>