Components

All the basic building blocks for your aero UI applications.

# Badge

Use .aero-badge for standard badges. Add .outline for an outlined variant.

Default Outline 
<span class="aero-badge default">Default</span>
<span class="aero-badge outline">Outline</span>

# Button

Use .aero-btn. Add .outline or .ghost for variants.

<button class="aero-btn">Primary</button>
<button class="aero-btn outline">Outline</button>
<button class="aero-btn ghost">Ghost</button>

# Input

Use .aero-input-group to wrap your .aero-label and .aero-input.

<div class="aero-input-group">
  <label class="aero-label" for="email">Email address</label>
  <input type="email" id="email" class="aero-input" placeholder="m@example.com">
</div>

# Card

Build complex layouts using the card header, content, and footer sections.

Create project

Deploy your new project in one-click.

<div class="aero-card">
  <div class="aero-card-header">
    <h3 class="aero-card-title">Create project</h3>
    <p class="aero-card-description">Deploy your new project in one-click.</p>
  </div>
  <div class="aero-card-content">
    <div class="aero-input-group">
      <label class="aero-label">Name</label>
      <input class="aero-input" placeholder="Name of your project">
    </div>
  </div>
  <div class="aero-card-footer" style="justify-content: space-between;">
    <button class="aero-btn outline">Cancel</button>
    <button class="aero-btn">Deploy</button>
  </div>
</div>

# Dialog (Modal)

A native HTML <dialog> element. Use data-dialog-target to open and data-dialog-close to close.

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account. 

<!-- Trigger Button -->
<button class="aero-btn" data-dialog-target="my-modal">Open Dialog</button>

<!-- The Dialog Element -->
<dialog id="my-modal" class="aero-dialog">
  <h3 class="aero-card-title">Are you absolutely sure?</h3>
  <p class="aero-card-description">This action cannot be undone.</p>

  <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem;">
    <button class="aero-btn outline" data-dialog-close>Cancel</button>
    <button class="aero-btn" data-dialog-close>Continue</button>
  </div>
</dialog>