@justeat/f-button

f-button

The generic button component

---

Usage

Installation

This package can be installed using npm or yarn:

yarn add @justeat/f-button

npm install @justeat/f-button

Vue Applications

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

import FButton from '@justeat/f-button';
import '@justeat/f-button/dist/f-button.css';

export default {
    components: {
        FButton
    }
}

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

import '@justeat/f-button/dist/f-button.css';

export default {
    components: {
        ...
        FButton: () => import(/* webpackChunkName: "f-button" */ '@justeat/f-button')
    }
}

Call the component in your template:

<f-button buttonType="secondary" buttonSize="small">Button Text</f-button>

<f-button buttonType="secondary" buttonSize="small" isIcon="true"><my-icon /><f-button>

Configuration

If the f-button component has an href attribute set, it will automatically change the markup of this component to be an <a> tag, while still visually looking like a button component. If no href is set, it will render a <button> tag.

Props

f-button has a number of props that allow you to customise its functionality.

The props that can be defined are as follows:

Prop	Type	Required	Default	Description
actionType	String	No	button	Sets the action button type. Options: button, submit, reset.
buttonType	String	No	primary	Sets the modifier theme for styling. Options: primary, secondary, outline, ghost, link.
buttonSize	String	No	medium	Sets the button size. Options: large, medium, small, xsmall.
isFullWidth	Boolean	No	false	Controls whether or not to apply fullWidth modifier class
isIcon	Boolean	No	false	When true, changes the button style to be displayed as an Icon Button (Icon, with no text).
isLoading	Boolean	No	false	When true, replaces the text with a loading spinner, and it prevents any further interaction with the button (e.g. click).

CSS Classes

f-button has its own styles which are scoped to the component using CSS modules to prevent conflicts with existing styles on the page.

Development

Start by cloning the repository and installing the required dependencies:

$ git clone [e-mail]:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn

Change directory to the f-button package:

$ cd packages/components/atoms/f-button

Running storybook

Storybook can be used to develop new and existing components.

To start storybook:

Please ensure you are in the f-button directory as outlined in the above instructions.

# cd to the storybook package
$ cd ../../../storybook

# Run storybook
$ yarn storybook:serve

This will build and serve storybook at http://localhost:8080.

Changelog

v1.6.0

March 30, 2020

Added

• Added the eslint-import-resolver-webpack so that eslint can understand webpack special characters such as @ used in import paths

Changed

• Minor package updates