@finastra/button NPM

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"