# Button Button triggers user actions. It extends the standard button element with icons, semantic variants and appearances, sizes and shapes, loading state, and optional selection models while staying grounded in shared theming. ## Import ```ts import { ButtonComponent } from 'ui'; ``` ## Basic actions ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-basic-example', standalone: true, imports: [ButtonComponent], template: `
Submit Cancel
`, }) export class ButtonBasicExampleComponent {} ``` ## Appearance and variant ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-appearance-variant-example', standalone: true, imports: [ButtonComponent], template: `
Primary filled Primary tint Primary outline Primary subtle Primary transparent
Secondary filled Secondary tint Secondary outline Secondary subtle Secondary transparent
Success filled Success tint Success outline Success subtle Success transparent
Warning filled Warning tint Warning outline Warning subtle Warning transparent
Danger filled Danger tint Danger outline Danger subtle Danger transparent
Info filled Info tint Info outline Info subtle Info transparent
`, }) export class ButtonAppearanceVariantExampleComponent {} ``` ## Shapes ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-shapes-example', standalone: true, imports: [ButtonComponent], template: `
Rounded Square
`, }) export class ButtonShapesExampleComponent {} ``` ## Icons ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-icons-example', standalone: true, imports: [ButtonComponent], template: `
Save Edit Share Done Delete
`, }) export class ButtonIconsExampleComponent {} ``` ## Icon-only ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-icon-only-example', standalone: true, imports: [ButtonComponent], template: `
`, }) export class ButtonIconOnlyExampleComponent {} ``` ## Sizes ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-sizes-example', standalone: true, imports: [ButtonComponent], template: `
Small Medium Large
`, }) export class ButtonSizesExampleComponent {} ``` ## States and feedback ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-states-example', standalone: true, imports: [ButtonComponent], template: `
Save changes Saving... Disabled
`, }) export class ButtonStatesExampleComponent { loading = signal(false); save(): void { this.loading.set(true); setTimeout(() => { this.loading.set(false); }, 1000); } } ``` ## Layout and selection ```ts import { Component } from '@angular/core'; import { ButtonComponent } from 'ui'; @Component({ selector: 'app-button-other-example', standalone: true, imports: [ButtonComponent], template: `
Full width
Selectable off Selectable on
`, }) export class ButtonOtherExampleComponent {} ``` ## Accessibility ### Accessible name `ButtonComponent` renders a native `button`. The accessible name comes from projected content or the `text` input. Use `ariaLabel` when there is no suitable visible label (required for icon-only). The component does not translate strings, so pass localized `text`, `ariaLabel`, or projected content from your app. ### Keyboard Focus uses the inner native button; the `ui-button` host is not an extra tab stop. Use `tabIndex` only to adjust order on the inner button; call `ButtonComponent.focus()` to focus it from code. | Key | Action | | --- | --- | | Tab | Moves focus to or from the button. | | Enter / Space | Activates the button when focused and not disabled or loading. | ### ARIA | Input / state | Attribute | | --- | --- | | `ariaLabel` | `aria-label` | | `selectable` and role is not `radio` | `aria-pressed` mirrors `selected` | | `role` is `radio` | `aria-checked` from `ariaChecked` or `selected` | | `disabled` | native `disabled` | | `loading` | click ignored; no automatic `disabled` or `aria-busy`, combine with `disabled` if needed |