---
title: Buttons - Done
slug: buttons-done
createdAt: 2025-01-13T18:49:14.446Z
---

![](https://api.archbee.com/api/optimize/0Hj27LL4WEHjcJ1cnEral/fMt9Yj8LUQs20CzIp0CL__screenshot-2025-01-15-at-34149-pm.png)

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

```html
<button class="button">
  <span class="button-icon w-embed">
    <svg>Icon</svg>
  </span>
  <span>Standard Button</span>
</button>
```

**Secondary Button**

```html
<button class="button secondary">
  <span class="button-icon w-embed">
    <svg>Icon</svg>
  </span>
  <span>Secondary Button</span>
</button>
```

**Tertiary Button**

```html
<button class="button tertiary">
  <span class="button-icon w-embed">
    <svg>Icon</svg>
  </span>
  <span>Tertiary Button</span>
</button>
```

**Danger Button**

```html
<button class="button danger">
  <span class="button-icon w-embed">
    <svg>Icon</svg>
  </span>
  <span>Danger Button</span>
</button>
```

**Danger Button (Secondary)**

```html
<button class="button danger secondary">
  <span class="button-icon w-embed">
    <svg>Icon</svg>
  </span>
  <span>Danger Button</span>
</button>
```

**Disabled Button**

```html
<button class="button disabled" disabled>
  <span class="button-icon w-embed">
    <svg>Icon</svg>
  </span>
  <span>Disabled Button</span>
</button>
```

**No Icon**

```html
<button class="button">
  <span>Standard Button</span>
</button>
```

**If using  \<a> tags for links styled as buttons:**

```html
<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

1. **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`.
2. **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

1. Ensure your clickable elements have the following structure:
   1. \<button class="button" data-wait="Processing...">Submit \</button>
2. Modify the data-wait attribute to change the waiting message dynamically.
3. Works with different button styles and sizes (`.danger`, `.small`, etc.)
4. Works with \<button> \<div> and \<a> tags.

### Script

::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-66bm5qx_YHCVcRReEW7X0-20250120-213805.js" label="buttonWait.js"}