@finastra/button
v1.8.1
Published
Button Web Component
Readme
Button
Usage
An <fds-button> represents an action a user can take. fds-buttons can be clicked or tapped to perform an action or to navigate to another page.
Import
npm i @finastra/buttonimport '@finastra/button';
...
<fds-button label="Contained button"></fds-button>
<fds-outlined-button label="Outlined button"></fds-outlined-button>
<fds-text-button label="Text button"></fds-text-button>API
Button
Properties
| Property | Attribute | Type | Default | Description |
|----------------|----------------|-----------------------------------|----------|--------------------------------------------------|
| dense | dense | boolean | false | Use the smaller button size |
| disabled | disabled | boolean | false | Is the button disabled or not |
| fullwidth | fullwidth | boolean | false | Use the full width of its parent |
| icon | icon | string | "" | The name of the icon displayed before the labelUse trailingIcon to true to display this icon after the label |
| label | label | string | "Button" | The label displayed inside the button |
| large | large | boolean | false | Use the larger button size |
| trailingIcon | trailingIcon | boolean | false | Display the icon after the label instead of before |
| type | type | "button" \| "reset" \| "submit" | "button" | |
Outlined Button
Properties
| Property | Attribute | Type | Default | Description |
|----------------|----------------|-----------------------------------|----------|--------------------------------------------------|
| dense | dense | boolean | false | Use the smaller button size |
| disabled | disabled | boolean | false | Is the button disabled or not |
| fullwidth | fullwidth | boolean | false | Use the full width of its parent |
| icon | icon | string | "" | The name of the icon displayed before the labelUse trailingIcon to true to display this icon after the label |
| label | label | string | "Button" | The label displayed inside the button |
| large | large | boolean | false | Use the larger button size |
| trailingIcon | trailingIcon | boolean | false | Display the icon after the label instead of before |
| type | type | "button" \| "reset" \| "submit" | "button" | |
Text Button
Properties
| Property | Attribute | Type | Default | Description |
|----------------|----------------|-----------------------------------|----------|--------------------------------------------------|
| dense | dense | boolean | false | Use the smaller button size |
| disabled | disabled | boolean | false | Is the button disabled or not |
| fullwidth | fullwidth | boolean | false | Use the full width of its parent |
| icon | icon | string | "" | The name of the icon displayed before the labelUse trailingIcon to true to display this icon after the label |
| label | label | string | "Button" | The label displayed inside the button |
| large | large | boolean | false | Use the larger button size |
| trailingIcon | trailingIcon | boolean | false | Display the icon after the label instead of before |
| type | type | "button" \| "reset" \| "submit" | "button" | |