@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

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
buttonType	String	No	primary	Sets the modifier theme for styling. Options: primary, secondary, outline, ghost, link.
buttonSize	String	No	medium	Sets the size. Options: large, medium, small, xsmall.
isFullWidth	Boolean	No	false	Controls whether or not to apply fullWidth modifier class
actionType	String	No	button	Sets the action button type. Options: button, submit, reset.
href	String	No	N/A	If provided, replaces Action button or Link button.
isIcon	Boolean	No	false	Sets the button style to be displayed like an icon .

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.