@anguless/angulux/button

button

4 declarations7 demos

import

import { ButtonModule } from '@anguless/angulux/button';

Basic

Text to display on a button is defined with the label property.

<agl-button label="Submit" />

Directive

Button can also be used as a directive with aglButton, together with the aglButtonLabel and aglButtonIcon helpers.

<button aglButton>    <i class="pi pi-check" aglButtonIcon></i>    <span aglButtonLabel>Save</span></button>

Severity

Severity defines the type of button.

<agl-button label="Primary" /><agl-button label="Secondary" severity="secondary" /><agl-button label="Success" severity="success" /><agl-button label="Info" severity="info" /><agl-button label="Warn" severity="warn" /><agl-button label="Help" severity="help" /><agl-button label="Danger" severity="danger" /><agl-button label="Contrast" severity="contrast" />

Icons

The icon of a button is specified with the icon property, and its position is configured with iconPos.

<agl-button icon="pi pi-home" ariaLabel="Home" /><agl-button label="Profile" icon="pi pi-user" /><agl-button label="Save" icon="pi pi-check" iconPos="right" /><agl-button label="Search" icon="pi pi-search" iconPos="top" /><agl-button label="Update" icon="pi pi-refresh" iconPos="bottom" />

Sizes

Button provides small and large sizes as alternatives to the standard.

<agl-button label="Small" icon="pi pi-check" size="small" /><agl-button label="Normal" icon="pi pi-check" /><agl-button label="Large" icon="pi pi-check" size="large" />

Loading

Busy state is controlled with the loading property.

<agl-button label="Search" icon="pi pi-check" [loading]="loading()" (onClick)="load()" />

Disabled

When disabled is present, the element cannot be edited or focused.

<agl-button label="Submit" [disabled]="true" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

ButtonLabel

directive[aglButtonLabel]

Input	Type	Default	Description
ptButtonLabel deprecated — use pButtonLabelPT instead.	any	undefined	Used to pass attributes to DOM elements inside the aglButtonLabel.
pButtonLabelPT	any	undefined	Used to pass attributes to DOM elements inside the aglButtonLabel.
pButtonLabelUnstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

ButtonIcon

directive[aglButtonIcon]

Input	Type	Default	Description
ptButtonIcon deprecated — use pButtonIconPT instead.	any	undefined	Used to pass attributes to DOM elements inside the aglButtonIcon.
pButtonIconPT	any	undefined	Used to pass attributes to DOM elements inside the aglButtonIcon.
pButtonUnstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

ButtonDirective

directive[aglButton]

Button directive is an extension to button component.

Input	Type	Default	Description
ptButtonDirective deprecated — use pButtonPT instead.	ButtonPassThrough	undefined	Used to pass attributes to DOM elements inside the Button component.
pButtonPT	ButtonPassThrough	undefined	Used to pass attributes to DOM elements inside the Button component.
pButtonUnstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
hostName	any	not documented
text	boolean	not documented	Add a textual class to the button without a background initially.
plain	boolean	not documented	Add a plain textual class to the button without a background initially.
raised	boolean	not documented	Add a shadow to indicate elevation.
size	'small' \| 'large' \| undefined	not documented	Defines the size of the button.
outlined	boolean	not documented	Add a border class without a background initially.
rounded	boolean	not documented	Add a circular border radius to the button.
iconPos	ButtonIconPosition	not documented	Position of the icon.
loadingIcon	string \| undefined	not documented	Icon to display in loading state.
fluid		undefined	Spans 100% width of the container when enabled.
label deprecated — use aglButtonLabel directive instead.	string \| undefined	not documented	Text of the button.
icon deprecated — use aglButtonIcon directive instead	string	not documented	Name of the icon.
loading	boolean	not documented	Whether the button is in loading state.
buttonProps deprecated — assign props directly to the button element.	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the Button component.
severity	ButtonSeverity	not documented	Defines the style of the button.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

Button

componentagl-button

Button is an extension to standard button element with icons and theming.

Input	Type	Default	Description
hostName	any	not documented
type	string	not documented	Type of the button.
badge	string \| undefined	not documented	Value of the badge.
disabled	boolean \| undefined	not documented	When present, it specifies that the component should be disabled.
raised	boolean	not documented	Add a shadow to indicate elevation.
rounded	boolean	not documented	Add a circular border radius to the button.
text	boolean	not documented	Add a textual class to the button without a background initially.
plain	boolean	not documented	Add a plain textual class to the button without a background initially.
outlined	boolean	not documented	Add a border class without a background initially.
link	boolean	not documented	Add a link style to the button.
tabindex	number \| undefined	not documented	Add a tabindex to the button.
size	'small' \| 'large' \| undefined	not documented	Defines the size of the button.
variant	'outlined' \| 'text' \| undefined	not documented	Specifies the variant of the component.
style	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the element.
styleClass	string \| undefined	not documented	Class of the element.
badgeClass deprecated — use badgeSeverity instead.	string \| undefined	not documented	Style class of the badge.
badgeSeverity	'success' \| 'info' \| 'warn' \| 'danger' \| 'help' \| 'primary' \| 'secondary' \| 'contrast' \| null \| undefined	secondary	Severity type of the badge.
ariaLabel	string \| undefined	not documented	Used to define a string that autocomplete attribute the current element.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
iconPos	ButtonIconPosition	not documented	Position of the icon.
icon	string \| undefined	not documented	Name of the icon.
label	string \| undefined	not documented	Text of the button.
loading	boolean	not documented	Whether the button is in loading state.
loadingIcon	string \| undefined	not documented	Icon to display in loading state.
severity	ButtonSeverity	not documented	Defines the style of the button.
buttonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the Button component.
fluid		undefined	Spans 100% width of the container when enabled.

Output	Type	Description
onClick	EventEmitter<MouseEvent>	Callback to execute when button is clicked. This event is intended to be used with the <agl-button> component. Using a regular <button> element, use (click).
onFocus	EventEmitter<FocusEvent>	Callback to execute when button is focused. This event is intended to be used with the <agl-button> component. Using a regular <button> element, use (focus).
onBlur	EventEmitter<FocusEvent>	Callback to execute when button loses focus. This event is intended to be used with the <agl-button> component. Using a regular <button> element, use (blur).

Template slot	Description
<ng-template #content>	Custom content template.
<ng-template #loadingicon>	Custom loading icon template.
<ng-template #icon>	Custom icon template.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.