Struct Button 

pub struct Button;

The <button> element - represents a clickable button.

Purpose

The <button> element represents a clickable button control. Unlike <input type="button">, it can contain rich content like text, images, and other elements. Used for form submission, resetting forms, or triggering custom JavaScript actions. More flexible and semantic than input buttons.

Content Categories

• Flow Content
• Phrasing Content
• Interactive Content
• Palpable Content

Permitted Content Model

• Phrasing content (but no interactive content descendants)

Common Use Cases

• Form submission buttons
• Form reset buttons
• Custom action buttons with JavaScript
• Toggle buttons for UI state changes
• Buttons with icons or complex content

Key Attributes

• type: Button type (“submit”, “reset”, “button”)
• name: Name for form submission
• value: Value sent with form submission
• disabled: Disables the button
• form: Associates with a form by ID
• formaction: Override form’s action URL
• formmethod: Override form’s method
• formenctype: Override form’s encoding type
• formnovalidate: Override form’s validation
• formtarget: Override form’s target

Example

<!-- Submit button -->
<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

<!-- Reset button -->
<form>
  <input type="text" name="data">
  <button type="reset">Reset Form</button>
</form>

<!-- Button with custom action -->
<button type="button" onclick="alert('Clicked!')">Click Me</button>

<!-- Button with icon -->
<button type="submit">
  <svg width="16" height="16">
    <path d="M8 0l8 8-8 8-8-8z"/>
  </svg>
  Submit Form
</button>

<!-- Disabled button -->
<button type="submit" disabled>Please wait...</button>

<!-- Button overriding form attributes -->
<form action="/default" method="post">
  <input type="text" name="data">
  <button type="submit">Normal Submit</button>
  <button type="submit" formaction="/alternative" formmethod="get">
    Alternative Submit
  </button>
</form>

<!-- Button associated with external form -->
<form id="myForm" action="/submit">
  <input type="text" name="field">
</form>
<button type="submit" form="myForm">Submit External Form</button>

<!-- Delete button with confirmation -->
<button type="button" onclick="if(confirm('Delete?')) submit()">
  Delete Item
</button>

Accessibility

• Use descriptive button text that explains the action
• Provide aria-label when button contains only an icon
• Use type="button" for non-submit actions to prevent accidental submission
• Ensure sufficient color contrast for button text
• Make buttons keyboard accessible (they are by default)
• Use disabled attribute to prevent interaction, not just CSS
• Provide visual feedback for button states (hover, active, disabled)

WHATWG Specification

• 4.10.6 The button element

Trait Implementations

impl HtmlElement for Button

const TAG: &'static str = "button"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: PhrasingContent> CanContain<T> for Button

impl CanContain<Text> for Button

impl FlowContent for Button

impl InteractiveContent for Button

impl PalpableContent for Button

impl PhrasingContent for Button