primeng/types/primeng-types-button.d.ts

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

import { TemplateRef } from '@angular/core';
import { PassThrough, PassThroughOption } from 'primeng/api';
import { BadgePassThrough, BadgeSeverity } from 'primeng/types/badge';
import { CSSProperties } from 'primeng/types/shared';

/**
 * Custom pass-through(pt) options.
 * @template I Type of instance.
 *
 * @see {@link Button.pt}
 * @group Interface
 */
interface ButtonPassThroughOptions<I = unknown> {
    /**
     * Used to pass attributes to the host DOM element.
     */
    host?: PassThroughOption<HTMLElement, I>;
    /**
     * Used to pass attributes to the root's DOM element.
     */
    root?: PassThroughOption<HTMLButtonElement, I>;
    /**
     * Used to pass attributes to the loading icon's DOM element.
     */
    loadingIcon?: PassThroughOption<HTMLSpanElement, I>;
    /**
     * Used to pass attributes to the icon's DOM element.
     */
    icon?: PassThroughOption<HTMLSpanElement, I>;
    /**
     * Used to pass attributes to the label's DOM element.
     */
    label?: PassThroughOption<HTMLSpanElement, I>;
    /**
     * Used to pass attributes to the Badge component.
     */
    pcBadge?: BadgePassThrough;
}
/**
 * Defines valid pass-through options in Button component.
 * @see {@link ButtonPassThroughOptions}
 *
 * @template I Type of instance.
 */
type ButtonPassThrough<I = unknown> = PassThrough<I, ButtonPassThroughOptions<I>>;
/**
 * Custom icon template context.
 * @group Interface
 */
interface ButtonIconTemplateContext {
    /**
     * Style class of the icon.
     */
    class: string;
    /**
     * Pass-through options for the icon element.
     */
    pt: any;
}
/**
 * Custom loading icon template context.
 * @group Interface
 */
interface ButtonLoadingIconTemplateContext {
    /**
     * Style class of the loading icon.
     */
    class: string;
    /**
     * Pass-through options for the loading icon element.
     */
    pt: any;
}
/**
 * Defines valid templates in Button.
 * @group Templates
 */
interface ButtonTemplates {
    /**
     * Custom content template.
     */
    content(): TemplateRef<void>;
    /**
     * Custom icon template.
     * @param {Object} context - icon context.
     */
    icon(context: ButtonIconTemplateContext): TemplateRef<ButtonIconTemplateContext>;
    /**
     * Custom loading icon template.
     * @param {Object} context - loading icon context.
     */
    loadingicon(context: ButtonLoadingIconTemplateContext): TemplateRef<ButtonLoadingIconTemplateContext>;
}
type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
type ButtonVariant = 'outlined' | 'text' | 'link';
interface ButtonProps {
    type?: string;
    iconPos?: ButtonIconPosition;
    icon?: string | undefined;
    badge?: string | undefined;
    label?: string | undefined;
    disabled?: boolean | undefined;
    loading?: boolean;
    loadingIcon?: string | undefined;
    raised?: boolean;
    rounded?: boolean;
    text?: boolean;
    plain?: boolean;
    severity?: ButtonSeverity;
    outlined?: boolean;
    link?: boolean;
    tabindex?: number | undefined;
    size?: 'small' | 'large' | undefined;
    style?: CSSProperties;
    styleClass?: string | undefined;
    badgeSeverity?: BadgeSeverity;
    ariaLabel?: string | undefined;
    autofocus?: boolean | undefined;
    variant?: string | undefined;
}
type ButtonSeverity = 'success' | 'info' | 'warn' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;
type ButtonSize = 'small' | 'large';
/**
 * Configuration object accepted by the `[pButton]` directive. Bundles every styling
 * option in one place; unset fields fall back to the directive's individual inputs.
 */
interface ButtonDirectiveOptions {
    severity?: ButtonSeverity;
    variant?: ButtonVariant;
    size?: ButtonSize;
    raised?: boolean;
    rounded?: boolean;
    plain?: boolean;
    text?: boolean;
    outlined?: boolean;
    link?: boolean;
    fluid?: boolean;
    iconOnly?: boolean;
    style?: CSSProperties;
    styleClass?: string;
}

export type { ButtonDirectiveOptions, ButtonIconPosition, ButtonIconTemplateContext, ButtonLoadingIconTemplateContext, ButtonPassThrough, ButtonPassThroughOptions, ButtonProps, ButtonSeverity, ButtonSize, ButtonTemplates, ButtonVariant };