Button (fw-button)

fw-button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.

Demo

OK Secondary Don't Click Link Button Plain Text Button

Small Default

Select date Select date

Loading OK Don't Click

OK OK Don't Click

Delete Copy

Show Code

Usage

Properties

Property	Attribute	Description	Type	Default
color	color	Identifier of the theme based on which the button is styled.	"danger" \| "link" \| "primary" \| "secondary" \| "text"	'primary'
disabled	disabled	Disables the button on the interface. Default value is false.	boolean	false
fileUploaderId	file-uploader-id	Accepts the id of the fw-file-uploader component to upload the file.	string	''
loading	loading	Loading state for the button, Default value is false.	boolean	false
modalTriggerId	modal-trigger-id	Accepts the id of the fw-modal component to open it on click.	string	''
showCaretIcon	show-caret-icon	Caret indicator for the button, Default value is false.	boolean	false
size	size	Size of the button.	"icon" \| "icon-small" \| "normal" \| "small"	'normal'
throttleDelay	throttle-delay	Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.	number	200
type	type	Button type based on which actions are performed when the button is clicked.	"button" \| "submit"	'button'

Events

Event	Description	Type
fwBlur	Triggered when the button loses focus.	CustomEvent<void>
fwClick	Triggered when the button is clicked.	CustomEvent<void>
fwFocus	Triggered when the button comes into focus.	CustomEvent<void>

Methods

setFocus() => Promise<any>

Returns

Type: Promise<any>

CSS Custom Properties

Name	Description
--fw-button-label-vertical-padding	vertical padding for the button label
--fw-button-min-width	minimum width for the button

Dependencies

Used by

• fw-data-table
• fw-datepicker
• fw-kebab-menu
• fw-modal-footer
• fw-pagination
• fw-select

Depends on

• fw-spinner
• fw-icon

Graph

graph TD;
  fw-button --> fw-spinner
  fw-button --> fw-icon
  fw-data-table --> fw-button
  fw-datepicker --> fw-button
  fw-kebab-menu --> fw-button
  fw-modal-footer --> fw-button
  fw-pagination --> fw-button
  fw-select --> fw-button
  style fw-button fill:#f9f,stroke:#333,stroke-width:4px

---

Built with ❤ at Freshworks