CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
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>
Tokens
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 |
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
-
🎸 Add support for inverse buttons (ed27abb) , closes #578845
-
🎸 Add support for more button sizes (a7bbc38) , closes #426817
14.13.1 (2022-04-07)
Code Refactoring
- 💡 Use a design token for border radius on buttons (5299bda)
Documentation Updates
14.13.0 (2022-04-06)
Bug Fixes
- 🐛 Encode data-value in design token documentation (85737c6)
14.9.0 (2022-03-03)
Miscellaneous chores
-
🤖 Bootstrap (6822f5b)
reinstall (d425056)
14.7.1 (2022-02-18)
Bug Fixes
Code Refactoring
-
💡 Use CSS variables (9d0e353)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
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
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 fromif-design-system
toids-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)
-
✏️ Make variations tables more condensed (4344a3a)
-
✏️ Move position of the quick links (5cb0897)
-
✏️ Remove unneeded margins for shortcuts (36c7e8d)
-
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
💡 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)
reinstall (da80dba)
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
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
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
- 🐛 Update references (c08f107)
Code Refactoring
-
💡 Remove old util var files and remove icon button (1e5e3d9) , closes #336508 . from button
-
💡 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 oflast-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
9.0.1 (2021-01-20)
Documentation Updates
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
6.43.3 (2020-11-03)
Miscellaneous chores
reinstall (2cefe15)
6.36.0 (2020-10-12)
Features
- 🎸 Add updated focus styling for buttons (46bffdf)
Miscellaneous chores
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
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
- lerna bootstrap (0c4f599)
6.15.2 (2020-05-11)
Miscellaneous chores
- reinstall and build (aedc097)
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
- 🤖 lerna bootstrap (d8faf26)
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
5.0.4 (2020-03-14)
Miscellaneous chores
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
- ✏️ Some tweaks (4db6b23)
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
5.0.1-alpha.109 (2020-01-20)
Bug Fixes
5.0.1-alpha.107 (2020-01-15)
Features
- 🎸 Add button.less (9769183)
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
- 🤖 lerna bootstrap (76e7c07)
5.0.1-alpha.57 (2019-11-22)
Miscellaneous chores
- 🤖 lerna bootstrap (99e08e6)
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
- 🤖 lerna bootstrap (c8fb43e)
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
- 🤖 Rename links (82e3a8a)
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
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
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
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
- 🤖 Update deps (2e84691)
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
- ✏️ Remove @guybrush-prefix from instal notes (c8d373e)
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
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
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
1.18.0 (2018-09-17)
Miscellaneous chores
- release: :bookmark: publish v1.18.0 (aa3271d)
1.17.0 (2018-09-10)
Miscellaneous chores
1.15.0 (2018-09-07)
Miscellaneous chores
- release: :bookmark: publish v1.15.0 (31be150)
1.14.0 (2018-09-06)
Miscellaneous chores
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
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
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)