0.0.4 • Published 3 years ago
obj-button
A clickable button component.
💡 Live demo
Installation
npm install @objekt/obj-button
Example
Primary:
<obj-button label="Primary" type="primary"></obj-button>
<obj-button label="Disabled" type="primary" disabled></obj-button>
<obj-button label="Invert" type="primary" invert></obj-button>
Secondary:
<obj-button label="Secondary" type="secondary"></obj-button>
<obj-button label="Disabled" type="secondary" disabled></obj-button>
<obj-button label="Invert" type="secondary" invert></obj-button>
Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|---|
disabled | disabled | | boolean | false | |
invert | invert | | boolean | false | Set to invert the component colors for rendering on dark backgrounds. |
label | label | | string | "" | The button display label. |
override | | | | | The element style template. |
styles | | readonly | CSSResult[] | | |
type | type | | string | "secondary" | The button display type. e.g. primary, secondary. |
Methods
| Method | Type |
|---|
#handleClick | (e: MouseEvent): void |
Events
| Event | Description |
|---|
click | Dispatched when the button is clicked. |
CSS Shadow Parts
| Part | Description |
|---|
button | The button container. |
CSS Custom Properties
| Property |
|---|
--obj-button-border-radius |
--obj-button-padding |
--obj-button-primary-background |
--obj-button-primary-border |
--obj-button-primary-disabled-background |
--obj-button-primary-disabled-border |
--obj-button-primary-disabled-font-color |
--obj-button-primary-font-color |
--obj-button-primary-font-family |
--obj-button-primary-font-size |
--obj-button-primary-font-weight |
--obj-button-primary-invert-background |
--obj-button-primary-invert-border |
--obj-button-primary-invert-font-color |
--obj-button-secondary-background |
--obj-button-secondary-border |
--obj-button-secondary-disabled-background |
--obj-button-secondary-disabled-border |
--obj-button-secondary-disabled-font-color |
--obj-button-secondary-font-color |
--obj-button-secondary-font-family |
--obj-button-secondary-font-size |
--obj-button-secondary-font-weight |
--obj-button-secondary-invert-background |
--obj-button-secondary-invert-border |
--obj-button-secondary-invert-font-color |
--obj-button-text-align |