@talenra/components documentation
  1. Components
  2. ButtonComponent

File

button/src/button/button.component.ts

Description

Button in different sizes and style variants.

Example :
<button talenra-button label="Button Label"></button>
<button talenra-button label="Submit" kind="secondary" size="s" disabled type="submit"></button>

Label

If a Button's width is limited (e.g by CSS or a parent element), the label is truncated as required (using ellipsis).

  • DO use input property label to set the Button's label.
  • DO NOT inject text to the button element to set the Button's label.
  • DO NOT inject HTML child elements as the result will most probably not comply with the style guide.

Kind

The button's kind determines its visual style.

  • primary → default, e.g. "submit"
  • secondary → secondary action, e.g. "cancel"
  • ghost → no background, e.g. icon-only buttons

Size

The button's size determines its height and font-size.

  • m → medium (default)
  • s → small

Icon

Buttons can have an optional icon. If used in combination with a label, the icon is always placed on the left side of the label.

Example :
<button talenra-button label="Reload" icon="refresh"></button>

To render an icon-only button, just omit the label text. The icon will be rendered in the center of the button.

Example :
<button talenra-button size="s" icon="refresh"></button>

Waiting (Spinner)

While waiting is true, the button's label and icon are hidden and a loading indicator (spinner) is presented to the user instead.

Example :
<button talenra-button label="My Label" waiting></button>
<button talenra-button label="My Label" [waiting]="myCondition"></button>

Import

Example :
import { ButtonComponent } from '@talenra/components/button';

../../../#/button

Implements

OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector button[talenra-button]
imports IconComponent SpinnerComponent
styleUrls ./button.component.scss
templateUrl ./button.component.html

Index

Methods
Inputs

Inputs

disabled
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Prevents the user from interacting with the button: it cannot be pressed or focused.

"Why don't you use the button element's native disabled attribute?" — We favour the input property as the native attribute can be quirky to set dynamically (cmp. example below).

Example :
<!-- DO use the input property -->
<button talenra-button disabled>
<button talenra-button [disabled]="myCondition">

<!-- DON'T use the element's disabled attribute -->
<button talenra-button [attr.disabled]="condition ? 'disabled' : null">
icon
Type : string
Default value : ''

The name of the icon to be rendered. e.g. refresh. Check @talenra/icons for a list of all icons available.

Example :
<button talenra-button label="Refresh" icon="refresh"></button>

<!-- Omit the label text to render an icon-only button -->
<button talenra-button icon="refresh"></button>

See IconComponent
kind
Type : TButtonKind
Default value : ButtonKind.Primary

Determines the visual kind of button to be rendered.

Example :
<button talenra-button label="My Label" kind="secondary"></button>

See ButtonKind
label
Type : string
Default value : ''

The button's label presented to the user.

Example :
<button talenra-button label="My Label"></button>
size
Type : TButtonSize
Default value : ButtonSize.M

Determines the size or the "visual weight" of the button. Currently affects the button's height only.

Example :
<button talenra-button label="My Label" size="s"></button>

See ButtonSize
waiting
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

While waiting is true, the button's label and icon are hidden and a loading indicator (spinner) is presented to the user instead.

Example :
<button talenra-button label="My Label" waiting></button>
<button talenra-button label="My Label" [waiting]="myCondition"></button>

Methods

Public focus
focus()

Sets the focus to the button.

Returns : void

Button Component

History

2025-05-20

Complete overhaul

https://gitlab.svanet.ch/talenra/talenra-workspace/-/merge_requests/756

  • Deprecate hasFocus property
  • Improve API docs
  • Replace @Input decorator with input signal
  • Label cannot be undefined. Use empty string instead.
  • Use host metadata to set class names
  • Improve unit test quality and quantity

results matching ""

    No results matching ""