# 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.

# Usage

OK Don't Click Link Button Plain Text Button

Small Mini


Delete Copy

Span full-width
Show Code

# Properties

Property Attribute Description Type Default
color color Identifier of the theme based on which the button is styled. "danger" or "link" or "primary" or "secondary" or "text" 'primary'
disabled disabled Disables the button on the interface. If the attribute’s value is undefined, the value is set to false. boolean false
expand expand Sets the button to a full-width block. If the attribute’s value is undefined, the value is set to false. boolean false
modalTriggerId modal-trigger-id Accepts the id of the fw-modal component to open it on click string ''
size size Size of the button. "mini" or "normal" or "small" 'normal'
type type Button type based on which actions are performed when the button is clicked. "button" or "reset" or "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>

# Dependencies

# Used by

# Graph

graph TD;
  fw-datepicker --> fw-button
  fw-dropdown-button --> fw-button
  fw-modal --> fw-button
  style fw-button fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

Last Updated: 9/29/2020, 7:53:01 AM