Installation
Coming soon..
Key points
- Slot Prefix may have a size of either 16px or 24px icons.
- Slot Suffix must have a size of 16px icon.
- Placeholder button only allows 24px sized icons to be used as Prefixes.
Examples
<co-button variant="primary">Primary</co-button>
Button
<co-button variant="primary" dataTheme="invert">Primary</co-button>
Button - Invert theme
<co-button variant="primary">
<co-icon set="24" slot="prefix" name="check"></co-icon>
Primary
</co-button>
Using icons - Icon left example
<co-button variant="primary">
<co-icon set="16" slot="suffix" name="check"></co-icon>
Primary
</co-button>
Using icons - Icon right example
<co-button variant="primary">
<co-icon set="16" slot="prefix" name="check"></co-icon>
<co-icon set="16" slot="suffix" name="check"></co-icon>
Primary
</co-button>
Using icons - Icon left and right example
<co-button variant="primary" dataTheme="invert">
<co-icon set="24" slot="prefix" name="check"></co-icon>
Primary
</co-button>
Invert theme - Icon left example
<co-button variant="primary" dataTheme="invert">
<co-icon set="16" slot="suffix" name="check"></co-icon>
Primary
</co-button>
Invert theme - Icon right example
<co-button variant="primary" dataTheme="invert">
<co-icon set="16" slot="prefix" name="check"></co-icon>
<co-icon set="16" slot="suffix" name="check"></co-icon>
Primary
</co-button>
Invert theme - Icon left and right example
<co-button variant="primary" disabled>Primary</co-button>
Disabled buttons
<co-button variant="primary" dataTheme="invert" disabled>Primary</co-button>
Disabled buttons - Invert theme
<co-button variant="primary" expand>Primary</co-button>
Expanded button
<co-button-placeholder>
<co-icon set="24" slot="prefix" name="plus"></co-icon>
Add a payment
</co-button-placeholder>
<co-button-placeholder expand>
<co-icon set="24" slot="prefix" name="plus"></co-icon>
Add a payment
</co-button-placeholder>
Placeholder button
<co-button-placeholder dataTheme="invert">
<co-icon set="24" slot="prefix" name="plus"></co-icon> Add a payment
</co-button-placeholder>
Placeholder button - Invert theme
<co-button-placeholder disabled>
<co-icon set="24" slot="prefix" name="plus"></co-icon> Add a payment
</co-button-placeholder>
Placeholder button - disabled
<co-button variant="doubleOpt" label="Delete">
<span slot="prefix"><co-icon name="trash" set="24"></co-icon></span>
</co-button>
DoubleOpt button
<co-button variant="doubleOpt" label="Delete" dataTheme="invert">
<span slot="prefix"><co-icon name="trash" set="24"></co-icon></span>
</co-button>
DoubleOpt button - Invert theme
Button Group examples :
Fixed Layout - Fixed layout will be shown horizontal on all viewports or medium and above breakpoints.
These do not change to stacked no matter the breakpoint or viewport size.
For button group pair in fixed layout , use co-button-group-pair class.
For button group in fixed layout, use co-button-group class.
<div class="co-button-group-pair" dataTheme="light">
<co-button variant="primary">Primary</co-button>
<co-button variant="secondary">Secondary</co-button>
</div>
Button group pair - Fixed layout
Button group pair - For all viewports
<div class="co-button-group" dataTheme="light">
<div class="co-button-group-pair">
<co-button variant="primary">Primary</co-button>
<co-button variant="secondary">Secondary</co-button>
</div>
<co-button variant="tertiary">Tertiary</co-button>
</div>
Button group - Fixed layout
Button group - For all viewports
Responsive Layout
Responsive layout - Responsive layout will be shown if the user opts for responsive button groups.
For button group pair in responsive layout , use co-button-group-fluid-pair class.
For button group in responsive layout, use co-button-group-fluid class.
<div class="co-button-group-fluid-pair" dataTheme="light">
<co-button variant="primary" expand>Primary</co-button>
<co-button variant="secondary" expand>Secondary</co-button>
</div>
Button group pair - Responsive layout
Button group pair - Responsive layout - Small screen
<div class="co-button-group-fluid" dataTheme="light">
<div class="co-button-group-fluid-pair">
<co-button variant="primary" expand>Primary</co-button>
<co-button variant="secondary" expand>Secondary</co-button>
</div>
<co-button variant="tertiary" expand>Tertiary</co-button>
</div>
Button group - Responsive layout
Button group - Responsive layout - Small screen
Properties
|
Property |
Type |
Description |
Usage |
|
variant |
String |
Determine variant or type of button |
variant = "primary" | "secondary"| "tertiary" | "doubleOpt"| "placeholder" |
|
expand |
Boolean |
Determine width of the button on mobile devices |
expand = true | false |
|
disabled |
Boolean |
Disables the button |
disabled = true | false |
|
dataTheme |
String |
Define theme dark(invert) or light |
dataTheme = "invert" | "light" |
Methods
|
Name |
Description |
|
click() |
Handle a click on the button. |
Method usage
<co-button variant="doubleOpt" label="Delete" dataTheme="invert">
<span slot="prefix"><co-icon name="trash" set="24"></co-icon></span>
</co-button>
<script>
const button = document.querySelector('co-button');
button.click();
</script>
Dependencies
This component automatically imports the following dependency.
<co-icon></co-icon>