Button Component

npm version

About

Install

This component is distributed with npm. After installing npm, you can install the vf-button with this command.

$ yarn add --dev @visual-framework/vf-button

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-button/index.scss";

Make sure you import Sass requirements along with the modules.

File system location: components/vf-button

Variants

Variant: Primary live element

Nunjucks demo

{% render '@vf-button--default', {
  "component-type": "element",
  "text": "a primary button",
  "theme": "primary"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary">a primary button</button>

Assets

Variant: Secondary live element

Nunjucks demo

{% render '@vf-button--secondary', {
  "component-type": "element",
  "text": "a secondary button",
  "theme": "secondary"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--secondary">a secondary button</button>

Assets

Variant: Tertiary live element

Nunjucks demo

{% render '@vf-button--tertiary', {
  "component-type": "element",
  "text": "a tertiary button",
  "theme": "tertiary"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--tertiary">a tertiary button</button>

Assets

Variant: Small live element

Nunjucks demo

{% render '@vf-button--small', {
  "component-type": "element",
  "text": "a small button",
  "theme": "primary",
  "size": "sm"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary vf-button--sm ">a small button</button>

Assets

Variant: Regular live element

Nunjucks demo

{% render '@vf-button--regular', {
  "component-type": "element",
  "text": "a regular button",
  "theme": "primary"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary">a regular button</button>

Assets

Variant: Large live element

Nunjucks demo

{% render '@vf-button--large', {
  "component-type": "element",
  "text": "a large button",
  "theme": "primary",
  "size": "lg"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary vf-button--lg ">a large button</button>

Assets

Variant: Pill live element

Nunjucks demo

{% render '@vf-button--pill', {
  "component-type": "element",
  "text": "a pill style",
  "theme": "primary",
  "style": [
    "pill"
  ]
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary vf-button--pill">a pill style</button>

Assets

Variant: Rounded live element

Nunjucks demo

{% render '@vf-button--rounded', {
  "component-type": "element",
  "text": "a rounded style",
  "theme": "primary",
  "style": [
    "rounded"
  ]
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary vf-button--rounded">a rounded style</button>

Assets

Variant: Outline live element

Nunjucks demo

{% render '@vf-button--outline', {
  "component-type": "element",
  "text": "an outline style",
  "theme": "primary",
  "style": [
    "outline"
  ]
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary vf-button--outline">an outline style</button>

Assets

Variant: Link live element

Nunjucks demo

{% render '@vf-button--link', {
  "component-type": "element",
  "text": "a link variant",
  "button_href": "JavaScript:Void(0);",
  "theme": "primary"
} %}

Sample output

Sample output as HTML

 <button class="vf-button vf-button--primary">a link variant</button>

Assets

All components in this design system

This page is part of the components section.