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
<button class="button">
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Standard Button</span>
</button>Secondary Button
<button class="button secondary">
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Secondary Button</span>
</button>Tertiary Button
<button class="button tertiary">
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Tertiary Button</span>
</button>Danger Button
<button class="button danger">
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Danger Button</span>
</button>Danger Button (Secondary)
<button class="button danger secondary">
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Danger Button</span>
</button>Disabled Button
<button class="button disabled" disabled>
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Disabled Button</span>
</button>No Icon
<button class="button">
<span>Standard Button</span>
</button>If using <a> tags for links styled as buttons:
<a href="#" class="button w-inline-block">
<span class="button-icon w-embed">
<svg>Icon</svg>
</span>
<span>Standard Button</span>
</a>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.