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.

When to attribute is set, it uses Vue Router router-link component, this helps solve the issue with App router links reloading the page upon navigation. Note for it to work properly, it is required for the host project to have vue-router installed and set.

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.n.b. Only certain buttonType values are allowed in combination with the isIcon prop.Options (when isIcon: false): primary, secondary, outline, ghost, link.Options (when isIcon: true): primary, secondary, ghost, ghostTertiary, inverse, ghostInverse| | buttonSize | String | No | medium | Sets the button size.Options (when isIcon: true): large, medium, small-expressive, small-productive, xsmall.Options (when isIcon: false): 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). | | href | String | No | null | When set, generated markup is Anchor element e.g. | | to | String, Object | No | null | When set, generated markup is Anchor element e.g. . Additionally it allows to work with host App defined routes. | |hasIcon | String, Boolean | No | false | When set, allows to add an icon which you can pass via named slot (leading-icon/trailing-icon).Options: leading and trailing. |

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 [email protected]: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.