Package Exports
- @unc-dsi/unc-push-button
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@unc-dsi/unc-push-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
<unc-push-button>
<unc-push-button> is a button with a pushed state.
<unc-push-button>Click Me!</unc-push-button>
<unc-push-button pushed>Already pushed</unc-push-button>
Attributes / Properties
| Name | Description |
|---|---|
| pushed | State of the button |
| disabled | To disabled the button |
Events
| Name | Description |
|---|---|
| push | Fire when the button is pushed : {detail: { pushed }} |
Styling
| Name | Default Lumo value | Default value | Description |
|---|---|---|---|
| --unc-push-button-border-color | --lumo-shade-10pct | hsla(214, 57%, 24%, 0.1) | Border color around the button |
| --unc-push-button-border-radius | --lumo-border-radius-l | 0.5rem | Border radius around the button |
| --unc-push-button-hover-shadow | --lumo-box-shadow-s | "0 2px 4px -1px hsla(214, 53%, 23%, 0.16), 0 3px 12px -1px hsla(214, 50%, 22%, 0.26" | Shadow when the button is hover |
| --unc-push-button-padding | --lumo-space-m | 1rem | Padding inside the button |
| --unc-push-button-font-size | --lumo-font-size-l | 1.125rem | Font size of the text inside the button |
| --unc-push-button-color | --lumo-body-text-color | hsla(214, 40%, 16%, 0.94) | Color of the text inside the button when is not pushed |
| --unc-push-button-bg-color | --lumo-base-color | #fff | Background color of the text inside the button when is not pushed |
| --unc-push-button-pushed-color | --lumo-base-color | #fff | Color of the text inside the button when is pushed |
| --unc-push-button-pushed-bg-color | --lumo-primary-color | hsla(214, 100%, 49%, 0.76) | Background color of the text inside the button when is pushed |
| --unc-push-button-pushed-shadow | N/A | inset 0px 0px var(--lumo-space-s, 0.5rem) var(--pushed-color) | Shadow of the button when is pushed |
License
Apache License 2.0