@finastra/button

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 label Use 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 label Use 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 label Use 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"