CSS ComponentThe latest version of this package is: 14.29.10, Opens in new window
An icon button is mostly used for quick actions.
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/icon-button@14.29.10
Table of Contents
Edit this section, Opens in new windowUsage
<button
type="button"
class="if icon-button icon [ui|product|coverage|symbol|some] [<iconName>]"
aria-label="Delete"
>
</button>
<button type="button" class="if icon-button">
<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" fill="currentColor" stroke="currentColor">
<path d="M27,10V28a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V10" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
<line x1="16" y1="15" x2="16" y2="25" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
<line x1="11" y1="15" x2="11" y2="25" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
<line x1="21" y1="15" x2="21" y2="25" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
<polyline data-cap="butt" data-color="color-2" points="11 6 11 1 21 1 21 6" fill="none" stroke-miterlimit="10" stroke-linecap="butt"/>
<line data-color="color-2" x1="30" y1="6" x2="2" y2="6" fill="none" stroke-miterlimit="10"/>
</g>
</svg>
</button>
<button class="if icon-button icon ui trashcan disabled" disabled>
</button>
<button class="if icon-button" disabled>
<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"
>
<line x1="3" y1="31" x2="29" y2="31" fill="none" stroke="currentColor" stroke-miterlimit="10" />
<line x1="19" y1="6" x2="24" y2="11" fill="none" stroke="currentColor" stroke-miterlimit="10" />
<polygon points="11 24 4 26 6 19 23 2 28 7 11 24" fill="none" stroke="currentColor" stroke-miterlimit="10" />
</g>
</svg>
</button>
Sizing
<button type="button" class="if icon-button smaller icon ui cog">
</button>
<button type="button" class="if icon-button small icon ui pin">
</button>
<button type="button" class="if icon-button icon ui img">
</button>
<button type="button" class="if icon-button large icon ui like">
</button>
Tokens
Icon Button tokens
Name | Value | Is aliased in |
---|---|---|
$ids-icon-button-border-radius |
0 |
|
$ids-icon-button-color-normal |
rgb(0, 84, 240) |
|
$ids-icon-button-color-inverse |
rgb(250, 249, 247) |
|
$ids-icon-button-hover-color-normal |
rgb(0, 84, 240) |
|
$ids-icon-button-hover-color-inverse |
rgb(250, 249, 247) |
|
$ids-icon-button-icon-size-xs |
1rem |
|
$ids-icon-button-icon-size-sm |
1.25rem |
|
$ids-icon-button-icon-size-default |
1.5rem |
|
$ids-icon-button-icon-size-lg |
2rem |
|
$ids-icon-button-size-xs |
1.5rem |
|
$ids-icon-button-size-sm |
2.25rem |
|
$ids-icon-button-size-default |
3rem |
|
$ids-icon-button-size-lg |
4rem |
|
$ids-icon-button-min-width |
3rem |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.24.4 (2022-06-15)
Bug Fixes
14.22.2 (2022-05-03)
Miscellaneous chores
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.18.1 (2022-04-11)
Bug Fixes
- ๐ Close tag (9ac052c)
14.18.0 (2022-04-08)
Features
Bug Fixes
- ๐ Use icon sizing and fix support for sized buttons (43d663d)
Miscellaneous chores
14.9.0 (2022-03-03)
Miscellaneous chores
-
๐ค Bootstrap (6822f5b)
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md 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)
โ 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 markup example (266ba50)
-
โ๏ธ 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
-
๐ค Prune changelogs (2c660c2)
-
๐ค Rename util to utils (f78721f)
-
๐ค Use correct routing for color, breakpoint, icons and typography (237027f) , closes #467386
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
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.12.1 (2021-08-10)
Bug Fixes
-
๐ Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912
-
๐ค 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)
โ 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
Features
-
๐ธ Add new component: Icon button (7f7ff7b) , closes #336508
-
๐ธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Code Refactoring
-
๐ก 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 component index preview template for icon-button (1e5e304)
-
๐ค Make sure all components are named with capital first (08e9a26)
-
๐ค Reinstall (2c763ea)
-
๐ค Reinstall (69e1a5b)
-
๐ค Update dev and demo files for icon button (8c382ac)
-
๐ค Updating links (70f166e)
-
๐ค Use correct classnames for icon button icons (be5f502)
rebuild (7edb430)