Verndale UI Components

Button component: Small 

<button type="button" class="btn btn--primary btn--small">
      Buy Now
  </button>
 
{{#ifCond type "==" "link"}}
  <a href="#" class="btn btn--{{className}}{{#ifCond style "==" "outline"}} btn--outline{{/ifCond}}{{#ifCond size "==" "small"}} btn--small{{/ifCond}}{{#if disabled}} btn--disabled{{/if}}">
    {{#if icon}}
      {{>svg name=icon.name viewBox=icon.viewBox}}
    {{/if}}
    {{label}}
  </a>
{{else}}
  <button type="{{type}}" class="btn btn--{{className}}{{#ifCond style "==" "outline"}} btn--outline{{/ifCond}}{{#ifCond size "==" "small"}} btn--small{{/ifCond}}"{{#if disabled}} disabled{{/if}}>
    {{#if icon}}
      {{>svg name=icon.name viewBox=icon.viewBox}}
    {{/if}}
    {{label}}
  </button>
{{/ifCond}}
 
{
  "label": "Buy Now",
  "type": "button",
  "className": "primary",
  "size": "small"
}
  • Content: 
    @import
"../theme",
"variables";

.btn {
  appearance: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  min-width: 200px;
  padding: 12px 24px 14px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;

  svg {
    height: 30px;
    margin-right: 17px;
    transition: fill 0.2s ease-in-out;
    width: 30px;
  }

  &.btn--primary {
    background-color: $btn-primary-background;
    color: $btn-primary-text-color;

    svg {
      fill: $btn-primary-text-color;
    }

    &:hover,
    &:focus {
      background-color: $btn-primary-focus-background;
    }

    &.btn--outline {
      background-color: transparent;
      border: $btn-primary-outline-border;
      color: $btn-primary-outline-text-color;

      svg {
        fill: $btn-primary-outline-text-color;
      }

      &:hover,
      &:focus {
        background-color: $btn-primary-outline-focus-background;
        border: $btn-primary-outline-focus-border;
        color: $btn-primary-outline-focus-text-color;

        svg {
          fill: $btn-primary-outline-focus-text-color;
        }
      }
    }

    &:disabled,
    &.btn--disabled {
      background-color: $btn-primary-disabled-background;
      color: $btn-primary-disabled-text-color;
      pointer-events: none;
    }
  }

  &.btn--secondary {
    background-color: $btn-secondary-background;
    color: $btn-secondary-text-color;

    svg {
      fill: $btn-secondary-text-color;
    }

    &:hover,
    &:focus {
      background-color: $btn-secondary-focus-background;
      color: $btn-secondary-focus-text-color;

      svg {
        fill: $btn-secondary-focus-text-color;
      }
    }

    &.btn--outline {
      background-color: transparent;
      border: $btn-secondary-outline-border;
      color: $btn-secondary-outline-text-color;

      svg {
        fill: $btn-secondary-outline-text-color;
      }

      &:hover,
      &:focus {
        background-color: $btn-secondary-outline-focus-background;
        color: $btn-secondary-outline-focus-text-color;

        svg {
          fill: $btn-secondary-outline-focus-text-color;
        }
      }
    }

    &:disabled,
    &.btn--disabled {
      background-color: transparent;
      border: $btn-secondary-disabled-border;
      color: $btn-secondary-disabled-text-color;
      pointer-events: none;
    }
  }

  &.btn--small {
    font-size: 14px;
    min-width: 100px;
    padding: 5px 20px;
  }
}
  • URL: /components/raw/button/_styles.scss
  • Filesystem Path: src/components/button/_styles.scss
  • Size: 2.6 KB
  • Content: 
    // Primary button
$btn-primary-background: map-get($theme-colors, "primary") !default;
$btn-primary-focus-background: map-get($theme-colors, "primary-dark") !default;
$btn-primary-text-color: #FFF !default;
$btn-primary-outline-border: solid 1px map-get($theme-colors, "primary") !default;
$btn-primary-outline-text-color: map-get($theme-colors, "primary") !default;
$btn-primary-outline-focus-background: map-get($theme-colors, "primary-dark") !default;
$btn-primary-outline-focus-border: solid 1px map-get($theme-colors, "primary-dark") !default;
$btn-primary-outline-focus-text-color: #FFF !default;
$btn-primary-disabled-background: rgba(6, 132, 123, 0.2) !default;
$btn-primary-disabled-text-color: map-get($theme-colors, "primary-light") !default;

// Secondary button
$btn-secondary-background: #FFF !default;
$btn-secondary-focus-background: map-get($theme-colors, "primary") !default;
$btn-secondary-focus-text-color: #FFF !default;
$btn-secondary-text-color: map-get($theme-colors, "primary") !default;
$btn-secondary-outline-border: solid 1px #FFF !default;
$btn-secondary-outline-text-color: #FFF !default;
$btn-secondary-outline-focus-background: #FFF !default;
$btn-secondary-outline-focus-text-color: map-get($theme-colors, "primary-dark") !default;
$btn-secondary-disabled-border: solid 1px map-get($theme-colors, "primary-light") !default;
$btn-secondary-disabled-text-color: map-get($theme-colors, "primary-light") !default;
  • URL: /components/raw/button/_variables.scss
  • Filesystem Path: src/components/button/_variables.scss
  • Size: 1.4 KB

Button

This component can be both a <button> and a link (<a>) that looks like a button. There are two different themes to this button. One is a light button (primary) that will be used on darker backgrounds, and a lighter button (secondary) that will be used on darker background.

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import "../../node_modules/@verndale/front-end-components/lib/button/styles";

Copy and paste to your project any of the markup in the button variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. The button has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

// Primary button
$btn-primary-background
$btn-primary-focus-background
$btn-primary-text-color
$btn-primary-outline-border
$btn-primary-outline-text-color
$btn-primary-outline-focus-background
$btn-primary-outline-focus-border
$btn-primary-outline-focus-text-color
$btn-primary-disabled-background
$btn-primary-disabled-text-color

// Secondary button
$btn-secondary-background
$btn-secondary-focus-background
$btn-secondary-focus-text-color
$btn-secondary-text-color
$btn-secondary-outline-border
$btn-secondary-outline-text-color
$btn-secondary-outline-focus-background
$btn-secondary-outline-focus-text-color
$btn-secondary-disabled-border
$btn-secondary-disabled-text-color

You always need to set your overrides before the import of you component - for example:

$btn-primary-background: #808080;
$btn-primary-focus-background: #101010;

@import "../../node_modules/@verndale/front-end-components/lib/button/styles";