# 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

# Depends on

# Graph

graph TD;
  fw-button --> fw-spinner
  fw-button --> fw-icon
  fw-icon --> fw-toast-message
  fw-toast-message --> fw-spinner
  fw-toast-message --> fw-icon
  fw-data-table --> fw-button
  fw-datepicker --> 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