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

# Components

> Bundled preset button classes for fast, consistent actions.

## Overview

Components are reusable interface patterns built on top of the lower-level utility classes. Instead of assembling every state from scratch, you reach for a component pattern when you want a familiar piece of UI to behave consistently across a site.

Common component categories include buttons for actions, badges for short status labels, and links for navigation or secondary calls to action. Utilities still matter here because they handle the layout, spacing, and typography around each component.

At the moment, the bundled component documentation focuses on the preset button classes that ship with the plugin. Badges and links are still typically composed with the utility system rather than documented as separate shipped presets.

<CardGroup cols={2}>
  <Card title="Button" icon="hand-pointer" href="/components/button">
    Pre-styled action buttons with semantic colors and separate size classes
  </Card>
</CardGroup>

## What Ships

* **Colors:** `.button-primary`, `.button-secondary`, `.button-neutral`, `.button-success`, `.button-warning`, `.button-error`
* **Sizes (combine with a color class):** `.button-xs`, `.button-sm`, `.button-md`, `.button-lg`, `.button-xl`

Use utility classes on top when you need layout, spacing, or typography adjustments around the preset.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Colors" icon="palette" href="/concepts/colors">
    Color utilities that pair cleanly with button presets
  </Card>

  <Card title="Spacing" icon="arrows-to-line" href="/concepts/spacing">
    Margin and padding helpers around calls to action
  </Card>
</CardGroup>