# Button Components

## Basic Variants
```html
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-secondary">Secondary Action</button>
<button class="btn btn-ghost">Ghost Action</button>
<button class="btn btn-dashed">Add New</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Delete/Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
```

## Sizes
```html
<button class="btn btn-xs btn-primary">XS (20px)</button>
<button class="btn btn-sm btn-primary">Small (30px)</button>
<button class="btn btn-primary">Default (40px)</button>
<button class="btn btn-lg btn-primary"><span class="icon icon-star"></span></button>  <!-- 90px -->
<button class="btn btn-xl btn-primary">
  <span class="icon icon-upload"></span>
  Upload
</button>  <!-- 140px -->
```

## Shapes
```html
<button class="btn btn-square btn-primary">
  <span class="icon icon-search"></span>
</button>

<button class="btn btn-block btn-primary">Full Width</button>
```

## Inverted (dark backgrounds)
```html
<div class="bg-actionbar p-md">
  <button class="btn btn-primary-inverted">Primary Inverted</button>
  <button class="btn btn-inverted">Inverted</button>
  <button class="btn btn-secondary-inverted">Secondary Inverted</button>
  <button class="btn btn-outline-primary-inverted">Outline Primary Inverted</button>
  <button class="btn btn-ghost-inverted">Ghost Inverted</button>
</div>
```

## With Icons
```html
<button class="btn btn-primary">
  <span class="icon icon-save mr-icon-spacing"></span>
  Save Changes
</button>
```

## Dropdown Menu
```html
<details class="dropdown-actions">
  <summary>
    <div class="btn btn-square btn-primary">
      <span class="icon icon-more"></span>
    </div>
  </summary>
  <div class="popover-menu">
    <a class="popover-action" href="#">
      <span class="icon icon-pencil"></span>
      Edit
    </a>
    <a class="popover-action" href="#">
      <span class="icon icon-duplicate"></span>
      Duplicate
    </a>
    <a class="popover-action" href="#">
      <span class="icon icon-remove"></span>
      Delete
    </a>
  </div>
</details>
```