Installation
Coming soon...
Examples
<co-icon-button name="cross" set="16" variant="primary"></co-icon-button>
Button with 16px icon.
<co-icon-button name="cross" set="24" variant="secondary"></co-icon-button>
Button with 24px icon.
<co-icon-button name="cross" set="16" disabled></co-icon-button>
Add disabled attribute to make button disabled.
<co-icon-button variant="primary" name="cross" set="16" size="small"></co-icon-button>
Add set attribute to determine the size(small) of the button
<co-icon-button name="cross" variant="primary" set="16" size="large"></co-icon-button>
Add set attribute to determine the size(large) of the button
Properties
|
Property |
Type |
Description |
Usage |
|
name |
String |
Define name of the icon. |
name="arrow-down" |
|
set |
String |
Determine size of the icon. |
set="16 | 24 " |
|
variant |
String |
Define the icon color based on its value. If its primary it will take Standard life blue color (#147cb3) and for secondary it will take default color (#051a3f) |
variant="primary | secondary" |
|
disabled |
Boolean |
Determine if button is disabled. |
disabled= true | false |
|
size |
String |
Determine the size of button |
size = small | large |
Methods
|
Name |
Description |
|
|
click() |
Handle a click on the icon button. |
|
|
focus() |
Sets focus on the icon button. |
options: FocusOptions |
|
blur() |
Removes focus from the icon button. |
|
Method usage
<co-icon-button name="cross" set="16"></co-icon-button>
<script>
const iconButton = document.querySelector('co-icon-button');
iconButton.focus();
iconButton.click();
iconButton.click();
</script>
Dependencies
This component automatically imports the following dependencies.
<co-icon></co-icon>