Buttons

Button variants for different actions and contexts.

Primary

For the main action on a page. Use sparingly—one per section.

<button class="sw-btn sw-btn-primary">Primary Button</button>

Secondary

For secondary actions. Bordered, transparent background.

<button class="sw-btn sw-btn-secondary">Secondary Button</button>

Ghost

For tertiary actions or toolbars.

<button class="sw-btn sw-btn-ghost">Ghost Button</button>

Danger

For destructive actions like delete. Use with confirmation dialogs.

<button class="sw-btn sw-btn-danger">Delete</button>

Sizes

Default size plus a small variant for compact UIs.

<button class="sw-btn sw-btn-primary">Default</button>
<button class="sw-btn sw-btn-primary sw-btn-sm">Small</button>

With Icons

Buttons can include icons before or after text.

Button Group

Use flex and gap utilities to group buttons.

<div style="display: flex; gap: 12px;">
  <button class="sw-btn sw-btn-secondary">Cancel</button>
  <button class="sw-btn sw-btn-primary">Save Changes</button>
</div>

Dropdown Button

Button with a dropdown menu for multiple actions.

<div class="sw-dropdown">
  <button class="sw-btn sw-btn-secondary" onclick="this.parentElement.classList.toggle('open')">
    <svg>...</svg> <!-- download icon -->
    Download
    <svg>...</svg> <!-- chevron icon -->
  </button>
  <div class="sw-dropdown-menu">
    <button class="sw-dropdown-item">
      <svg>...</svg>
      Download PDF
    </button>
    <button class="sw-dropdown-item">
      <svg>...</svg>
      Download CSV
    </button>
    <button class="sw-dropdown-item">
      <svg>...</svg>
      Download PNG
    </button>
  </div>
</div>

CSS

.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sw-space-2);
  padding: 11px 20px;
  border-radius: var(--sw-radius-lg);
  font-family: var(--sw-font-family);
  font-size: var(--sw-text-lg);
  font-weight: var(--sw-font-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--sw-transition-fast);
  border: none;
  outline: none;
  text-decoration: none;
}

.sw-btn-primary {
  background: var(--sw-primary);
  color: var(--sw-text-inverse);
}

.sw-btn-primary:hover {
  background: var(--sw-primary-hover);
}

.sw-btn-secondary {
  background: transparent;
  color: var(--sw-text-secondary);
  border: 1.5px solid var(--sw-border-default);
}

.sw-btn-secondary:hover {
  background: var(--sw-bg-hover);
  border-color: var(--sw-border-hover);
}

.sw-btn-ghost {
  background: transparent;
  color: var(--sw-text-secondary);
}

.sw-btn-ghost:hover {
  background: var(--sw-bg-hover);
  color: var(--sw-text-primary);
}

.sw-btn-danger {
  background: var(--sw-danger);
  color: var(--sw-gray-50);
}

.sw-btn-danger:hover {
  background: var(--sw-danger-hover);
}

.sw-btn-sm {
  padding: 6px 12px;
  font-size: var(--sw-text-sm);
}