primeng
Version:
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,
468 lines (461 loc) • 20.6 kB
TypeScript
import { ButtonPassThrough, ButtonSize, ButtonVariant, ButtonIconPosition, ButtonSeverity, ButtonProps, ButtonLoadingIconTemplateContext, ButtonIconTemplateContext, ButtonDirectiveOptions } from 'primeng/types/button';
export * from 'primeng/types/button';
import * as _angular_core from '@angular/core';
import { InjectionToken, TemplateRef } from '@angular/core';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Fluid } from 'primeng/fluid';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/ripple';
import { BadgeSeverity } from 'primeng/types/badge';
import { CSSProperties } from 'primeng/types/shared';
/**
*
* Button is an extension to standard button element with icons and theming.
*
* [Live Demo](https://www.primeng.org/button/)
*
* @module buttonstyle
*
*/
declare enum ButtonClasses {
/**
* Class name of the root element
*/
root = "p-button",
/**
* Class name of the loading icon element
*/
loadingIcon = "p-button-loading-icon",
/**
* Class name of the icon element
*/
icon = "p-button-icon",
/**
* Class name of the label element
*/
label = "p-button-label"
}
declare class ButtonStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
[x: string]: any;
'p-button-icon-only': any;
'p-button-vertical': any;
'p-button-loading': any;
'p-button-link': any;
'p-button-raised': any;
'p-button-rounded': any;
'p-button-text': any;
'p-button-outlined': any;
'p-button-sm': boolean;
'p-button-lg': boolean;
'p-button-plain': any;
'p-button-fluid': any;
})[];
loadingIcon: string;
icon: ({ instance }: {
instance: any;
}) => any[];
spinnerIcon: ({ instance }: {
instance: any;
}) => string;
label: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ButtonStyle>;
}
interface ButtonStyle extends BaseStyle {
}
declare const BUTTON_INSTANCE: InjectionToken<Button>;
/**
* @deprecated Use the `[pButton]` directive instead.
* @group Components
*/
declare class Button extends BaseComponent<ButtonPassThrough> {
componentName: string;
hostName: _angular_core.InputSignal<any>;
$pcButton: Button | undefined;
bindDirectiveInstance: Bind;
_componentStyle: ButtonStyle;
onAfterViewChecked(): void;
/**
* Type of the button.
* @group Props
*/
type: _angular_core.InputSignal<string>;
/**
* Value of the badge.
* @group Props
*/
badge: _angular_core.InputSignal<string | undefined>;
/**
* When present, it specifies that the component should be disabled.
* @group Props
*/
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a shadow to indicate elevation.
* @group Props
*/
raised: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a circular border radius to the button.
* @group Props
*/
rounded: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a textual class to the button without a background initially.
* @group Props
*/
text: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a plain textual class to the button without a background initially.
* @group Props
*/
plain: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a border class without a background initially.
* @group Props
*/
outlined: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a link style to the button.
* @group Props
*/
link: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a tabindex to the button.
* @group Props
*/
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Defines the size of the button.
* @group Props
*/
size: _angular_core.InputSignal<ButtonSize | undefined>;
/**
* Specifies the variant of the component.
* @group Props
*/
variant: _angular_core.InputSignal<ButtonVariant | undefined>;
/**
* Inline style of the element.
* @group Props
*/
style: _angular_core.InputSignal<CSSProperties>;
/**
* Class of the element.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Severity type of the badge.
* @group Props
* @defaultValue secondary
*/
badgeSeverity: _angular_core.InputSignal<BadgeSeverity>;
/**
* Used to define a string that autocomplete attribute the current element.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Position of the icon.
* @group Props
*/
iconPos: _angular_core.InputSignal<ButtonIconPosition>;
/**
* Name of the icon.
* @group Props
*/
icon: _angular_core.InputSignal<string | undefined>;
/**
* Text of the button.
* @group Props
*/
label: _angular_core.InputSignal<string | undefined>;
/**
* Whether the button is in loading state.
* @group Props
*/
loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Icon to display in loading state.
* @group Props
*/
loadingIcon: _angular_core.InputSignal<string | undefined>;
/**
* Defines the style of the button.
* @group Props
*/
severity: _angular_core.InputSignal<ButtonSeverity>;
/**
* Used to pass all properties of the ButtonProps to the Button component.
* @group Props
*/
buttonProps: _angular_core.InputSignal<ButtonProps | undefined>;
/**
* Spans 100% width of the container when enabled.
* @defaultValue undefined
* @group Props
*/
fluid: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Forces icon-only styling regardless of content. When unset, icon-only is inferred from the absence of a label/badge.
* @group Props
*/
iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Callback to execute when button is clicked.
* This event is intended to be used with the <p-button> component. Using a regular <button> element, use (click).
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onClick: _angular_core.OutputEmitterRef<MouseEvent>;
/**
* Callback to execute when button is focused.
* This event is intended to be used with the <p-button> component. Using a regular <button> element, use (focus).
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
onFocus: _angular_core.OutputEmitterRef<FocusEvent>;
/**
* Callback to execute when button loses focus.
* This event is intended to be used with the <p-button> component. Using a regular <button> element, use (blur).
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
onBlur: _angular_core.OutputEmitterRef<FocusEvent>;
/**
* Custom content template.
* @group Templates
**/
contentTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom loading icon template.
* @group Templates
**/
loadingIconTemplate: _angular_core.Signal<TemplateRef<ButtonLoadingIconTemplateContext> | undefined>;
/**
* Custom icon template.
* @group Templates
**/
iconTemplate: _angular_core.Signal<TemplateRef<ButtonIconTemplateContext> | undefined>;
pcFluid: Fluid | null;
hasFluid: _angular_core.Signal<boolean>;
$type: _angular_core.Signal<string | undefined>;
$ariaLabel: _angular_core.Signal<string | undefined>;
mergedStyle: _angular_core.Signal<CSSProperties>;
$disabled: _angular_core.Signal<boolean | undefined>;
$severity: _angular_core.Signal<ButtonSeverity>;
$tabindex: _angular_core.Signal<number | undefined>;
$autofocus: _angular_core.Signal<boolean | undefined>;
$loading: _angular_core.Signal<boolean | undefined>;
$icon: _angular_core.Signal<string | undefined>;
$label: _angular_core.Signal<string | undefined>;
$badge: _angular_core.Signal<string | undefined>;
$loadingIcon: _angular_core.Signal<string | undefined>;
$badgeSeverity: _angular_core.Signal<BadgeSeverity | undefined>;
showLabel: _angular_core.Signal<string | false | undefined>;
showBadge: _angular_core.Signal<string | false | undefined>;
getLoadingIconTemplateContext(): {
class: string | undefined;
pt: any;
};
getIconTemplateContext(): {
class: string | undefined;
pt: any;
};
hasIcon: _angular_core.Signal<string | TemplateRef<ButtonLoadingIconTemplateContext> | undefined>;
$outlined: _angular_core.Signal<boolean>;
$text: _angular_core.Signal<boolean>;
$iconOnly: _angular_core.Signal<boolean | "" | undefined>;
dataP: _angular_core.Signal<string>;
dataIconP: _angular_core.Signal<string>;
dataLabelP: _angular_core.Signal<string>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "p-button", never, { "hostName": { "alias": "hostName"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "badgeSeverity": { "alias": "badgeSeverity"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "iconPos": { "alias": "iconPos"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingIcon": { "alias": "loadingIcon"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "buttonProps": { "alias": "buttonProps"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, ["contentTemplate", "loadingIconTemplate", "iconTemplate"], ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare const BUTTON_LABEL_INSTANCE: InjectionToken<ButtonLabel>;
/**
* ButtonLabel is a directive to apply label styling to an element inside a button.
*
* @deprecated Since v21. Place the label text directly inside the `[pButton]` host.
* The `pButtonLabel` directive will be removed in a future major release.
*
* @group Directives
*/
declare class ButtonLabel extends BaseComponent {
componentName: string;
/**
* Used to pass attributes to DOM elements inside the pButtonLabel.
* @defaultValue undefined
* @group Props
*/
pButtonLabelPT: _angular_core.InputSignal<any>;
/**
* Indicates whether the component should be rendered without styles.
* @defaultValue undefined
* @group Props
*/
pButtonLabelUnstyled: _angular_core.InputSignal<boolean | undefined>;
$pcButtonLabel: ButtonLabel | undefined;
bindDirectiveInstance: Bind;
constructor();
onAfterViewChecked(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonLabel, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonLabel, "[pButtonLabel]", never, { "pButtonLabelPT": { "alias": "pButtonLabelPT"; "required": false; "isSignal": true; }; "pButtonLabelUnstyled": { "alias": "pButtonLabelUnstyled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare const BUTTON_ICON_INSTANCE: InjectionToken<ButtonIcon>;
/**
* ButtonIcon is a directive to apply icon styling to an element inside a button.
*
* @deprecated Since v21. Place the icon (`<svg>`, `<i>`, or any element) directly
* inside the `[pButton]` host — use the `iconOnly` prop to enable icon-only styling.
* The `pButtonIcon` directive will be removed in a future major release.
*
* @group Directives
*/
declare class ButtonIcon extends BaseComponent {
componentName: string;
/**
* Used to pass attributes to DOM elements inside the pButtonIcon.
* @defaultValue undefined
* @group Props
*/
pButtonIconPT: _angular_core.InputSignal<any>;
/**
* Indicates whether the component should be rendered without styles.
* @defaultValue undefined
* @group Props
*/
pButtonUnstyled: _angular_core.InputSignal<boolean | undefined>;
$pcButtonIcon: ButtonIcon | undefined;
bindDirectiveInstance: Bind;
constructor();
onAfterViewChecked(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonIcon, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonIcon, "[pButtonIcon]", never, { "pButtonIconPT": { "alias": "pButtonIconPT"; "required": false; "isSignal": true; }; "pButtonUnstyled": { "alias": "pButtonUnstyled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* Button directive is an extension to button component.
* @group Directives
*/
declare class ButtonDirective extends BaseComponent {
componentName: string;
/**
* Bound configuration object. Fields win over the individual styling inputs
* (`text`, `raised`, `severity`, …); unset fields fall back to those inputs.
* @group Props
*/
pButton: _angular_core.InputSignal<string | ButtonDirectiveOptions | undefined>;
/**
* Used to pass attributes to DOM elements inside the Button component.
* @group Props
*/
pButtonPT: _angular_core.InputSignal<ButtonPassThrough>;
/**
* Indicates whether the component should be rendered without styles.
* @group Props
*/
pButtonUnstyled: _angular_core.InputSignal<boolean | undefined>;
/**
* @group Props
*/
hostName: _angular_core.InputSignal<any>;
/**
* Add a textual class to the button without a background initially.
* @group Props
*/
text: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a plain textual class to the button without a background initially.
* @group Props
*/
plain: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a shadow to indicate elevation.
* @group Props
*/
raised: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines the size of the button.
* @group Props
*/
size: _angular_core.InputSignal<ButtonSize | undefined>;
/**
* Add a border class without a background initially.
* @group Props
*/
outlined: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Renders the button as a textual link without background or border.
* @group Props
*/
link: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Add a circular border radius to the button.
* @group Props
*/
rounded: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Spans 100% width of the container when enabled.
* @group Props
*/
fluid: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Visual variant of the button. Equivalent to setting `text` or `outlined` individually.
* @group Props
*/
variant: _angular_core.InputSignal<ButtonVariant | undefined>;
/**
* Forces icon-only styling regardless of content. Works with any direct icon child
* (`<svg>`, `<i>`, custom).
* @group Props
*/
iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether the button is in loading state.
* @deprecated Manage loading state with native `disabled` and a child spinner; this input will be removed in a future release.
* @group Props
*/
loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines the style of the button.
* @group Props
*/
severity: _angular_core.InputSignal<ButtonSeverity>;
$pcButtonDirective: ButtonDirective | undefined;
bindDirectiveInstance: Bind;
pcFluid: Fluid | null;
_componentStyle: ButtonStyle;
private iconSignal;
private labelSignal;
/** @deprecated Use the `iconOnly` input instead. */
isIconOnly: _angular_core.Signal<boolean>;
styleClass: _angular_core.Signal<string>;
hostStyle: _angular_core.Signal<{
[klass: string]: any;
} | null>;
constructor();
onAfterViewChecked(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "[pButton]", never, { "pButton": { "alias": "pButton"; "required": false; "isSignal": true; }; "pButtonPT": { "alias": "pButtonPT"; "required": false; "isSignal": true; }; "pButtonUnstyled": { "alias": "pButtonUnstyled"; "required": false; "isSignal": true; }; "hostName": { "alias": "hostName"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; }, {}, ["iconSignal", "labelSignal"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }, { directive: typeof i2.Ripple; inputs: {}; outputs: {}; }]>;
}
declare class ButtonModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ButtonModule, never, [typeof ButtonDirective, typeof Button, typeof ButtonLabel, typeof ButtonIcon], [typeof ButtonDirective, typeof Button, typeof ButtonLabel, typeof ButtonIcon]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<ButtonModule>;
}
export { BUTTON_ICON_INSTANCE, BUTTON_INSTANCE, BUTTON_LABEL_INSTANCE, Button, ButtonClasses, ButtonDirective, ButtonIcon, ButtonLabel, ButtonModule, ButtonStyle };