# 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

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

← Overview Checkbox (fw-checkbox) →