Back to Button-guidelines

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

Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.

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/button@14.0.0

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

Primary button

The primary button is the preferred call-to-action button. The button is used to dictate what the primary action of a view is. Never use more than one primary button for one view.

<button type="button" class="if button primary">
  Button
</button>

Secondary button

Secondary buttons are, secondary. They contain actions that are important, but not the primary action.

<button type="button" class="if button [secondary]">
  Button
</button>

Text button

Text buttons are buttons for actions that is of minimum importance.

<button type="button" class="if button text">
  Button
</button>

Info button

The info button is used for the rare occasion when you want a button that stands out, when the primary button is not natural to use. Use sparingly.

<button type="button" class="if button info">
  Button
</button>

With icons

An outlined BL 1, BLUE icon in a secondary button.

An outlined BE 5, LIGHTEST BEIGE icon in a primary button.

An outlined BL 1, BLUE icon in a text button.

An outlined BE 5, LIGHTEST BEIGE icon in an info button.

A BE 5, LIGHTEST BEIGE loader in a primary button.

<button type="button" class="if button">
  <span aria-hidden="true" class="if icon [product|symbol|ui] <iconName>"></span>
  Button with icon
</button>
Edit this section, Opens in new window

Changelog

Change Log

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

14.0.0 (2021-11-09)

chore

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

Code Refactoring

  • ๐Ÿ’ก Rename scope and repository (3ea5423)
  • ๐Ÿ’ก Use new navigation structure for documentation (415aee5), closes #490579

Documentation

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

BREAKING CHANGES

  • ๐Ÿงจ 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!

13.11.0 (2021-10-19)

Features

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

13.9.1 (2021-09-28)

Bug Fixes

13.3.0 (2021-09-02)

Bug Fixes

  • add back missing imports (574ec6b)

12.13.1 (2021-08-11)

Bug Fixes

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

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
  • ๐Ÿ› We don't need lastModified (e458a12)

12.2.1 (2021-05-10)

Bug Fixes

  • ๐Ÿ› Decrease size of button (065f78a)
  • ๐Ÿ› Do not let buttons go 100% after 400px breakpoint (eb8a110), closes #383578
  • ๐Ÿ› Use a transparent border on text buttons (52dea77)
  • ๐Ÿ› Use correct spacing according to grid (2fb0e45)

12.0.0 (2021-05-05)

Bug Fixes

  • ๐Ÿ› Update references (c08f107)

Code Refactoring

  • ๐Ÿ’ก Remove old util var files and remove icon button (1e5e3d9), closes #336508
  • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
  • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
  • ๐Ÿ’ก Rename Notification to Alert Banner (8b4e48d), closes #336508

Features

  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508
  • ๐ŸŽธ Rename tertiary button to text button (4031c22)

BREAKING CHANGES

  • ๐Ÿงจ 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

  • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • ๐Ÿงจ Icon buttons are now removed from the button component, into a separate

component: Icon button.

11.0.0 (2021-03-15)

Bug Fixes

  • ๐Ÿ› Use last-of-type insted of last-child for buttons (1b8ab74)

10.2.1 (2021-03-05)

Bug Fixes

  • ๐Ÿ› Use correct styling for tertiary button (00d1665), closes #352695

9.1.1 (2021-01-25)

Bug Fixes

  • ๐Ÿ› Revert default styling of button without flags (b31ef6e), closes #335077

7.8.0 (2020-11-30)

Features

  • ๐ŸŽธ Add support for icon buttons/controls (38c7cc4)

7.7.0 (2020-11-24)

Features

  • ๐ŸŽธ add disabled button loading state (69a48e5), closes #307542

7.1.0 (2020-11-16)

Features

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

6.36.0 (2020-10-12)

Features

  • ๐ŸŽธ Add updated focus styling for buttons (46bffdf)

6.26.11 (2020-07-15)

Bug Fixes

  • ๐Ÿ› Fix hover for primary CTA button, increase box-shadow (e90000b)

6.25.2 (2020-07-08)

Bug Fixes

  • ๐Ÿ› Fix hover state for primary CTA button (0164b07)
  • ๐Ÿ› Use correct heading classes in examples (52c1e2d)

6.22.0 (2020-07-01)

Features

  • ๐ŸŽธ Add new color categories, update documentation (5496822)

6.18.0 (2020-05-26)

Bug Fixes

  • ๐Ÿ› Fix missing preprocessor styles for button (3a8c668)

6.16.1 (2020-05-20)

Bug Fixes

  • ๐Ÿ› Fix routing for dev server (295db6e)

6.15.0 (2020-05-07)

Bug Fixes

  • ๐Ÿ› Make CTA buttons 100% width, but still have max 320px (e7e8a50)

6.10.2 (2020-04-16)

Bug Fixes

  • ๐Ÿ› Fix responsive margins for buttons (997b75d), closes #232515

6.4.2 (2020-04-03)

Bug Fixes

  • ๐Ÿ› Change min-width none to initial (f661bea)
  • ๐Ÿ› Remove misuse of unset, none, auto and initial (87624d7)
  • ๐Ÿ› Use initial instead of none and unset (d75bc65)
  • ๐Ÿ› use min-height none instead of unset (f6c335b)

5.3.0 (2020-03-18)

Bug Fixes

  • ๐Ÿ› Set button and input height to 48, down from 56px (f00db7d)

5.1.0 (2020-03-15)

Bug Fixes

  • ๐Ÿ› Adjust maxwidts for buttons (59724a8)
  • ๐Ÿ› Remove bold on hover for tertiary buttons (642570e)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.153 (2020-03-06)

Bug Fixes

  • ๐Ÿ› Fix border issues with tertiary button on hover (3f47540)

5.0.1-alpha.151 (2020-03-05)

Features

  • ๐ŸŽธ Add new typography rule for captions. Refactor weights (a033f4e)

5.0.1-alpha.150 (2020-03-05)

Features

  • ๐ŸŽธ Make CTA (large) buttons to constant 320px width (4b6d120)

5.0.1-alpha.133 (2020-02-24)

Bug Fixes

  • ๐Ÿ› Adjust spacing for adjacent tertiary buttons (4388973)

5.0.1-alpha.116 (2020-02-06)

Bug Fixes

  • ๐Ÿ› Update preprocessor files for scss and less (6501093)

5.0.1-alpha.111 (2020-01-21)

Bug Fixes

  • ๐Ÿ› Use box-shadow of 1px with correct color on hover (0c6c3b6)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • ๐Ÿ› Make sure 3px borders stay contained (f10e3df)
  • ๐Ÿ› Remove duplicate support color (a7f346d)

5.0.1-alpha.109 (2020-01-20)

Bug Fixes

  • ๐Ÿ› Fix mobile button stacking (80e9d9f)

5.0.1-alpha.107 (2020-01-15)

Bug Fixes

  • ๐Ÿ› No need to use paths for gulp-less in button (bd08f08)

Features

  • ๐ŸŽธ Add button.less (9769183)

5.0.1-alpha.105 (2020-01-13)

Bug Fixes

  • ๐Ÿ› Buttons have 100% width in mobile (7145157)
  • ๐Ÿ› Use correct font-weight on hover for tertiary buttons (d95bbee)

5.0.1-alpha.87 (2019-12-04)

Bug Fixes

  • ๐Ÿ› Use correct color for buttons (b6a938b)
  • ๐Ÿ› Use correct colors for disable info button (d77f1ed)
  • ๐Ÿ› Use correct font-weight (ee8a5f7)

Features

  • ๐ŸŽธ Add new font-weight (08538fd)

5.0.1-alpha.72 (2019-11-29)

Features

  • ๐ŸŽธ Add loader component (5b810bd)

5.0.1-alpha.69 (2019-11-28)

Features

  • ๐ŸŽธ Tertiary buttons is without min-width (ef05dac)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • ๐Ÿ› Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • ๐ŸŽธ Remove normalize.css (2c23c2b)

5.0.1-alpha.56 (2019-11-22)

Features

  • ๐ŸŽธ Add accessible download links (cee5532)

5.0.1-alpha.48 (2019-11-12)

Bug Fixes

13.3.0 (2021-09-02)

Bug Fixes

  • add back missing imports (574ec6b)

12.13.1 (2021-08-11)

Bug Fixes

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

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
  • ๐Ÿ› We don't need lastModified (e458a12)

12.2.1 (2021-05-10)

Bug Fixes

  • ๐Ÿ› Decrease size of button (065f78a)
  • ๐Ÿ› Do not let buttons go 100% after 400px breakpoint (eb8a110), closes #383578
  • ๐Ÿ› Use a transparent border on text buttons (52dea77)
  • ๐Ÿ› Use correct spacing according to grid (2fb0e45)

12.0.0 (2021-05-05)

Bug Fixes

  • ๐Ÿ› Update references (c08f107)

Code Refactoring

  • ๐Ÿ’ก Remove old util var files and remove icon button (1e5e3d9), closes #336508
  • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
  • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
  • ๐Ÿ’ก Rename Notification to Alert Banner (8b4e48d), closes #336508

Features

  • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508
  • ๐ŸŽธ Rename tertiary button to text button (4031c22)

BREAKING CHANGES

  • ๐Ÿงจ 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

  • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • ๐Ÿงจ Icon buttons are now removed from the button component, into a separate

component: Icon button.

11.0.0 (2021-03-15)

Bug Fixes

  • ๐Ÿ› Use last-of-type insted of last-child for buttons (1b8ab74)

10.2.1 (2021-03-05)

Bug Fixes

  • ๐Ÿ› Use correct styling for tertiary button (00d1665), closes #352695

9.1.1 (2021-01-25)

Bug Fixes

  • ๐Ÿ› Revert default styling of button without flags (b31ef6e), closes #335077

7.8.0 (2020-11-30)

Features

  • ๐ŸŽธ Add support for icon buttons/controls (38c7cc4)

7.7.0 (2020-11-24)

Features

  • ๐ŸŽธ add disabled button loading state (69a48e5), closes #307542

7.1.0 (2020-11-16)

Features

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

6.36.0 (2020-10-12)

Features

  • ๐ŸŽธ Add updated focus styling for buttons (46bffdf)

6.26.11 (2020-07-15)

Bug Fixes

  • ๐Ÿ› Fix hover for primary CTA button, increase box-shadow (e90000b)

6.25.2 (2020-07-08)

Bug Fixes

  • ๐Ÿ› Fix hover state for primary CTA button (0164b07)
  • ๐Ÿ› Use correct heading classes in examples (52c1e2d)

6.22.0 (2020-07-01)

Features

  • ๐ŸŽธ Add new color categories, update documentation (5496822)

6.18.0 (2020-05-26)

Bug Fixes

  • ๐Ÿ› Fix missing preprocessor styles for button (3a8c668)

6.16.1 (2020-05-20)

Bug Fixes

  • ๐Ÿ› Fix routing for dev server (295db6e)

6.15.0 (2020-05-07)

Bug Fixes

  • ๐Ÿ› Make CTA buttons 100% width, but still have max 320px (e7e8a50)

6.10.2 (2020-04-16)

Bug Fixes

  • ๐Ÿ› Fix responsive margins for buttons (997b75d), closes #232515

6.4.2 (2020-04-03)

Bug Fixes

  • ๐Ÿ› Change min-width none to initial (f661bea)
  • ๐Ÿ› Remove misuse of unset, none, auto and initial (87624d7)
  • ๐Ÿ› Use initial instead of none and unset (d75bc65)
  • ๐Ÿ› use min-height none instead of unset (f6c335b)

5.3.0 (2020-03-18)

Bug Fixes

  • ๐Ÿ› Set button and input height to 48, down from 56px (f00db7d)

5.1.0 (2020-03-15)

Bug Fixes

  • ๐Ÿ› Adjust maxwidts for buttons (59724a8)
  • ๐Ÿ› Remove bold on hover for tertiary buttons (642570e)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.153 (2020-03-06)

Bug Fixes

  • ๐Ÿ› Fix border issues with tertiary button on hover (3f47540)

5.0.1-alpha.151 (2020-03-05)

Features

  • ๐ŸŽธ Add new typography rule for captions. Refactor weights (a033f4e)

5.0.1-alpha.150 (2020-03-05)

Features

  • ๐ŸŽธ Make CTA (large) buttons to constant 320px width (4b6d120)

5.0.1-alpha.133 (2020-02-24)

Bug Fixes

  • ๐Ÿ› Adjust spacing for adjacent tertiary buttons (4388973)

5.0.1-alpha.116 (2020-02-06)

Bug Fixes

  • ๐Ÿ› Update preprocessor files for scss and less (6501093)

5.0.1-alpha.111 (2020-01-21)

Bug Fixes

  • ๐Ÿ› Use box-shadow of 1px with correct color on hover (0c6c3b6)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • ๐Ÿ› Make sure 3px borders stay contained (f10e3df)
  • ๐Ÿ› Remove duplicate support color (a7f346d)

5.0.1-alpha.109 (2020-01-20)

Bug Fixes

  • ๐Ÿ› Fix mobile button stacking (80e9d9f)

5.0.1-alpha.107 (2020-01-15)

Bug Fixes

  • ๐Ÿ› No need to use paths for gulp-less in button (bd08f08)

Features

  • ๐ŸŽธ Add button.less (9769183)

5.0.1-alpha.105 (2020-01-13)

Bug Fixes

  • ๐Ÿ› Buttons have 100% width in mobile (7145157)
  • ๐Ÿ› Use correct font-weight on hover for tertiary buttons (d95bbee)

5.0.1-alpha.87 (2019-12-04)

Bug Fixes

  • ๐Ÿ› Use correct color for buttons (b6a938b)
  • ๐Ÿ› Use correct colors for disable info button (d77f1ed)
  • ๐Ÿ› Use correct font-weight (ee8a5f7)

Features

  • ๐ŸŽธ Add new font-weight (08538fd)

5.0.1-alpha.72 (2019-11-29)

Features

  • ๐ŸŽธ Add loader component (5b810bd)

5.0.1-alpha.69 (2019-11-28)

Features

  • ๐ŸŽธ Tertiary buttons is without min-width (ef05dac)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • ๐Ÿ› Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • ๐ŸŽธ Remove normalize.css (2c23c2b)

5.0.1-alpha.56 (2019-11-22)

Features

  • ๐ŸŽธ Add accessible download links (cee5532)

5.0.1-alpha.48 (2019-11-12)

Bug Fixes

  • ๐Ÿ› Use different paddings depending on screen size (8ab2711)

5.0.1-alpha.44 (2019-11-08)

Features

  • ๐ŸŽธ Add support colors, replace hardcoded rgb to variables (32a2b9e)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • ๐Ÿ› Fix typography based on latest sketches (2653b61)

5.0.1-alpha.12 (2019-10-15)

Bug Fixes

  • ๐Ÿ› Remove redundant classname (d945f4c)

5.0.1-alpha.9 (2019-10-14)

Features

  • ๐ŸŽธ Add feature to include sandbox links in components (a410260)

5.0.1-alpha.7 (2019-10-08)

Features

  • ๐ŸŽธ Add support for icons in buttons (267104a)
  • ๐ŸŽธ Add tertiary button and update design on buttons (ea439ea)

5.0.1-alpha.6 (2019-10-08)

Features

  • ๐ŸŽธ Add design tokens to typography (384829e)

5.0.1-alpha.1 (2019-09-30)

Bug Fixes

  • ๐Ÿ› Adjustments to buttons and input fields (a796809)

Features

  • ๐ŸŽธ Add state styling to buttons, update documentation (379dbe4)
Edit this section, Opens in new window
Contact us, Opens in new window