# 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 'primeng/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 'primeng/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 'primeng/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 'primeng/button';
import { RippleModule } from 'primeng/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 'primeng/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 'primeng/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 'primeng/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 'primeng/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 'primeng/button';
@Component({
template: `
`,
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 'primeng/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 'primeng/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 'primeng/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 'primeng/button';
@Component({
template: `
`,
standalone: true,
imports: [ButtonModule]
})
export class ButtonRaisedTextDemo {}
```
## rounded-doc
Rounded buttons have a circular border radius.
```typescript
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/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 'primeng/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 'primeng/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 'primeng/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 'primeng/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 | Object | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. |
| pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. |
| ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. |
| type | string | - | Type of the button. |
| badge | string | - | Value of the badge. |
| disabled | boolean | - | When present, it specifies that the component should be disabled. |
| raised | boolean | - | Add a shadow to indicate elevation. |
| rounded | boolean | - | Add a circular border radius to the button. |
| text | boolean | - | Add a textual class to the button without a background initially. |
| plain | boolean | - | Add a plain textual class to the button without a background initially. |
| outlined | boolean | - | Add a border class without a background initially. |
| link | boolean | - | Add a link style to the button. |
| tabindex | number | - | Add a tabindex to the button. |
| size | "small" \| "large" | - | Defines the size of the button. |
| variant | "outlined" \| "text" | - | Specifies the variant of the component. |
| style | Partial | - | Inline style of the element. |
| styleClass | string | - | Class of the element. |
| badgeSeverity | "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| null | secondary | Severity type of the badge. |
| ariaLabel | string | - | Used to define a string that autocomplete attribute the current element. |
| autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. |
| iconPos | "left" \| "right" \| "top" \| "bottom" | - | Position of the icon. |
| icon | string | - | Name of the icon. |
| label | string | - | Text of the button. |
| loading | boolean | - | Whether the button is in loading state. |
| loadingIcon | string | - | Icon to display in loading state. |
| severity | "success" \| "info" \| "warn" \| "danger" \| "help" \| "primary" \| "secondary" \| "contrast" \| null \| undefined | - | Defines the style of the button. |
| buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. |
| fluid | boolean | 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