Buttons — Amphibious 2.0

Overview

The button component is one of the most fundamental elements in any user interface. Amphibious provides a comprehensive button system with multiple variants, sizes, states, and the ability to include icons.

Key Features

8 color variants (primary, secondary, success, danger, warning, info, light, dark)
4 sizes (small, medium, large, extra large)
Multiple states (hover, active, focus, disabled, loading)
Icon support with proper spacing
Button groups for related actions
Full keyboard and screen reader support
Consistent styling across all browsers

Basic Usage

Add the .aiab-button or .aiab-btn class to any <button>, <a>, or <input> element.

Basic Buttons

Link Button

<button class="aiab-button">Default Button</button>
<a href="#" class="aiab-button">Link Button</a>
<input type="submit" class="aiab-button" value="Input Button">
<button type="button" class="aiab-btn">Using .aiab-btn class</button>

Variants

Use modifier classes to change the button's appearance. Combine with .aiab-button or use the shorthand .aiab-btn-{variant}.

Solid Variants

<button class="aiab-button aiab-button--primary">Primary</button>
<button class="aiab-button aiab-button--secondary">Secondary</button>
<button class="aiab-button aiab-button--success">Success</button>
<button class="aiab-button aiab-button--danger">Danger</button>
<button class="aiab-button aiab-button--warning">Warning</button>
<button class="aiab-button aiab-button--info">Info</button>
<button class="aiab-button aiab-button--light">Light</button>
<button class="aiab-button aiab-button--dark">Dark</button>

Outline Variants

<button class="aiab-button aiab-button--outline-primary">Primary</button>
<button class="aiab-button aiab-button--outline-secondary">Secondary</button>
<button class="aiab-button aiab-button--outline-success">Success</button>
<button class="aiab-button aiab-button--outline-danger">Danger</button>
<button class="aiab-button aiab-button--outline-warning">Warning</button>
<button class="aiab-button aiab-button--outline-info">Info</button>
<button class="aiab-button aiab-button--outline-dark">Dark</button>

Ghost Variants

<button class="aiab-button aiab-button--ghost">Ghost Default</button>
<button class="aiab-button aiab-button--ghost-primary">Ghost Primary</button>
<button class="aiab-button aiab-button--ghost-danger">Ghost Danger</button>
<button class="aiab-button aiab-button--ghost-success">Ghost Success</button>

Sizes

Control button size with modifier classes. The default size is medium.

Button Sizes

<button class="aiab-button aiab-button--sm aiab-button--primary">Small</button>
<button class="aiab-button aiab-button--primary">Default</button>
<button class="aiab-button aiab-button--lg aiab-button--primary">Large</button>
<button class="aiab-button aiab-button--xl aiab-button--primary">Extra Large</button>

Block Buttons

<button class="aiab-button aiab-button--block aiab-button--primary">Block Level Button</button>
<button class="aiab-button aiab-button--block aiab-button--lg aiab-button--secondary">Large Block Button</button>

States

Buttons automatically handle hover, focus, and active states. Use additional attributes and classes for disabled and loading states.

Disabled State

Disabled Link

<button class="aiab-button aiab-button--primary" disabled>Disabled Button</button>
<button class="aiab-button aiab-button--secondary" disabled>Disabled Secondary</button>
<a href="#" class="aiab-button aiab-button--success aiab-disabled" aria-disabled="true">Disabled Link</a>

Loading State

<button class="aiab-button aiab-button--primary aiab-button--loading">
  <span class="aiab-spinner"></span>
  Loading...
</button>

Buttons with Icons

Add icons to buttons for better visual communication. Icons can be placed before or after the text.

Icon Buttons

<button class="aiab-button aiab-button--primary">
  <svg class="button-icon" width="16" height="16">...</svg>
  Download
</button>

<button class="aiab-button aiab-button--danger">
  Delete
  <svg class="button-icon button-icon--right" width="16" height="16">...</svg>
</button>

Icon-Only Buttons

<button class="aiab-button aiab-button--icon aiab-button--primary" aria-label="Settings">
  <svg width="20" height="20">...</svg>
</button>

Button Groups

Group related buttons together for toolbars and action sets.

Basic Button Group

<div class="button-group">
  <button class="aiab-button aiab-button--secondary">Left</button>
  <button class="aiab-button aiab-button--secondary">Middle</button>
  <button class="aiab-button aiab-button--secondary">Right</button>
</div>

Toolbar

<div class="button-toolbar">
  <div class="button-group">
    <button class="aiab-button aiab-button--sm">Bold</button>
    <button class="aiab-button aiab-button--sm">Italic</button>
    <button class="aiab-button aiab-button--sm">Underline</button>
  </div>
  <div class="button-group">
    <button class="aiab-button aiab-button--sm">Left</button>
    <button class="aiab-button aiab-button--sm">Center</button>
    <button class="aiab-button aiab-button--sm">Right</button>
  </div>
</div>

Accessibility

Buttons are built with accessibility in mind and follow WCAG 2.1 AA guidelines.

Best Practices

Use semantic <button> elements for actions
Use <a> elements for navigation
Always provide descriptive text or aria-label for icon-only buttons
Use aria-disabled="true" for disabled link buttons
Ensure sufficient color contrast (4.5:1 for normal text, 3:1 for large text)
Provide visual focus indicators

Accessible Examples

<!-- Icon-only button with aria-label -->
<button class="aiab-button aiab-button--icon" aria-label="Open settings menu">
  <svg>...</svg>
</button>

<!-- Button with additional context -->
<button class="aiab-button aiab-button--danger" aria-describedby="delete-warning">
  Delete Account
</button>
<span id="delete-warning" class="aiab-sr-only">This action cannot be undone</span>

API Reference

CSS Classes

Class	Description
`.aiab-button`, `.aiab-btn`	Base button class
`.aiab-button--primary`	Primary button variant
`.aiab-button--secondary`	Secondary button variant
`.aiab-button--success`	Success button variant (green)
`.aiab-button--danger`	Danger button variant (red)
`.aiab-button--warning`	Warning button variant (yellow)
`.aiab-button--info`	Info button variant (blue)
`.aiab-button--light`	Light button variant
`.aiab-button--dark`	Dark button variant
`.aiab-button--outline-*`	Outline variant of any color
`.aiab-button--ghost`	Ghost button with minimal styling
`.aiab-button--sm`	Small button size
`.aiab-button--lg`	Large button size
`.aiab-button--xl`	Extra large button size
`.aiab-button--block`	Full-width block button
`.aiab-button--icon`	Icon-only button (square)
`.aiab-button--loading`	Loading state with aiab-spinner
`.aiab-disabled`	Disabled state for link buttons

JavaScript API

Method	Description	Example
`amp.createButton()`	Create a button programmatically	`amp.createButton('Save', { variant: 'primary' })`
`amp.createIconButton()`	Create an icon button	`amp.createIconButton('settings', { size: 'sm' })`

CSS Variables

Variable	Default	Description
`--button-padding-x`	1rem	Horizontal padding
`--button-padding-y`	0.5rem	Vertical padding
`--button-font-size`	1rem	Base font size
`--button-border-radius`	0.25rem	Border radius
`--button-transition`	all 0.2s ease	Transition effect