finpro
Version:
90 lines • 2.39 kB
TypeScript
import { CSSResultGroup, TemplateResult } from 'lit';
import '../fp-icon/fp-icon';
import FinproElement from '../../internals/finpro-element';
export declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
export declare type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';
export declare type ButtonSize = 'small' | 'medium' | 'large';
export declare type TargetType = '_blank' | '_parent' | '_self' | '_top';
/**
* @tag fp-button
* @summary Finpro Button component
*
* @cssproperty --fp-button-display - Sets the display property of button. Default value is 'inline-block'.
* @cssproperty --fp-button-justify - Sets the justify-content property of button. Default value is 'center'.
*
*/
export default class FpButton extends FinproElement {
static get styles(): CSSResultGroup;
/**
* Sets the button variant
*/
variant: ButtonVariant;
/**
* Sets the button kind
*/
kind: ButtonKind;
/**
* Sets the button size
*/
size: ButtonSize;
/**
* Sets the button label. Used for accessibility.
*/
label: string;
/**
* Sets the button label for loading status.
*/
loadingLabel: string;
/**
* Sets loading state of button
*/
loading: boolean;
/**
* Sets button as disabled
*/
disabled: boolean;
/**
* Set link url. If set, button will be rendered as anchor tag.
*/
href?: string;
/**
* Sets the icon name. Shows icon with fp-icon component
*/
icon?: string;
/**
* Sets the anchor target. Used when `href` is set.
*/
target?: TargetType;
/**
* Sets the type of the button. Set `submit` to use button as the submitter of parent form.
*/
type: 'submit' | null;
/**
* Sets button type to dropdown
*/
dropdown: boolean;
/**
* Active state
*/
active: boolean;
private button;
/**
* Fires when button clicked
*/
private onClick;
private get _isActive();
private form;
connectedCallback(): void;
private caretTemplate;
private _handleClick;
focus(): void;
get _hasIconSlot(): boolean;
get _hasDefaultSlot(): boolean;
render(): TemplateResult;
}
declare global {
interface HTMLElementTagNameMap {
'fp-button': FpButton;
}
}
//# sourceMappingURL=fp-button.d.ts.map