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/button

import '@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" | |