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