# button

```ts
import { … } from '@anguless/angulux/button';
```

## ButtonLabel

`[aglButtonLabel]` — directive

| Input | Type | Default | Description |
| --- | --- | --- | --- |
| `ptButtonLabel` | `any` | `undefined` | Used to pass attributes to DOM elements inside the aglButtonLabel. **Deprecated:** use pButtonLabelPT instead. |
| `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. |

## ButtonIcon

`[aglButtonIcon]` — directive

| Input | Type | Default | Description |
| --- | --- | --- | --- |
| `ptButtonIcon` | `any` | `undefined` | Used to pass attributes to DOM elements inside the aglButtonIcon. **Deprecated:** use pButtonIconPT instead. |
| `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. |

## ButtonDirective

`[aglButton]` — directive

Button directive is an extension to button component.

| Input | Type | Default | Description |
| --- | --- | --- | --- |
| `ptButtonDirective` | `ButtonPassThrough` | `undefined` | Used to pass attributes to DOM elements inside the Button component. **Deprecated:** use pButtonPT instead. |
| `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` | `string \| undefined` | _not documented_ | Text of the button. **Deprecated:** use aglButtonLabel directive instead. |
| `icon` | `string` | _not documented_ | Name of the icon. **Deprecated:** use aglButtonIcon directive instead |
| `loading` | `boolean` | _not documented_ | Whether the button is in loading state. |
| `buttonProps` | `ButtonProps` | _not documented_ | Used to pass all properties of the ButtonProps to the Button component. **Deprecated:** assign props directly to the button element. |
| `severity` | `ButtonSeverity` | _not documented_ | Defines the style of the button. |

## Button

`agl-button` — component

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` | `string \| undefined` | _not documented_ | Style class of the badge. **Deprecated:** use badgeSeverity instead. |
| `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). |