Skip to main content
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.
ClassColorUsage
.button-primaryPrimary blue (#0740f9)Main actions
.button-secondaryLight blue (#aaebfd)Secondary actions
.button-neutralGray (#6b7280)Cancel, tertiary actions
.button-successGreen (#3DC13C)Confirm, publish
.button-warningYellow (#F4BB1B)Review, caution
.button-errorRed (#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.
ClassUsage
.button-xsVery compact
.button-smCompact
.button-mdDefault
.button-lgProminent
.button-xlHero-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.

​
Related

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