# Angular Button Component Button is an extension to standard button element with icons and theming. ## Accessibility Screen Reader Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly. ## Badge Buttons have built-in badge support with badge and badgeClass properties. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonBadgeDemo {} ``` ## Basic Text to display on a button is defined with the label property. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonBasicDemo {} ``` ## Button Group Multiple buttons are grouped when wrapped inside an element with ButtonGroup component. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonButtongroupDemo {} ``` ## buttonset-doc Multiple buttons are grouped when wrapped inside an element with p-buttonset class. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; import { RippleModule } from '@bdspark/sparkng/ripple'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, RippleModule] }) export class ButtonButtonsetDemo {} ``` ## Directive Button can also be used as directive using pButton along with pButtonLabel and pButtonIcon helper directives. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonDirectiveDemo {} ``` ## Disabled When disabled is present, the element cannot be edited and focused. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonDisabledDemo {} ``` ## Icons Icon of a button is specified with icon property and position is configured using iconPos attribute. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonIconsDemo {} ``` ## iconsonly-doc Buttons can have icons without labels. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonIconsonlyDemo {} ``` ## Link A button can be rendered as a link when link property is present, while the pButton directive can be applied on an anchor element to style the link as a button. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
Angular Website Router Link
`, standalone: true, imports: [ButtonModule] }) export class ButtonLinkDemo {} ``` ## Loading Busy state is controlled with the loading property. ```typescript import { Component, signal } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonLoadingDemo { loading = signal(false); load() { this.loading.set(true); setTimeout(() => { this.loading.set(false); }, 2000); } } ``` ## Outlined Outlined buttons display a border without a background initially. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonOutlinedDemo {} ``` ## Raised Raised buttons display a shadow to indicate elevation. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonRaisedDemo {} ``` ## Raised Text Text buttons can be displayed as raised for elevation. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonRaisedtextDemo {} ``` ## Rounded Rounded buttons have a circular border radius. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonRoundedDemo {} ``` ## Severity Severity defines the type of button. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonSeverityDemo {} ``` ## Sizes Button provides small and large sizes as alternatives to the standard. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonSizesDemo {} ``` ## Template Custom content inside a button is defined as children. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonTemplateDemo {} ``` ## Text Text buttons are displayed as textual elements. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@bdspark/sparkng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonTextDemo {} ``` ## Button Button is an extension to standard button element with icons and theming. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | InputSignal | undefined | Defines scoped design tokens of the component. | | unstyled | InputSignal | undefined | Indicates whether the component should be rendered without styles. | | pt | InputSignal | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | InputSignal | undefined | Used to configure passthrough(pt) options of the component. | | type | string | - | Type of the button. | | badge | string | - | Value of the badge. | | disabled | boolean | false | When present, it specifies that the component should be disabled. | | raised | boolean | false | Add a shadow to indicate elevation. | | rounded | boolean | false | Add a circular border radius to the button. | | text | boolean | false | Add a textual class to the button without a background initially. | | plain | boolean | false | Add a plain textual class to the button without a background initially. | | outlined | boolean | false | Add a border class without a background initially. | | link | boolean | false | Add a link style to the button. | | tabindex | number | - | Add a tabindex to the button. | | size | "large" \| "small" | - | Defines the size of the button. | | variant | "outlined" \| "text" | - | Specifies the variant of the component. | | style | { [klass: string]: any } | - | Inline style of the element. | | styleClass | string | - | Class of the element. | | badgeClass | string | - | Style class of the badge. **(Deprecated)** | | badgeSeverity | "success" \| "info" \| "warn" \| "danger" \| "secondary" \| "contrast" \| "help" \| "primary" | secondary | Severity type of the badge. | | ariaLabel | string | - | Used to define a string that autocomplete attribute the current element. | | autofocus | boolean | false | When present, it specifies that the component should automatically get focus on load. | | iconPos | ButtonIconPosition | - | Position of the icon. | | icon | string | - | Name of the icon. | | label | string | - | Text of the button. | | loading | boolean | false | Whether the button is in loading state. | | loadingIcon | string | - | Icon to display in loading state. | | severity | ButtonSeverity | - | Defines the style of the button. | | buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | fluid | InputSignalWithTransform | undefined | Spans 100% width of the container when enabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClick | event: MouseEvent | Callback to execute when button is clicked. This event is intended to be used with the component. Using a regular