Learn the Front-end Beta Search

<button>

Draft

Definition

The <button> HTML element represents a clickable button that can be used to submit forms, trigger JavaScript functions, or perform other interactive actions. It’s one of the most commonly used interactive elements in web development and provides built-in accessibility features for keyboard navigation and screen readers.

Syntax

<button type="button">Button Text</button>

Attributes

Type Attribute

The type attribute determines the button’s behavior:

<button type="button">Regular Button</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

Other Common Attributes

<button
  id="my-button"
  class="btn btn-primary"
  disabled
  aria-label="Close dialog"
  data-action="close"
>
  Close
</button>

Examples

Basic Button Styles

HTML
Code
<div class="space-y-4">
  <div class="space-x-4">
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Primary Button
    </button>
    <button class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
      Secondary Button
    </button>
    <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-50">
      Outline Button
    </button>
  </div>
</div>

Button Sizes

HTML
Code
<div class="space-y-4">
  <div class="space-x-4">
    <button class="px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">
      Small
    </button>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Medium
    </button>
    <button class="px-6 py-3 text-lg bg-blue-500 text-white rounded hover:bg-blue-600">
      Large
    </button>
  </div>
</div>

Button States

HTML
Code
<div class="space-y-4">
  <div class="space-x-4">
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Normal
    </button>
    <button class="px-4 py-2 bg-blue-500 text-white rounded opacity-50 cursor-not-allowed" disabled>
      Disabled
    </button>
    <button class="px-4 py-2 bg-blue-500 text-white rounded animate-pulse">
      Loading
    </button>
  </div>
</div>

Icon Buttons

HTML
Code
<div class="space-y-4">
  <div class="space-x-4">
    <button class="p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
      </svg>
    </button>

    <button class="p-2 bg-red-500 text-white rounded-full hover:bg-red-600">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
      </svg>
    </button>

    <button class="p-2 bg-green-500 text-white rounded-full hover:bg-green-600">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
      </svg>
    </button>

  </div>
</div>

Button Groups

HTML
Code
<div class="space-y-4">
  <div class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
    <button class="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 border-r border-gray-300">
      Left
    </button>
    <button class="px-4 py-2 bg-white text-gray-700 hover:bg-gray-50 border-r border-gray-300">
      Center
    </button>
    <button class="px-4 py-2 bg-white text-gray-700 hover:bg-gray-50">
      Right
    </button>
  </div>
</div>

Form Buttons

HTML

Form Example

Code
<div class="max-w-md mx-auto bg-white p-6 border rounded-lg">
  <h3 class="text-lg font-semibold mb-4">Form Example</h3>

  <form class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
      <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div class="flex space-x-3">
      <button type="submit" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
        Submit
      </button>
      <button type="reset" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50">
        Reset
      </button>
    </div>

  </form>
</div>

Browser Support

The <button> element is supported in all browsers and has been a standard HTML element since HTML 3.2.

Best Practices

  1. Accessibility: Always provide meaningful text content or use aria-label for icon-only buttons
  2. Type attribute: Explicitly specify the type attribute to avoid unexpected form submissions
  3. Disabled state: Use the disabled attribute for buttons that shouldn’t be interactive
  4. Keyboard navigation: Ensure buttons are accessible via keyboard (Tab key) and can be activated with Enter or Space
  5. Visual feedback: Provide hover, focus, and active states for better user experience

Common Use Cases

  • Form submission: Submit buttons for forms
  • Navigation: Navigation buttons and links
  • Actions: Triggering JavaScript functions or API calls
  • Toggle states: Switching between different states or views
  • Modal controls: Opening, closing, or controlling modal dialogs
  • File operations: Upload, download, or delete actions
  • <input type="button">: Alternative button element for forms
  • <input type="submit">: Submit button for forms
  • <input type="reset">: Reset button for forms
  • <a>: For navigation links (use buttons for actions, links for navigation)
  • <label>: For labeling form controls