5.0.0 • Public • Published


Fozzie Bear

The generic button component

npm version CircleCI Coverage Status Known Vulnerabilities



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: {

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>


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.


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.


Start by cloning the repository and installing the required dependencies:

$ git clone git@github.com: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.



npm i @justeat/f-button

DownloadsWeekly Downloads






Unpacked Size

270 kB

Total Files


Last publish


  • gregory.palaci
  • arielfdr
  • dawidchar
  • roberto.santana
  • lizzie.turney
  • davidpn.11
  • dandel10n
  • faye.carter
  • mwh1989
  • kevinrodrigues
  • fozzie-bot
  • ashleynolan
  • simonsje
  • xander-marjoram
  • sergii.semenkiv
  • thomaswilliammcclean
  • benrwhite
  • robertellison
  • zlatin.ivanov
  • joshuang2332
  • oliversweb
  • andymayje
  • jamieomaguire
  • adammorr
  • lsphillips