pyro/dist/button/button.d.ts

Pyro custom elements

import { LitElement } from 'lit';
/**
 * Button element
 * [docs](https://pyrojs.com/el/button)
 *
 * ```html
 * <pyro-button variant="primary">Click me
 * </pyro-button>
 * ```
 *
 * @tag pyro-button
 *
 * @slot - Contents of the button
 * @slot icon-left - Icon on the left
 * @slot icon-right - Icon on the right
 *
 * @cssprop [--pyro-button-text-color=var(--pyro-text-color)] - `color`
 * @cssprop [--pyro-button-font-weight=inherit] - `font-weight`
 * @cssprop [--pyro-button-spacing=var(--pyro-spacing)] - default size or `padding`
 * @cssprop [--pyro-button-border=var(--pyro-border)] - `border`
 * @cssprop [--pyro-button-border-radius=var(--pyro-border-radius)] - `border`
 * @cssprop [--pyro-button-surface-color=var(--pyro-surface-color)] - default `background`
 * @cssprop [--pyro-button-primary-color=var(--pyro-primary-color)] - primary `background`
 * @cssprop [--pyro-text-color-on-primary=var(--pyro-text-color-on-primary)] - text `color` on primary
 * @cssprop [--pyro-button-secondary-color=var(--pyro-secondary-color)] - secondary `background`
 * @cssprop [--pyro-text-color-on-secondary=var(--pyro-text-color-on-secondary)] - text `color` on secondary
 * @cssprop [--pyro-button-tertiary-color=var(--pyro-tertiary-color)] - tertiary `background`
 * @cssprop [--pyro-text-color-on-tertiary=var(--pyro-text-color-on-tertiary)] - text `color` on tertiary
 * @cssprop [--pyro-text-color-on-transparent=var(--pyro-text-color-on-transparent)] - text `color` on transparent
 * @cssprop [--pyro-button-hover-color=var(--pyro-hover-color)] - `:hover` `background`
 * @cssprop [--pyro-button-disabled-color=var(--pyro-disabled-color)] - disabled `background`
 * @cssprop [--pyro-button-active-color=none] - `:active` `background`
 */
export declare class PyroButton extends LitElement {
    static styles: import('lit').CSSResult;
    /** Color variant of the button */
    variant?: 'primary' | 'secondary' | 'tertiary' | '';
    /** Button size */
    size?: 's' | 'm' | 'l';
    /** Enforces a transparent background */
    transparent?: boolean | undefined;
    /** Make the button into a circle */
    circle?: boolean | undefined;
    /** Disabled */
    disabled?: boolean | undefined;
    form?: string;
    type: 'button' | 'submit' | 'reset' | 'menu';
    render(): import('lit-html').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'pyro-button': PyroButton;
    }
}