Button Presets and Component Classes for AtomicKit

AtomicKit ships a set of ready-to-use button preset classes that give Elementor buttons consistent, semantically meaningful styles out of the box. Each preset encodes intent — primary actions, warnings, destructive operations — so your button styles stay coherent across the site without manually specifying colors on every element. Pair any color preset with an optional size modifier to control scale, and combine both with AtomicKit’s utility classes for layout and spacing when you need finer control.

Button Color Presets

Color presets apply a background fill and matching foreground color to a button element. Choose the class that matches the intent of the action.

Class	Color	Usage
`.button-primary`	Primary blue (`#0740f9`)	Main actions
`.button-secondary`	Light blue (`#aaebfd`)	Secondary actions
`.button-neutral`	Gray (`#6b7280`)	Cancel, tertiary actions
`.button-success`	Green (`#3DC13C`)	Confirm, publish
`.button-warning`	Yellow (`#F4BB1B`)	Review, caution
`.button-error`	Red (`#F13737`)	Delete, destructive

Button Size Modifiers

Size modifiers adjust the padding and font scale of a button. They are designed to be combined with a color preset — applying a size class alone has no effect.

Class	Usage
`.button-xs`	Very compact
`.button-sm`	Compact
`.button-md`	Default
`.button-lg`	Prominent
`.button-xl`	Hero-scale

Code Examples

Basic usage

Apply a color preset on its own for default sizing:

<!-- Basic usage: color preset only -->
<button class="button-primary">Save Changes</button>

<!-- With size modifier -->
<button class="button-primary button-lg">Continue to Checkout</button>

<!-- Semantic intent examples -->
<button class="button-success">Publish Site</button>
<button class="button-error">Delete Draft</button>
<button class="button-neutral button-sm">Cancel</button>

Combining with utility classes

Button presets work alongside AtomicKit’s layout and spacing utilities. Wrap buttons in a flex container to control alignment and gap:

<div class="flex gap-4 items-center">
  <button class="button-neutral button-md">Cancel</button>
  <button class="button-primary button-md">Continue to Checkout</button>
</div>

You can also add margin, padding, or typography utilities directly to the button element when you need fine-grained adjustments beyond what the preset provides.

Notes

Every button starts with a semantic color preset. The color class is always required — it provides the base styles that size modifiers extend.
Size classes only work when paired with a color preset. Applying .button-lg without a color class has no visible effect.
.button-secondary uses a light fill (#aaebfd). Add a dark text utility such as text-black or text-gray-dark alongside it to ensure legible contrast.
You can still add spacing, layout, or typography utilities alongside presets. Button preset classes do not conflict with AtomicKit utility classes — combine them freely.

Colors — understand the color scale and CSS variables that underpin button preset values
Spacing — margin and padding utilities for positioning button groups

Get Started

Colors & Typography

Spacing & Sizing

Layout & Flexbox

Borders & Effects

Plugin - Dashboard Overview

Design Tokens

Import & Export

Button Presets and Component Classes for AtomicKit

Button Color Presets

Button Size Modifiers

Code Examples

Basic usage

Combining with utility classes

Notes

​Button Color Presets

​Button Size Modifiers

​Code Examples

​Basic usage

​Combining with utility classes

​Notes

​Related

Button Color Presets

Button Size Modifiers

Code Examples

Basic usage

Combining with utility classes

Notes

Related