Platform: Button Component V1.0 Technical Design

Button Component

Summary

The button lets users trigger an action by clicking or tapping it, or by pressing certain keys, such as Enter or the space bar.

Design

 <fdp-button 
         [options]="options"
         [size]="size"
         [glyph]="glyph"
         [disabled]="disabled" 
         (click)="onBtnClick($event)"
         [fdType]="type">Button Content</fdp-button>

Property Bindings

size: sizeType

The "size" property allows the user to set the sizes of the button such as small. Which will act as compact button. small=> button height will be 28px. default or no value set==> height will be 36px.

glyph: string

The icon to include in the button

disabled: boolean

For making button disabled. Default value:false ==>Button will be enabled true==> button will be disabled.

type: ButtonType

The type of the button. *Types include 'standard', 'positive', 'medium', and 'negative'. *Empty for default (button)

options: ButtonOptions | ButtonOptions[]

ButtonOptions include 'light' | 'emphasized' | ''

---

Event Bindings

buttonClicked = new EventEmitter();

• The "buttonClicked" event binding emits an event whenever user clicks on button.

---

Two-Way Bindings

N/A

---

Content Projection

N/A

---

Interfaces

---

Related Modules

The following components and/or directives from @fundamental-ngx/core will be used:

• buttonModule

Additional Notes

---

Questions

• Does button label should be truncated and appended with an ellipsis? If, yes can we have an option for width where based on user input value truncation will be started.

example:

<fdp-button [width]='30px'.........

then css will be: width: 30px; (user input value) overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;