@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
54 lines (53 loc) • 2.25 kB
TypeScript
import { PktElementWithSlot } from '../../base-elements/element-with-slot';
import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
import { Booleanish, THTMLButtonType } from '../../shared-types';
import { PropertyValues } from 'lit';
export type TPktButtonMode = 'light' | 'dark';
export type TPktButtonSize = 'small' | 'medium' | 'large';
export type TPktButtonColor = 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
export type TPktButtonSkin = 'primary' | 'secondary' | 'tertiary';
export type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
export type TPktButtonState = 'normal' | 'focus' | 'hover' | 'active';
export type TPktButtonType = THTMLButtonType;
export interface IPktButton {
iconName?: PktIconName;
secondIconName?: PktIconName;
iconPath?: string;
secondIconPath?: string;
mode?: TPktButtonMode;
size?: TPktButtonSize;
fullWidth?: Booleanish;
fullWidthOnMobile?: Booleanish;
color?: TPktButtonColor;
skin?: TPktButtonSkin;
variant?: TPktButtonVariant;
state?: TPktButtonState;
type?: TPktButtonType;
isLoading?: Booleanish;
disabled?: Booleanish;
loadingAnimationPath?: string;
}
export declare class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
iconName: string;
secondIconName: string;
iconPath: string | undefined;
secondIconPath: string | undefined;
mode?: TPktButtonMode;
size: TPktButtonSize;
fullWidth: Booleanish;
fullWidthOnMobile: Booleanish;
color?: TPktButtonColor;
skin: TPktButtonSkin;
variant: TPktButtonVariant;
state?: TPktButtonState;
type: TPktButtonType;
form: string | undefined;
isLoading: Booleanish;
disabled: Booleanish;
loadingAnimationPath: string | undefined;
connectedCallback(): void;
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
protected firstUpdated(_changedProperties: PropertyValues): void;
render(): import('lit-html').TemplateResult<1>;
}
export default PktButton;