Buttons

Bundled button presets: semantic color classes plus separate size classes from button-xs through button-xl.

Overview

Buttons use a preset system with two parts: a semantic color class and, when needed, a size class. Start with a preset like button-primary, then add a size like button-lg when the default scale is not the right fit.

Examples

Basic button preset

Use a semantic preset like button-primary when you need a standard primary action without changing the size.

<div class="elementor-element">
  <button class="button-primary">
    Save Changes
  </button>
</div>

This is the base pattern for the button system: choose the preset that matches the action, then layer in size only when you need it.

Choosing a semantic color

Use a semantic token to communicate intent. For example, button-success works well for positive confirmations and completion actions.

<div class="elementor-element flex flex-wrap gap-4">
  <button class="button-success">
    Publish Site
  </button>
  <button class="button-warning">
    Review Changes
  </button>
  <button class="button-error">
    Delete Draft
  </button>
</div>

Semantic token	Color class
primary	button-primary
secondary	button-secondary
neutral	button-neutral
success	button-success
warning	button-warning
error	button-error

Changing size

Add a size class next to the preset when the button should feel more prominent or more compact in the layout.

<div class="elementor-element flex flex-wrap gap-4 items-center">
  <button class="button-primary button-xs">xs</button>
  <button class="button-primary button-md">md</button>
  <button class="button-primary button-xl">xl</button>
</div>

Size classes only make sense when they are paired with a semantic preset.

Suffix	Class
xs	button-xs
sm	button-sm
md	button-md
lg	button-lg
xl	button-xl

Combining with utilities

Preset classes define the button itself, and utilities handle the surrounding composition. This works well when a button needs spacing or typography adjustments inside a larger layout.

<div class="elementor-element flex flex-wrap gap-4 items-center">
  <button class="button-neutral button-md">
    Cancel
  </button>
  <button class="button-primary button-md tracking-1">
    Continue to Checkout
  </button>
  <button class="button-success button-lg">
    Publish
  </button>
</div>

Use utilities around the button or alongside the preset when you need layout, spacing, or text-level refinement without replacing the preset system.

Notes

• Every button starts with a semantic preset such as button-primary or button-success.
• Size classes only make sense next to a color preset (button-primary button-md).
• secondary is a light fill (#aaebfd); use text-black or text-gray-dark on the label if contrast is weak.
• You can still add spacing, layout, or typography utilities alongside the preset classes.