@justeat/f-button

f-button

The generic button component

---

Usage

1. Install the module using NPM or Yarn:

   yarn add @justeat/f-button
   

   npm install @justeat/f-button
   

2. Import the component

   You can import it in your Vue SFC like this (please note that styles have to be imported separately):

   import VueButton from '@justeat/f-button';
   import '@justeat/f-button/dist/f-button.css';
   
   export default {
       components: {
           VueButton
       }
   }
   

   If you are using Webpack, you can import the component dynamically to separate the vue-button bundle from the main bundle.client.js:

   import '@justeat/f-button/dist/f-button.css';
   
   export default {
       components: {
           ...
           VueButton: () => import(/* webpackChunkName: "vue-button" */ '@justeat/f-button')
       }
   }
   
   

3. Call the component in your template:

   <vue-button buttonType="secondary" buttonSize="small" isFullWidth/>
   

   Accepted properties:

   • buttonType - primary, secondary, outline, ghost, link, icon, default is primary
   • buttonSize - large, medium, small, xsmall, default is medium
   • isFullWidth - true/false, default is false

Development

Running below yarn commands from the component folder, starts a development server displaying a preview example of the component implementation.

# cd /packages/f-button
yarn install

# followed by
yarn demo

Documentation to be completed once module is in stable state.