Back to Floating Action Button-guidelines

CSS ComponentThe latest version of this package is: 17.0.1, Opens in new window


This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/floating-action-button@17.0.1

Table of Contents

Edit this section, Opens in new window


Required markup

<button class="if floating-action-button"></button>


<button class="if floating-action-button primary"></button>
Primary plus
<button class="if floating-action-button primary plus"></button>

Back to top

<button aria-label="Back to top" class="if floating-action-button back-to-top"></button>

When using the back to top version, you need the JS from @ids-js/floating-action-button.

Customer service

<button class="if floating-action-button customer-service"></button>
Edit this section, Opens in new window


Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • ๐Ÿ› Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • ๐Ÿ› Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • ๐Ÿ’ก Change focus styles, remove whatinput (75fd31b) , closes #505205

  • rebuild and reinstall (f9fb687)

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)


  • ๐Ÿงจ The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
  • ๐Ÿงจ Util is now renamed to Utils
  • ๐Ÿงจ We have now changed the navigation structure for the documentation site. Please update any saved links!
  • ๐Ÿงจ Navigation structure has now changed. Please see release notes!
  • ๐Ÿงจ The JS script for back to top button is now moved into a separate package, @ids-js/floating-action-button

Documentation Updates

  • โœ๏ธ Make variations tables more condensed (4344a3a)

  • โœ๏ธ Move position of the quick links (5cb0897)

  • โœ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579

Code Refactoring

  • ๐Ÿ’ก Categorize components (9965266) , closes #490579

  • ๐Ÿ’ก Reduce spacing tokens, use correct size tokens (97aa461)

  • ๐Ÿ’ก Rename scope and repository (3ea5423)

  • ๐Ÿ’ก Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

  • ๐Ÿค– Prune changelogs (2c660c2)

  • ๐Ÿค– Rename util to utils (f78721f)

  • ๐Ÿค– Separate out CSS and JS documentation (d502656) , closes #467386

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.11.0 (2021-10-19)


  • ๐ŸŽธ Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • ๐Ÿ› Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Documentation Updates

  • โœ๏ธ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

bootstrap (d23e139)

  • ๐Ÿค– Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

  • ๐Ÿค– Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

12.13.0 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Use correct zindexes (1ced974) , closes #454896

  • ๐Ÿค– Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • ๐Ÿค– Reinstall (e660696)

  • ๐Ÿค– Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)

  • ๐Ÿ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)


  • ๐Ÿงจ All of the mixins have now been renamed
  • ๐Ÿงจ Notification is now renamed to Alert Banner
  • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design updated component named Header
  • ๐Ÿงจ Footer is now renamed to Global Footer
  • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts


  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

  • ๐Ÿ› Update references (c08f107)

Code Refactoring

  • ๐Ÿ’ก Rename and consolidate mixins (67cf470) , closes #268081

  • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508

  • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239) , closes #336508

  • ๐Ÿ’ก Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

  • ๐Ÿค– Convert util tokens from theo to style-dictionary (99fb4f5)

  • ๐Ÿค– Finalize breakpoint token conversion (f50ea0d)

  • ๐Ÿค– Make sure all components are named with capital first (08e9a26)

  • ๐Ÿค– PR fixes (87bdedd)

  • ๐Ÿค– Reinstall (2c763ea)

  • ๐Ÿค– Reinstall (69e1a5b)

  • ๐Ÿค– Update all design token references (c640d15)

  • ๐Ÿค– Update all example references to old menu (81205ad)

  • ๐Ÿค– Update references to util variables (b79ec36)

  • ๐Ÿค– Updating links (70f166e)

rebuild (7edb430)

  • ๐Ÿค– Rename Change Log to Changelog (d412e63)

  • ๐Ÿค– Remove all references to sketch (35fc554) , closes #339203

  • ๐Ÿค– Update package fields (200c0af)

  • reinstall packages (fcfacf4)

8.1.2 (2020-12-22)

Bug Fixes

  • ๐Ÿ› Set position fixed on button when active (698bf4b) , closes #328258

7.8.2 (2020-12-01)

Bug Fixes

  • ๐Ÿ› Adjust positioning and animation of fabs (267a2c5) , closes #318389

Code Refactoring

  • ๐Ÿ’ก Rename keyframe animations (375dd44)

7.5.0 (2020-11-23)


7.1.0 (2020-11-16)


  • ๐ŸŽธ Add support for auto generation of components index (9444600) , closes #309650

6.43.3 (2020-11-03)

Miscellaneous chores

  • ๐Ÿค– Manually set version (e4d9ca6)

  • ๐Ÿค– Rename repository from guybrush to if-design-system (c18bccd)

6.38.0 (2020-10-19)

Documentation Updates

  • โœ๏ธ Remove documentation about info floating action button (65df136)

6.37.0 (2020-10-15)


  • ๐ŸŽธ Add new component floating-action-button (dccca19)

Documentation Updates

  • โœ๏ธ Update javascript implementation example, back-to-top (98d5391)

  • ๐Ÿค– Reinstall (377ce00)

  • ๐Ÿค– Remove info floating action button (e03d299)

reinstall (d2b1534)

reinstall (2cefe15)

Edit this section, Opens in new window
Contact us, Opens in new window