Button
A basic button with a solid accent background. Colours come from the --accent CSS variables.
Examples
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--accent | R, G, B | 86, 88, 84 | Base colour, used as rgb(var(--accent)). |
--accent-dark | R, G, B | 29, 10, 11 | Hover colour. |
--accent-light | R, G, B | 204, 204, 210 | Active (pressed) colour. |
Usage
<zakuni-button>Save</zakuni-button>Attach a click listener as you would to a native button. Override the --accent variables on the element to change its colour.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('zakuni-button')
export class ZakuniButton extends LitElement {
static styles = css`
button {
background: rgb(var(--accent));
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
font-size: 1rem;
font-weight: 700;
padding: 0.5em 1em;
}
button:hover {
background: rgb(var(--accent-dark));
}
button:active {
background: rgb(var(--accent-light));
}
`;
render() {
return html`
<button>Button</button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-button": ZakuniButton;
}
}