> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons

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

export const ButtonUtilitiesCompositionDemo = () => {
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">composition with utilities</span>
        <div className="elementor-element flex flex-wrap gap-4 items-center justify-center">
          <button type="button" style={{
    background: "#6b7280",
    color: "#ffffff",
    border: "none",
    padding: "0.75rem 1.45rem",
    borderRadius: "0.625rem",
    fontSize: "0.875rem",
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
            Cancel
          </button>
          <div style={{
    marginTop: "1rem"
  }}>
            <button type="button" style={{
    background: "#0740f9",
    color: "#ffffff",
    border: "none",
    padding: "0.88rem 1.7rem",
    borderRadius: "0.625rem",
    fontSize: "0.95rem",
    fontWeight: 700,
    letterSpacing: "0.04em",
    cursor: "pointer",
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
              Continue to Checkout
            </button>
          </div>
          <button type="button" style={{
    background: "#3DC13C",
    color: "#ffffff",
    border: "none",
    padding: "0.95rem 1.8rem",
    borderRadius: "0.625rem",
    fontSize: "1rem",
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
            Publish
          </button>
        </div>
      </div>
    </div>;
};

export const ButtonSizeScaleDemo = () => {
  const sizes = [{
    cls: "button-primary button-xs",
    label: "xs",
    padding: "0.48rem 0.95rem",
    fontSize: "0.76rem"
  }, {
    cls: "button-primary button-sm",
    label: "sm",
    padding: "0.58rem 1.15rem",
    fontSize: "0.82rem"
  }, {
    cls: "button-primary button-md",
    label: "md",
    padding: "0.74rem 1.45rem",
    fontSize: "0.875rem"
  }, {
    cls: "button-primary button-lg",
    label: "lg",
    padding: "0.9rem 1.7rem",
    fontSize: "0.96rem"
  }, {
    cls: "button-primary button-xl",
    label: "xl",
    padding: "1rem 1.9rem",
    fontSize: "1.05rem"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">size scale</span>
        <div className="flex flex-wrap gap-4 items-end justify-center">
          {sizes.map(size => <div key={size.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label" style={{
    marginBottom: 0
  }}>
                {size.cls}
              </span>
              <button type="button" style={{
    background: "#0740f9",
    color: "#ffffff",
    border: "none",
    padding: size.padding,
    borderRadius: "0.625rem",
    fontSize: size.fontSize,
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
                {size.label}
              </button>
            </div>)}
        </div>
      </div>
    </div>;
};

export const ButtonSemanticDemo = () => {
  const samples = [{
    cls: "button-success",
    label: "Publish Site",
    bg: "#3DC13C",
    color: "#ffffff"
  }, {
    cls: "button-warning",
    label: "Review Changes",
    bg: "#F4BB1B",
    color: "#111827"
  }, {
    cls: "button-error",
    label: "Delete Draft",
    bg: "#F13737",
    color: "#ffffff"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">semantic intent</span>
        <div className="flex flex-wrap gap-4 items-end justify-center">
          {samples.map(sample => <div key={sample.cls} className="flex flex-col items-center gap-3">
              <span className="tw-label" style={{
    marginBottom: 0
  }}>
                {sample.cls}
              </span>
              <button type="button" style={{
    background: sample.bg,
    color: sample.color,
    border: "none",
    padding: "0.8rem 1.45rem",
    borderRadius: "0.625rem",
    fontSize: "0.875rem",
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
                {sample.label}
              </button>
            </div>)}
        </div>
      </div>
    </div>;
};

export const ButtonBasicPresetDemo = () => {
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">primary action</span>
        <div className="flex flex-wrap gap-4 items-center justify-center">
          <button type="button" style={{
    background: "#0740f9",
    color: "#ffffff",
    border: "none",
    padding: "0.8rem 1.55rem",
    borderRadius: "0.625rem",
    fontSize: "0.9rem",
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
            Save Changes
          </button>
          <button type="button" style={{
    background: "#0740f9",
    color: "#ffffff",
    border: "none",
    padding: "0.8rem 1.55rem",
    borderRadius: "0.625rem",
    fontSize: "0.9rem",
    fontWeight: 600,
    cursor: "pointer",
    opacity: 0.88,
    boxShadow: "0 12px 24px -18px rgba(15, 23, 42, 0.6)"
  }}>
            Continue
          </button>
        </div>
      </div>
    </div>;
};

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

<ButtonBasicPresetDemo />

```html theme={null}
<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.

<ButtonSemanticDemo />

```html theme={null}
<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.

<ButtonSizeScaleDemo />

```html theme={null}
<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.

<ButtonUtilitiesCompositionDemo />

```html theme={null}
<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.