Buttons - Done

description the button styles are designed to provide a consistent and visually appealing user interface buttons are classified into various types such as standard, secondary, tertiary, danger, and disabled each type conveys a specific purpose or user action how to use standard button icon standard button secondary button icon secondary button tertiary button icon tertiary button danger button icon danger button danger button (secondary) icon danger button disabled button icon disabled button no icon standard button if using \<a> tags for links styled as buttons icon standard button available classes class description button base class applied to all buttons required for consistent styling standard primary action button with a solid background secondary secondary action button with an outlined style tertiary tertiary action button with minimal styling, typically used for less prominent actions danger highlights destructive actions, e g , delete displays with a red background disabled represents a button that is inactive and unclickable often grayed out small shrinks the size of the button note all colors and styles for these classes are controlled by the master css developers only need to apply the relevant class to ensure proper styling button wait feature overview this feature provides functionality for buttons, links, or div elements with the class button to show a loading spinner and disable further interaction when clicked, provided they contain a data wait attribute functionality event handling when a button element is clicked, the script checks if it has the data wait attribute if the attribute is present, the element's content is replaced with a spinner and the text from data wait preventing multiple clicks the element receives the class clicked to visually indicate the change the pointer events none; style is applied via javascript to prevent multiple clicks how to use ensure your clickable elements have the following structure \<button class="button" data wait="processing ">submit \</button> modify the data wait attribute to change the waiting message dynamically works with different button styles and sizes ( danger , small , etc ) works with \<button> \<div> and \<a> tags script