Button Component

Button Component

The Button component is a clickable element that triggers an action with different variants and sizes.

All Variants

Button Variants

AetherUI provides primary, secondary and ghost variants in both normal and disabled states.

Primary Secondary Ghost

Primary Disabled Secondary Disabled Ghost Disabled

<div style="display: flex; flex-direction: column; gap: 16px;">
<div class="button-group">
  <ae-button variant="primary">Primary</ae-button>
  <ae-button variant="secondary">Secondary</ae-button>
  <ae-button variant="ghost">Ghost</ae-button>
</div>

<div class="button-group">
  <ae-button variant="primary" disabled>Primary Disabled</ae-button>
  <ae-button variant="secondary" disabled>Secondary Disabled</ae-button>
  <ae-button variant="ghost" disabled>Ghost Disabled</ae-button>
</div>
</div>

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

yarn

yarn add @aetherui-kit/core

Import

// Option 1: Import and register specific component
import { defineAeButton } from '@aetherui-kit/core/button';
defineAeButton();

// Option 2: Import and register all components at once
import { defineAll } from '@aetherui-kit/core';
defineAll();

Basic Usage

Basic Button

The default button uses the primary variant with medium size.

Default Button

<ae-button>Default Button</ae-button>

Variants

The button component supports three variants: primary, secondary, and ghost.

Button Variants

Choose from primary (default), secondary, and ghost variants to match your UI hierarchy.

Primary Button Secondary Button Ghost Button

<div class="button-group">
<ae-button variant="primary">Primary Button</ae-button>
<ae-button variant="secondary">Secondary Button</ae-button>
<ae-button variant="ghost">Ghost Button</ae-button>
</div>

Sizes

The button component supports three sizes: sm, md (default), and lg.

Button Sizes

Use different sizes (sm, md, lg) to create visual hierarchy and match your design needs.

Small Medium Large

<div class="button-group">
<ae-button size="sm">Small</ae-button>
<ae-button size="md">Medium</ae-button>
<ae-button size="lg">Large</ae-button>
</div>

Disabled State

Disabled Buttons

Buttons can be disabled to indicate that an action is not available.

Disabled Primary Disabled Secondary Disabled Ghost

<div class="button-group">
<ae-button variant="primary" disabled>Disabled Primary</ae-button>
<ae-button variant="secondary" disabled>Disabled Secondary</ae-button>
<ae-button variant="ghost" disabled>Disabled Ghost</ae-button>
</div>

Icons

The button supports icons through the icon slot. You can position the icon at the start or end using the icon-position attribute.

Buttons with Icons

Add icons to buttons using the icon slot. Icons can be positioned at the start or end.

Add Item Next

<div class="button-group">
<!-- Icon at start (default) -->
<ae-button>
  <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M12 5v14M5 12h14"/>
  </svg>
  Add Item
</ae-button>

<!-- Icon at end -->
<ae-button icon-position="end">
  Next
  <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M9 18l6-6-6-6"/>
  </svg>
</ae-button>

<!-- Icon only -->
<ae-button variant="ghost" aria-label="Add item">
  <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M12 5v14M5 12h14"/>
  </svg>
</ae-button>
</div>

Common Usage Patterns

Common Button Patterns

Examples of how to use button variants in different UI contexts.

Save Changes Cancel

Confirm Cancel

Common Usage Patterns:

Form Actions: Use Primary for Submit/Save and Secondary for Cancel. This creates a clear hierarchy of actions.

Dialog Actions: Use Primary for Confirm/OK and Ghost for Cancel/Close. The ghost variant makes the cancel action less prominent.

Toolbar Actions: Use Ghost buttons with icons for a clean, unobtrusive look. Always include aria-labels for accessibility.

<div class="button-group--vertical" style="width: 100%;">
<!-- Form actions -->
<div class="button-group">
  <ae-button variant="primary">Save Changes</ae-button>
  <ae-button variant="secondary">Cancel</ae-button>
</div>

<!-- Dialog actions -->
<div class="button-group">
  <ae-button variant="primary">Confirm</ae-button>
  <ae-button variant="ghost">Cancel</ae-button>
</div>

<!-- Toolbar actions -->
<div class="button-group">
  <ae-button variant="ghost" aria-label="Add item">
    <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  </ae-button>
  <ae-button variant="ghost" aria-label="Edit">
    <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
      <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
    </svg>
  </ae-button>
  <ae-button variant="ghost" aria-label="Delete">
    <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
    </svg>
  </ae-button>
</div>
</div>

<div class="variant-description">
<h3>Common Usage Patterns:</h3>
<p><strong>Form Actions:</strong> Use Primary for Submit/Save and Secondary for Cancel. This creates a clear hierarchy of actions.</p>
<p><strong>Dialog Actions:</strong> Use Primary for Confirm/OK and Ghost for Cancel/Close. The ghost variant makes the cancel action less prominent.</p>
<p><strong>Toolbar Actions:</strong> Use Ghost buttons with icons for a clean, unobtrusive look. Always include aria-labels for accessibility.</p>
</div>

Props

Name	Type	Default	Description
variant	'primary' | 'secondary' | 'ghost'	'primary'	Visual style variant of the button
size	'sm' | 'md' | 'lg'	'md'	Applied to padding & font-size
disabled	boolean	false	Native disable state
icon-position	'start' | 'end'	'start'	Position of the icon when both icon and text are present

Slots

Name	Description
default	The button’s label text
icon	Icon content that can be positioned at start or end

CSS Parts

Name	Description
base	The button element
label	Text wrapper element
icon	The icon wrapper element

CSS Custom Properties

Name	Description
--ae-button-bg-primary	Primary button background color
--ae-button-fg-primary	Primary button text color
--ae-button-bg-secondary	Secondary button background color
--ae-button-fg-secondary	Secondary button text color
--ae-color-brand-600	Used for ghost button color and focus ring
--ae-button-radius	Button border radius
--ae-button-padding-x	Horizontal button padding
--ae-button-padding-y	Vertical button padding
--ae-button-gap	Gap between button text and icon
--ae-focus-ring-color	Focus ring color

Styling Examples

Custom styling can be applied using CSS custom properties and shadow parts:

/* Make ghost variant transparent with brand-color text */
ae-button[variant="ghost"]::part(base) {
  background: transparent;
  color: var(--ae-color-brand-600);
}

/* Apply custom theme colors */
:root {
  --ae-button-bg-primary: #5e3bee;
  --ae-button-fg-primary: white;
  --ae-color-brand-600: #5e3bee;
}

/* Dark theme */
[data-theme="dark"] {
  --ae-button-bg-primary: #7353eb;
  --ae-color-brand-600: #7353eb;
}

Accessibility

The button component follows WAI-ARIA guidelines:

• Uses native <button> element semantics
• Requires aria-labels for icon-only buttons
• Supports keyboard navigation
• Maintains proper focus styling with visible focus rings
• Includes proper disabled state styling and attributes

Browser Support

• Chrome, Edge, Safari 15+, Firefox ESR