Components/Buttons/Button

The button component is used to trigger an action. All buttons are characterized by the \

- **Default button** is used for neutral or informative (secondary) actions. - **Emphasized button** is used to indicate the primary action on the screen. - **Ghost button** is used to trigger secondary actions. If a page already has a primary action, but you also need to highlight the most important action in a content toolbar, use the ghost style. - **Positive button** is used to trigger positive semantic actions, such as _Accept_ and should always be accompanied by text. - **Negative button** is used to trigger negative semantic actions, such as _Reject_ and should always be accompanied by text. - **Attention button** is used to trigger a semantic action that needs attention and should always be accompanied by text. - **Transparent button** is used to trigger a negative path action within a header or footer bar, and secondary actions in toolbars.

A toggle button switches between two states. First is the active state, second is inactive. Use the toggle button for secondary actions. Active (toggled) button should have \

Button gets a badge in cases of collecting a number of items from various pages in order to trigger an action. Currently the Emphasized, Standard, Ghost and Transparent type of buttons are recommended to be used with Badge. \n**Counter Badges cannot contain more than 4 characters**. \nFor **Attention Badge** use the fd-button__badge--attention modifier class with fd-button__badge base class.

The Menu Button is the default trigger for the Menu (Horizon) component and is tightly coupled with it—it cannot be used independently. While the Menu component can function on its own, the Menu Button relies on it to provide a dropdown. As a type of button, the Menu Button inherits all standard button types and their respective styles and states. There are two types of Menu Buttons: - Default Menu Button-Triggers the dropdown menu on click. - Split Menu Button-Offers separate actions: one for a primary action and one for the dropdown. If a fixed width is applied to the Menu Button, the dropdown arrow icon should be right-aligned. The recommended maximum width is 12rem..

These buttons contain either icons **or** text, as it is highly recommended not to combine the two. **Use icon buttons for basic actions such as:** - _Edit_ - _Back to previous screen_ - _Remove from list_ etc. Make sure the default accessibility text for the icon is appropriate for your use case. If the text is not ideal, define an app-specific accessibility text. All button styles can be paired with an icon. You can use the \

These button types indicate different states: normal, selected, disabled and focusable disabled. - **Normal**: The button’s default state. It can be selected to perform a corresponding action. - **Disabled**: It cannot be selected. This state can be displayed by using the \

The disabled button can be focusable by adding the \