Back to Button-guidelines

CSS ComponentThe latest version of this package is: 17.0.30-alpha.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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/button@17.0.30-alpha.0

Table of Contents

Edit this section, Opens in new window

Usage

Variations

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">
 Primary
</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]">
 Primary
</button>

Text button

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

<button type="button" class="if button text">
 Text
</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 text">
 Text
</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 [primary|secondary|info|text]">
  <span aria-hidden="true" class="if icon [product|symbol|ui] <iconName>"></span>
  Button with icon
</button>

or

<button type="button" class="if button [primary|secondary|info|text]">
  <svg class="if icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5" style="stroke: currentColor;">
      <polygon fill="none" stroke-miterlimit="10" points="20,1 9,1 5,16 13,16 11,28 27,10 18,10 "/>
    </g>
  </svg>
  Button with icon
</button>

Sizes

<button type="button" class="if button [large|small|smaller]">Button</button>

Modes

Inverse

The Secondary, Text and Info button can be in inverse mode.

<button type="button" class="if button secondary inverse">
 Inverse
</button>
<button type="button" class="if button text inverse">
 Inverse
</button>
<button type="button" class="if button info inverse">
 Inverse
</button>
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Button tokens

Name Value Is aliased in
$ids-button-border-radius-xs
 0.25rem
$ids-button-border-radius-sm
 0.375rem
$ids-button-border-radius-default
 0.375rem
$ids-button-border-radius-lg
 0.375rem
$ids-button-font-size
 1.125rem
$ids-button-line-height
 150%
$ids-button-color-normal
 rgb(0, 84, 240)
$ids-button-color-inverse
 rgb(250, 249, 247)
$ids-button-height-xs
 1.5rem
$ids-button-height-sm
 2.25rem
$ids-button-height-default
 3rem
$ids-button-height-lg
 4rem
$ids-button-min-width
 3rem
$ids-button-max-width-media-query-base
 360px
$ids-button-max-width-media-query-xs
 320px
$ids-button-width-media-query-base
 100%
$ids-button-width-media-query-xs
 auto
$ids-button-border-color
 currentColor
$ids-button-border-style
 solid
$ids-button-border-size
 0.125rem
$ids-button-border
 0.125rem solid currentColor
$ids-button-spacing-stack-media-query-base
 0.75rem
$ids-button-spacing-stack-media-query-xs
 1rem
$ids-button-spacing-stack-media-query-sm
 1.5rem
$ids-button-spacing-inline-media-query-xs
 1rem
$ids-button-spacing-inline-media-query-sm
 1.5rem
$ids-button-spacing-inset-horizontal
 1.5rem
$ids-button-spacing-inset-vertical
 0.5rem
$ids-button-info-background-color-normal
 rgb(51, 30, 17)
$ids-button-info-background-color-inverse
 rgb(250, 249, 247)
$ids-button-info-border-color-normal
 rgb(51, 30, 17)
$ids-button-info-border-color-inverse
 rgb(250, 249, 247)
$ids-button-info-color-normal
 rgb(250, 249, 247)
$ids-button-info-color-inverse
 rgb(51, 30, 17)
$ids-button-info-hover-background-color-normal
 rgb(110, 98, 94)
$ids-button-info-hover-background-color-inverse
 rgb(232, 224, 217)
$ids-button-info-hover-border-color-normal
 rgb(110, 98, 94)
$ids-button-info-hover-border-color-inverse
 rgb(232, 224, 217)
$ids-button-info-hover-color-normal
 rgb(250, 249, 247)
$ids-button-info-hover-color-inverse
 rgb(51, 30, 17)
$ids-button-info-hover-box-shadow-normal
 inset 0 0 0 0.0625rem rgb(110, 98, 94)
$ids-button-info-hover-box-shadow-inverse
 inset 0 0 0 0.0625rem rgb(232, 224, 217)
$ids-button-info-active-background-color-normal
 rgb(110, 98, 94)
$ids-button-info-active-background-color-inverse
 rgb(232, 224, 217)
$ids-button-info-active-border-color-normal
 rgb(110, 98, 94)
$ids-button-info-active-border-color-inverse
 rgb(232, 224, 217)
$ids-button-info-active-color-normal
 rgb(250,249,247, 0.5)
$ids-button-info-active-color-inverse
 rgb(110, 98, 94)
$ids-button-info-active-box-shadow-normal
 inset 0 0 0 0.0625rem rgb(110, 98, 94)
$ids-button-info-active-box-shadow-inverse
 inset 0 0 0 0.0625rem rgb(232, 224, 217)
$ids-button-primary-background-color
 rgb(0, 84, 240)
$ids-button-primary-border-color
 rgb(0, 84, 240)
$ids-button-primary-color
 rgb(250, 249, 247)
$ids-button-primary-box-shadow
 inset 0 0 0 30px rgba(51, 30, 17, 0)
$ids-button-primary-hover-background-color
 rgb(0, 84, 240)
$ids-button-primary-hover-border-color
 rgba(51, 30, 17, 0.35)
$ids-button-primary-hover-color
 rgb(250, 249, 247)
$ids-button-primary-hover-box-shadow
 inset 0 0 0 30px rgba(51, 30, 17, 0.35)
$ids-button-primary-active-background-color
 rgb(0, 84, 240)
$ids-button-primary-active-border-color
 rgba(51, 30, 17, 0.35)
$ids-button-primary-active-color
 rgb(250,249,247, 0.7)
$ids-button-primary-active-box-shadow
 inset 0 0 0 30px rgba(51, 30, 17, 0.35)
$ids-button-secondary-color-normal
 rgb(0, 84, 240)
$ids-button-secondary-color-inverse
 rgb(250, 249, 247)
$ids-button-secondary-hover-border-color-normal
 rgb(0, 84, 240)
$ids-button-secondary-hover-border-color-inverse
 rgb(250, 249, 247)
$ids-button-secondary-hover-color-normal
 rgb(0, 84, 240)
$ids-button-secondary-hover-color-inverse
 rgb(250, 249, 247)
$ids-button-secondary-hover-box-shadow-normal
 inset 0 0 0 0.0625rem rgb(0, 84, 240)
$ids-button-secondary-hover-box-shadow-inverse
 inset 0 0 0 0.0625rem rgb(250, 249, 247)
$ids-button-secondary-active-border-color-normal
 rgb(0, 64, 128)
$ids-button-secondary-active-border-color-inverse
 rgb(110, 98, 94)
$ids-button-secondary-active-color-normal
 rgb(0, 64, 128)
$ids-button-secondary-active-color-inverse
 rgb(110, 98, 94)
$ids-button-secondary-active-box-shadow-normal
 inset 0 0 0 0.0625rem rgb(0, 64, 128)
$ids-button-secondary-active-box-shadow-inverse
 inset 0 0 0 0.0625rem rgb(110, 98, 94)
$ids-button-disabled-color
 rgba(110,98,94,0.4)
$ids-button-disabled-border-color
 rgba(110,98,94,0.3)
$ids-button-hover-color
 currentColor
$ids-button-hover-border-color
 currentColor
$ids-button-hover-box-shadow
 inset 0 0 0 0.0625rem currentColor
$ids-button-text-background-color-normal
 transparent
$ids-button-text-background-color-inverse
 transparent
$ids-button-text-border-normal
 0.125rem solid transparent
$ids-button-text-border-inverse
 0.125rem solid transparent
$ids-button-text-color-normal
 rgb(0, 84, 240)
$ids-button-text-color-inverse
 rgb(250, 249, 247)
$ids-button-text-box-shadow-normal
 inset 0 0 0 0.0625rem transparent
$ids-button-text-box-shadow-inverse
 inset 0 0 0 0.0625rem transparent
$ids-button-text-hover-background-color-normal
 transparent
$ids-button-text-hover-background-color-inverse
 transparent
$ids-button-text-hover-border
 0.125rem solid currentColor
$ids-button-text-hover-color-normal
 rgb(0, 84, 240)
$ids-button-text-hover-color-inverse
 rgb(250, 249, 247)
$ids-button-text-hover-box-shadow
 inset 0 0 0 0.0625rem currentColor
$ids-button-text-active-background-color-normal
 transparent
$ids-button-text-active-background-color-inverse
 transparent
$ids-button-text-active-border
 0.125rem solid currentColor
$ids-button-text-active-color-normal
 rgb(0, 64, 128)
$ids-button-text-active-color-inverse
 rgb(232, 224, 217)
$ids-button-text-active-box-shadow
 inset 0 0 0 0.0625rem currentColor
$ids-button-with-icon-size
 1.5rem
$ids-button-with-icon-spacing-inset
 1rem
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.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • Large, default and small buttons now have border-radius: 6px, smaller buttons have

border-radius: 4px.

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 CHANGELOG.md 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 CHANGELOG.md 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.15.0 (2022-04-07)

Features

14.13.1 (2022-04-07)

Code Refactoring

  • 💡 Use a design token for border radius on buttons (5299bda)

Documentation Updates

  • Fix indentation (3d2abce)

  • 🤖 Use *.mdx instead of *.md for documentation (f9da571)

14.13.0 (2022-04-06)

Bug Fixes

  • 🐛 Encode data-value in design token documentation (85737c6)

14.9.0 (2022-03-03)

Miscellaneous chores

reinstall (d425056)

14.7.1 (2022-02-18)

Bug Fixes

  • Use correct base color for text (4c1b554)

  • Use correct filter (4111b82)

Code Refactoring

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

  • Remove old attribues for whatinput (96a76f3)

14.2.2 (2021-12-10)

Code Refactoring

reinstall (885c74b)

14.1.1 (2021-11-21)

Documentation Updates

  • Refactor docs for button component (a4394c5)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ 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!

Documentation Updates

  • ✏️ Adjust documentation (8e77c36)

  • ✏️ Adjust documentation, examples etc (d161cd3)

  • ✏️ Documentation adjustments (73c09e3) , closes #467386

  • ✏️ Make variations tables more condensed (4344a3a)

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Split up CSS documentation (a5da805) , closes #467386

  • ✏️ 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

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)

Features

  • 🎸 Input field hot reload (eac76b7)

13.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

13.3.0 (2021-09-02)

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

  • 🤖 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)

12.8.1 (2021-06-07)

Code Refactoring

  • 💡 Remove large version of primary button (4d08a7d) , closes #364682

  • 🤖 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.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)

Documentation Updates

  • ✏️ Update documentation after altering widts (402804a)

  • 🤖 Update dev and demo files (a4c00ee)

  • 🤖 Update preprocessor files (5dcab55)

  • 🤖 Update preprocessor files (5175cfb)

12.0.0 (2021-05-05)

⚠ 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.

Features

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

  • 🎸 Rename tertiary button to text button (4031c22)

Bug Fixes

Code Refactoring

  • 💡 Remove old util var files and remove icon button (1e5e3d9) , closes #336508 . from button

  • 💡 Rename and consolidate mixins (67cf470) , closes #268081

  • 💡 Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508

  • 💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

  • 🤖 Add style-dictionary config and preliminary tokens (6800642)

  • 🤖 Convert typography tokens from theo to SD (e48f255)

  • 🤖 Convert util tokens from theo to style-dictionary (99fb4f5)

  • 🤖 Finalize breakpoint token conversion (f50ea0d)

  • 🤖 PR fixes (87bdedd)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Reinstall (69e1a5b)

  • 🤖 Remove unwanted doc file (d6a9726)

  • 🤖 Temporarily add a mdx file to be able to build (d2e5779)

  • 🤖 Update all design token references (c640d15)

  • 🤖 Updating links (70f166e)

rebuild (7edb430)

11.0.0 (2021-03-15)

Bug Fixes

  • 🐛 Use last-of-type insted of last-child for buttons (1b8ab74)

10.2.2 (2021-03-10)

Documentation Updates

  • ✏️ Fix broken demo links (470b377)

10.2.1 (2021-03-05)

Bug Fixes

  • 🐛 Use correct styling for tertiary button (00d1665) , closes #352695

  • 🤖 Rename Change Log to Changelog (d412e63)

  • 🤖 Remove all references to sketch (35fc554) , closes #339203

  • 🤖 Update package fields (200c0af)

  • reinstall packages (fcfacf4)

9.1.1 (2021-01-25)

Bug Fixes

  • 🐛 Revert default styling of button without flags (b31ef6e) , closes #335077

9.0.1 (2021-01-20)

Documentation Updates

  • ✏️ Update Button demo to point to correct path (724f5eb) , closes #322284

8.2.2 (2021-01-13)

Code Refactoring

  • 💡 Split button features into mixins and files (e6cbd1b)

7.8.0 (2020-11-30)

Features

  • 🎸 Add support for icon buttons/controls (38c7cc4)

Documentation Updates

  • ✏️ Add link to the icon component from button icon (17c0d4e)

  • ✏️ Update button documentation, add doc about button icon (ba71b47)

  • ✏️ Update icon component documentation with color usage (a5d5ec7)

  • 🤖 Started to converge overflow menu into menu component (f0ccf58)

7.7.0 (2020-11-24)

Features

7.1.0 (2020-11-16)

Features

  • 🎸 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)

reinstall (2cefe15)

6.36.0 (2020-10-12)

Features

  • 🎸 Add updated focus styling for buttons (46bffdf)

Miscellaneous chores

  • 🤖 Add what-input to demo and dev files (56801b7)

  • 🤖 Rename focus style mixins (e18b688)

6.32.0 (2020-09-27)

Documentation Updates

  • ✏️ Use an unique identifier for types grid (65b8b39)

6.29.4 (2020-09-09)

Documentation Updates

  • ✏️ Use classes for background for color drops in usage.md (227e86e)

6.29.3 (2020-09-07)

Documentation Updates

  • ✏️ Merge atoms/molecules/organisms into components (90ed590)

6.26.12 (2020-08-03)

Documentation Updates

  • ✏️ Update documentation for the new registry (3e7ba20)

Miscellaneous chores

  • 🤖 lerna bootstrap (d835ec9)

  • 🤖 Temporarily remove package-lock.json-files (87b3f7f)

  • 🤖 Update references to new scope (b5575dd)

6.26.11 (2020-07-15)

Bug Fixes

  • 🐛 Fix hover for primary CTA button, increase box-shadow (e90000b)

Documentation Updates

  • ✏️ Update documentation layout for buttons (ce4f7c6)

6.26.10 (2020-07-14)

Miscellaneous chores

  • 🤖 Manually update some links (ecc0133)

  • 🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)

6.25.2 (2020-07-08)

Bug Fixes

  • 🐛 Fix hover state for primary CTA button (0164b07)

  • 🐛 Use correct heading classes in examples (52c1e2d)

6.23.0 (2020-07-01)

Miscellaneous chores

  • 🤖 Add description to the button component in package.jso (01ccbb7)

  • 🤖 Remove old deps (b15594d)

reinstall (1ab1527)

6.22.0 (2020-07-01)

Features

  • 🎸 Add new color categories, update documentation (5496822)

Documentation Updates

  • ✏️ Update documentation layout (816053b)

Miscellaneous chores

  • 🤖 Search and replace old color usage (3e5abb0)

  • 🤖 Update dev and demo files for buttons. Add new colors (13e77bd)

  • Fix merge issues (3731434)

6.21.6 (2020-06-11)

Miscellaneous chores

  • 🤖 Remove .zip files from .npmignore (b3bc7dc)

6.19.0 (2020-06-02)

Miscellaneous chores

reinstall (3416c65)

6.18.0 (2020-05-26)

Bug Fixes

  • 🐛 Fix missing preprocessor styles for button (3a8c668)

Miscellaneous chores

  • 🤖 Use lightestBeige as text color instead of old color (7fe2246)

6.16.1 (2020-05-20)

Bug Fixes

  • 🐛 Fix routing for dev server (295db6e)

6.15.5 (2020-05-15)

Miscellaneous chores

gatsbify (0e07d68)

  • prepped and ready to separate documentation site from code (d3e1fd9)

  • pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

  • Remove livingcss data and add frontmatter data (b384946)

6.15.4 (2020-05-14)

Miscellaneous chores

6.15.2 (2020-05-11)

Miscellaneous chores

6.15.0 (2020-05-07)

Bug Fixes

  • 🐛 Make CTA buttons 100% width, but still have max 320px (e7e8a50)

Miscellaneous chores

6.10.9 (2020-04-22)

Miscellaneous chores

  • 🤖 Add *.zip-files to .npmignore-files (062b8b0)

  • 🤖 Remove references to verb in package.json files (cfdaaec)

6.10.6 (2020-04-17)

Miscellaneous chores

6.10.5 (2020-04-16)

Code Refactoring

  • 💡 Use a common core token for form element height (4481d11)

6.10.2 (2020-04-16)

Bug Fixes

6.9.1 (2020-04-16)

Documentation Updates

  • ✏️ Use correct badge color in README.md (03b563e)

  • ✏️ Use correct name for package in the README.md (acef81e)

6.6.0 (2020-04-09)

Documentation Updates

  • ✏️ Change edit this document to edit this section (791b646)

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)

6.3.4 (2020-04-01)

Documentation Updates

  • ✏️ Minor documentation updates (eb282bf)

Miscellaneous chores

  • 🤖 Use more of if styling on documentation site (2eaf386)

6.3.2 (2020-03-31)

Documentation Updates

  • ✏️ Replace sg.message with if.notification (5d1aa99)

5.3.0 (2020-03-18)

Bug Fixes

  • 🐛 Set button and input height to 48, down from 56px (f00db7d)

5.2.0 (2020-03-17)

Code Refactoring

  • 💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother

5.1.0 (2020-03-15)

Bug Fixes

  • 🐛 Adjust maxwidts for buttons (59724a8)

  • 🐛 Remove bold on hover for tertiary buttons (642570e)

5.0.4 (2020-03-14)

Miscellaneous chores

  • 🤖 Delete really old install files, update README files (c5d4893)

  • 🤖 Remove .npmrc fles (4e26249)

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

Miscellaneous chores

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) . and updated documentation

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

Features

  • 🎸 Make CTA (large) buttons to constant 320px width (4b6d120)

Miscellaneous chores

  • 🤖 Merge similar support colors (adaf9b8)

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

Miscellaneous chores

  • 🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables

  • 🤖 Starting to align components to new baseline grid (cf2c073)

  • Align typography to baseline. First attempt (f4447e9)

5.0.1-alpha.147 (2020-03-02)

Code Refactoring

  • 💡 Refactor button scaffolding a bit (28f469e)

Miscellaneous chores

  • 🤖 Adjusted documentation system to be a tad fresher (c97ff4d)

  • 🤖 lerna bootstrap (e236ab1)

  • 🤖 More documentation site adjustments (395d416)

  • 🤖 Reorder color nomenclature for newest support blue (57c1656)

  • lerna bootstrap (3d664d1)

  • lerna bootstrap (672c766)

  • lerna bootstrap (4d64d70)

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

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

Bug Fixes

  • 🐛 Adjust spacing for adjacent tertiary buttons (4388973)

5.0.1-alpha.120 (2020-02-17)

Miscellaneous chores

  • 🤖 Started to adhere to new baseline grid (7f5a270)

  • 🤖 Use variables instead of hardcoded values (db103b1)

5.0.1-alpha.118 (2020-02-10)

Miscellaneous chores

  • 🤖 Add less and scss for footer and logo (7dc0830)

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

Documentation Updates

  • ✏️ Add edit links to documentation files (7c6e770)

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

Bug Fixes

  • 🐛 Update preprocessor files for scss and less (6501093)

Miscellaneous chores

  • 🤖 Update less and scss files (8537034)

5.0.1-alpha.115 (2020-02-05)

Documentation Updates

  • ✏️ Add notification about increased width on active (a87ac0b)

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

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

Features

Bug Fixes

  • 🐛 No need to use paths for gulp-less in button (bd08f08)

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.89 (2019-12-06)

Miscellaneous chores

  • 🤖 Make button.styl and scss with a smaller footprint (11949c0)

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

Features

  • 🎸 Add new font-weight (08538fd)

Bug Fixes

  • 🐛 Use correct color for buttons (b6a938b)

  • 🐛 Use correct colors for disable info button (d77f1ed)

  • 🐛 Use correct font-weight (ee8a5f7)

5.0.1-alpha.79 (2019-12-03)

Documentation Updates

  • ✏️ Scope all examples to .if (26bd7cd)

5.0.1-alpha.76 (2019-12-02)

Documentation Updates

  • ✏️ Remove inline styling (59d1855)

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

Features

  • 🎸 Add loader component (5b810bd)

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

Miscellaneous chores

  • 🤖 Remove polymer, updated styling accordingly (04e1941)

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

Features

  • 🎸 Tertiary buttons is without min-width (ef05dac)

Documentation Updates

  • ✏️ Update documentation, set width measures (2319666)

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

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.62 (2019-11-24)

Miscellaneous chores

  • 🤖 Some documentation fixes (8d66129)

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

Features

  • 🎸 Remove normalize.css (2c23c2b)

Miscellaneous chores

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

Miscellaneous chores

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.42 (2019-11-05)

Documentation Updates

  • ✏️ Update documentation for teasers (896ed00)

Miscellaneous chores

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

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.32 (2019-10-31)

Miscellaneous chores

  • 🤖 Update components and documentation from sketches (1b8b6f6)

5.0.1-alpha.29 (2019-10-29)

Miscellaneous chores

  • 🤖 Use data-attributes instead of classes for sandbox (deea335)

5.0.1-alpha.20 (2019-10-22)

Miscellaneous chores

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

Bug Fixes

  • 🐛 Remove redundant classname (d945f4c)

Documentation Updates

  • ✏️ Fix documentation for buttons (ccf27b5)

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

Features

  • 🎸 Add feature to include sandbox links in components (a410260)

Code Refactoring

  • 💡 Refactor out some styling, add emphasize flag to (b26939c) . sample

Miscellaneous chores

  • 🤖 Redesign layout and structure for design system.PT1 (e9704f5)

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.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

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

Features

  • 🎸 Add state styling to buttons, update documentation (379dbe4)

Bug Fixes

  • 🐛 Adjustments to buttons and input fields (a796809)

Miscellaneous chores

  • 🤖 Bootstrap (e120d45)

  • 🤖 Remove packages not approved for VID (2ef74aa)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font styles (1c3e3b7)

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

Bug Fixes

  • 🐛 Remove redundant classname (d945f4c)

Documentation Updates

  • ✏️ Fix documentation for buttons (ccf27b5)

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

Features

  • 🎸 Add feature to include sandbox links in components (a410260)

Code Refactoring

  • 💡 Refactor out some styling, add emphasize flag to (b26939c) . sample

Miscellaneous chores

  • 🤖 Redesign layout and structure for design system.PT1 (e9704f5)

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.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

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

Features

  • 🎸 Add state styling to buttons, update documentation (379dbe4)

Bug Fixes

  • 🐛 Adjustments to buttons and input fields (a796809)

Miscellaneous chores

  • 🤖 Bootstrap (e120d45)

  • 🤖 Remove packages not approved for VID (2ef74aa)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font styles (1c3e3b7)

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.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

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

Features

  • 🎸 Add state styling to buttons, update documentation (379dbe4)

Bug Fixes

  • 🐛 Adjustments to buttons and input fields (a796809)

Miscellaneous chores

  • 🤖 Bootstrap (e120d45)

  • 🤖 Remove packages not approved for VID (2ef74aa)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font styles (1c3e3b7)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font styles (1c3e3b7)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font styles (1c3e3b7)

Miscellaneous chores

3.1.11 (2019-04-30)

Bug Fixes

  • 🐛 Use correct font size for buttons (dc2dd9f)

3.1.7 (2019-04-15)

Bug Fixes

  • 🐛 Do not use filter for disabled. Need to support IE11 (1f9190a) , closes #202 . 🙄

  • 🐛 Overrides needed (10f393b)

3.1.6 (2019-04-12)

Documentation Updates

  • ✏️ Clarify usage of npm token, and change name to gb (224fe32)

3.0.4 (2019-01-25)

Bug Fixes

  • 🐛 Use w and h units for background size, IE11 issue (850f8ce)

3.0.3 (2019-01-23)

Bug Fixes

  • 🐛 Fix background-size for icons (a67afbf)

3.0.0 (2019-01-15)

⚠ BREAKING CHANGES

  • Class syntax has completely changed.

Features

Miscellaneous chores

  • 🤖 Cleanup and finalized scoping (9324126)

2.11.0 (2018-12-05)

Documentation Updates

  • ✏️ Move hidden helper classes to util and add documentatio (38aaa03)

2.10.0 (2018-12-03)

Bug Fixes

  • 🐛 Adjust color contrast for disabled and grey (cf5d482) . Also remove themed buttons. Too many color in use.

2.7.3 (2018-11-21)

Documentation Updates

  • ✏️ Fix button documentation (f0ec769)

2.7.2 (2018-11-21)

Bug Fixes

  • 🐛 Remove all references to verb (2397d6b)

2.6.2 (2018-11-19)

Miscellaneous chores

  • 🤖 Remove references to guybrush in documentation, for nw (002e662)

2.6.1 (2018-11-19)

Documentation Updates

2.4.6 (2018-10-26)

Documentation Updates

  • ✏️ Update documentation to reflect sandboxed examples (c16884f)

2.4.4 (2018-10-25)

Code Refactoring

  • 💡 Refactor styleguide, new theme (c202302)

2.4.2 (2018-09-27)

Documentation Updates

  • ✏️ Add do's and don'ts to small and smaller buttons (3f915d5)

  • ✏️ Add smaller button section into the styleguide (8d84c62)

2.4.0 (2018-09-27)

Code Refactoring

  • 💡 Tune hover color for buttons (2fe860d)

2.2.0 (2018-09-26)

Features

  • 🎸 Add disabled styling for buttons (aec9ce5)

  • 🎸 Add uniform disabled styling on buttons (b950395)

Bug Fixes

  • 🐛 Add correct borders for all buttons (3b6bc5a)

  • 🐛 Add correct hover and focus styling for dark buttons (2c5d1b9)

  • 🐛 Adjust icons for smaller sized buttons (50dc688)

  • 🐛 Center button texts and add fix for border-radius-bleed (4c2d7af)

Code Refactoring

  • 💡 Add spacing around buttons side by side (bbcfb16)

  • 💡 Remove background-clip from buttons, no need (2c73b10)

  • 💡 Separated hover and focus styling (ba2591d)

Documentation Updates

  • ✏️ Update examples for buttons (00ea8fc)

2.1.0 (2018-09-26)

Features

  • 🎸 Add support for icon usage in buttons (5dc72d4)

2.0.0 (2018-09-25)

Features

  • 🎸 Add primary and secondary buttons (2cf8d87) . Also tweaked the styling a bit more. Updated documentation.

1.18.2 (2018-09-19)

Bug Fixes

  • 🐛 Don't clean dist before we produce javascript files (02ebb76) . The build task in gulp cleaned the dist directory right after we produced the javascript files, resulting in no *.js files in the dist folder

Miscellaneous chores

  • 🤖 Make gulp run more silent (56e050e)

1.18.1 (2018-09-17)

Miscellaneous chores

  • 🤖 Add a .npmrc into each module (eed608f)

  • release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

  • release: :bookmark: publish v1.18.0 (aa3271d)

1.17.1 (2018-09-18)

Miscellaneous chores

  • release: :bookmark: publish v1.17.1 (2d8219c)

1.18.1 (2018-09-17)

Miscellaneous chores

  • 🤖 Add a .npmrc into each module (eed608f)

  • release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

  • release: :bookmark: publish v1.18.0 (aa3271d)

1.17.0 (2018-09-10)

Miscellaneous chores

  • release: :bookmark: publish v1.16.0 (b5316b2)

  • release: :bookmark: publish v1.17.0 (01db781)

1.15.0 (2018-09-07)

Miscellaneous chores

  • release: :bookmark: publish v1.15.0 (31be150)

1.14.0 (2018-09-06)

Miscellaneous chores

  • 🤖 Upgrade babel to 7 release version (076bcba)

  • release: :bookmark: publish v1.14.0 (7b15e64)

1.13.0 (2018-09-04)

Code Refactoring

  • 💡 Ease footprint of modules (70fe5c9)

Miscellaneous chores

  • release: :bookmark: publish v1.13.0 (b99e16d)

1.12.1 (2018-08-23)

Miscellaneous chores

  • 🤖 Some refactoring, added version to bundle, package def (e4ee4a8) . to stylus files, updated prism and templates

  • release: :bookmark: publish v1.12.1 (189057f)

1.12.0 (2018-08-22)

Miscellaneous chores

  • release: :bookmark: publish v1.12.0 (7c44ddc)

1.11.0 (2018-08-21)

Miscellaneous chores

  • packages: don'tuse dist in filename (c65ce81)

  • release: :bookmark: publish v1.11.0 (cbd5359)

1.10.38 (2018-08-20)

Miscellaneous chores

  • release: :bookmark: publish v1.10.38 (7d59fc9)

1.10.35 (2018-08-20)

Miscellaneous chores

  • release: :bookmark: publish v1.10.35 (719ac06)

1.10.34 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.34 (3af5229)

1.10.33 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.33 (adec027)

1.10.32 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.32 (994e8a8)

1.10.31 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.31 (7a31e83)

1.10.30 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.30 (2fbaba0)

1.10.29 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.29 (d9cdb30)

1.10.28 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.28 (70864a5)

1.10.27 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.27 (4ff395c)

1.10.26 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.26 (30d9bbc)

1.10.25 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.25 (a77f3e4)

1.10.24 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.24 (ff3fe91)

1.10.23 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.23 (a1df933)

1.10.22 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.22 (04a1fbc)

1.10.21 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.21 (94e201d)

1.10.20 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.20 (25c40aa)

1.10.19 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.19 (607b524)

1.10.18 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.18 (ef6b333)

1.10.17 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.17 (5e54e21)

1.10.16 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.16 (479e563)

1.10.15 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.15 (508bffb)

1.10.14 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.14 (585912a)

1.10.13 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.13 (9fc1d4b)

1.10.12 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.12 (e638d67)

1.10.11 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.11 (e329aea)

1.10.10 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.10 (b594d1e)

1.10.9 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.9 (6f68c59)

1.10.8 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.8 (1b7ef57)

1.10.7 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.7 (95bc695)

1.10.6 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.6 (ad7cbab)

1.10.5 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.5 (a7efeed)

1.10.4 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.4 (4f08bfa)

1.10.3 (2018-08-17)

Documentation Updates

  • ✏️ Update onboarding documentation (505ae9b)

Miscellaneous chores

  • release: :bookmark: publish v1.10.3 (7ca1bcf)

1.10.2 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.2 (781968c)

1.10.1 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.1 (aee140f)

1.10.0 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.0 (7dac7da)

  • table: scaffolding (1d06368)

1.9.1 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.9.1 (0516f24)

1.9.0 (2018-08-15)

Miscellaneous chores

  • release: :bookmark: publish v1.9.0 (9718b47)

1.8.0 (2018-08-14)

Miscellaneous chores

  • release: :bookmark: publish v1.8.0 (35ff480)

1.7.0 (2018-08-13)

Miscellaneous chores

  • release: :bookmark: publish v1.7.0 (6e2690f)

1.6.2 (2018-08-13)

Bug Fixes

  • button: use correct variables (bef7ce9)

Code Refactoring

  • 💡 only run clean when explicitly calling build (7bf3d25) . because the components are also building js files that got cleaned.

Miscellaneous chores

  • 🤖 Upgrade to Babel 7 (5947147)

  • button: remove erranous doc files (d7e65fa)

  • release: :bookmark: publish v1.6.2 (574ab8c)

testing (3ebcfec)

1.6.1 (2018-08-09)

Miscellaneous chores

  • button: add missing resolver for core (c158b6a)

  • button: add missing resolver for normalize.css (eb8f869)

  • button: KAIZEN (06eda0c)

  • packages: bootstrap (4809d81)

  • packages: remove dist files (76a2fdf)

  • release: :bookmark: publish v1.6.1 (2e820ce)

scaffolding (b86b0d7)

0.1.6 (2018-06-19)

Bug Fixes

  • npm: Use exact versions (653d9b9)

0.1.1 (2018-06-18)

0.1.2 (2018-06-18)

0.1.0 (2018-06-18)

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