# Button — Component Spec Pack (Sample Preview)
# Based on research across 20 design systems
# UI Guideline · uiguideline.com · Feb 2026
#
# ⚠️ This is a sample preview. The full Spec Pack includes complete data from all 20 Design Systems.

spec_pack_version: "0.1"
component:
  name: Button
  slug: button
  category: Buttons
  systems_analyzed: 19
  total_systems: 20

naming:
  recommended: Button
  adoption: 100%

anatomy:
  image_url: # Included in full Spec Pack
  proposed_by:
    - acme-design-system
    - horizon-ui
    - nimbus
    - prism
    - vertex
    # ··· 1 more in full pack

props:
  - name: size
    type: enum
    default: md
    required: false
    adoption: 74%
    description: Changes the size of the button, giving it more or less padding.
    values: [sm, md, lg, xl]

  - name: variant
    type: enum
    default: primary
    required: false
    adoption: 63%
    description: The color of the component.
    values: [primary, accent, secondary, destructive]

  - name: appearance
    type: enum
    default: contained
    required: false
    adoption: 68%
    description: Determines the importance in the hierarchy.
    values: [contained, outlined, ghost]

  # ··· 8 more props in the full Spec Pack

implementation_checklist:
  - task: Button prevents interaction when isDisabled is true
    priority: high
  - task: Loading state shows spinner and prevents interaction
    priority: high
  - task: Renders as anchor tag when href prop is provided
    priority: high
  # ··· 7 more items in the full Spec Pack

keyboard:
  - key: Enter
    action: Activates the button
  - key: Space
    action: Activates the button

aria:
  role: button
  design_requirements:
    - requirement: Visible focus indicator
      why: Keyboard users need to see where focus is
      spec: 2px ring, offset 2px, meets 3:1 contrast ratio
    - requirement: Minimum touch target size
      why: Users with motor impairments need adequate target size
      spec: 44px minimum for touch interfaces
    # ··· 2 more requirements + handoff notes in full pack

references:
  - name: Acme DS
    url: https://example.com
  - name: Horizon UI
    url: https://example.com
  - name: Nimbus
    url: https://example.com
  # ··· 16 more references in the full Spec Pack

# Sample Preview · Full Spec Pack at uiguideline.com/pricing